0

私はMVCアプリケーションを開発しており、かみそりの構文を使用しています。

このアプリケーションでは、コメント機能を提供しています。

DBからコメント/レコードをロードする部分ビューを追加しました。

下の画像では、従業員インデックスビューのランタイムと呼ばれるコメントボックスを見ることができます。

問題は、ユーザーがコメントを削除すると、DBから削除されますが、ページにリダイレクトせずに画面からコメントを削除するにはどうすればよいですか？

削除されたコメントdivタグをスムーズに削除したい...

画像をご覧ください...

ここに画像の説明を入力してください

私のコードは...

@model  IEnumerable<CRMEntities.Comment>

@{


     <div class="ParentBlock">


    @foreach (var item in Model)
    {
        <div class="OwnerClass" id="OwnerName" data-comment-id="@item.Id">


         <span class="EmpName"> @Html.ActionLink(item.Owner.FullName, "Details", "EMployee", new { id = item.OwnerId }, new { @style = "color:#1A6690;" })</span>

           @Html.DisplayFor(ModelItem => item.CommentDateTime)

          <span class="EmpName"><button type="button" class="deleteComment">Delete</button></span>



        <p class="CommentP">
           @Html.DisplayFor(ModelItem => item.CommentText)
        </p>

        <br />
            <a class="Delete222" style="cursor:move;display:none;">DeleteNew</a>
        <br />

     </div>

    }


     <p class="p12">

      </p>



</div>

      <p id="ClassPara" class="ShowComments" onclick="chkToggle()">Show All Comments</p>

}


   @Html.TextArea("Comment", "", 5, 80, "asdsd")


    <input type="button" value="Add Comment" id="AddCommentButton"/>                         
    <input type="button" value="Clear" onclick="clearText()"/>                    

    <br />


</body>
</html>



<script src="../../Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".deleteComment").click(function () {
            alert("asd");
            var commentBlock = $(this).parent('.OwnerClass');
            commentBlock.hide('slow')

     });
    });


    $(document).ready(function () {

        $('.OwnerClass').hover(function () {
            $('.Delete222', this).show();
        }, function () {
            $('.Delete222').hide();


        });

    });

</script>
4

1 に答える 1

1

アクションリンクを生成する代わりに、そこにボタンまたはを配置します。JavaScript関数をバインドして、このボタンのイベントをクリックします。この関数では、dbからコメントを削除するアクションをajaxで呼び出し、Jqueryを使用して適切なdivを非表示にします。

<span class="EmpName"><button type="button" class="deleteComment">Delete</button></span>

JavaScript：

$('.deleteComment').click(function () 

        {
            var commentBlock = $(this).parent('.ParentBlock');
            $.ajax({

                type: 'post',
                url: '/Comment/DeleteComment',
                dataType: 'json',
                data:
                { 

                 commentId: getCommentId(commentBlock )

                },
                success: function (data) {

                    commentBlock.hide('slow')

                }

            });
        });

アップデート：

この回答の下の質問の更新とコメントによる更新：

$(document).ready(function () {
    $(".deleteComment").click(function () {

        var commentBlock = $(this).parent('.OwnerClass');

        $.ajax({
            type: 'post',
            url: '/Comment/DeleteComment',
            dataType: 'json',
            data:
            { 

             commentId: commentBlock.attr('data-comment-id')

            },
            success: function (data) {

                commentBlock.hide('slow')

            }

        });

 });
});
于 2012-09-21T10:36:02.150 に答える