Question

我只是想学习如何在ASP.NET MVC中使用JQuery AJAX，因此我构建了一个页面，允许您在列表中添加和删除注释。唯一不起作用的是删除刚刚通过AJAX调用添加的注释。注释将从数据库中删除，但重新加载页面而不是正在执行的AJAX。这仅适用于刚刚通过AJAX添加的评论。 AJAX删除在页面加载时已存在的注释中正常工作。

我有一个视图和一个部分视图，其中包含用于新评论的html。然后，当添加注释时，此html将附加到视图中的注释div。

注意：我希望这是独立于javascript的，所以我在每条评论上的删除按钮都是自己的形式，如果禁用了javascript，它将执行POST。

查看（Index.aspx）

<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage<IEnumerable<AJAXComments.Models.Comment>>" %>

<!DOCTYPE html>

<html>
<head runat="server">
    <title>Index</title>
    <link rel="Stylesheet" type="text/css" href="../../Content/Styles/Master.css" />
    <script src="../../Scripts/jquery-1.4.4.min.js" type="text/javascript"></script>
</head>
<body>
    <div id="Container">
        <h2>Comments</h2>
        <div id="Comments">
        <% foreach (var c in Model)
           { %>
            <div class="comment">
                <input class="id" type="hidden" value="<%: c.Id %>" />
                <div class="author">Posted by <%: c.User %></div>
                <div class="comment-text">
                    Posted <%: c.DateTimePosted %>
                    <p><%: c.CommentText %></p>
                    <% using (Html.BeginForm("DeleteComment", "Home", new { id = c.Id }, FormMethod.Post, new { @class = "DeleteForm" }))
                       { %>
                       <input type="submit" value="Remove" />
                    <% } %>
                </div>
            </div>
        <% } %>
        </div>
        <div id="AddComment">
        <% using (Html.BeginForm("AddComment", "Home", FormMethod.Post, new { id = "AddCommentForm" }))
           { %>
            <label for="User">Your Name:</label>
            <input name="User" id="User" type="text" /><br />
            <label for="CommentText">Comment:</label>
            <textarea name="CommentText" id="CommentText" rows="5" cols="10"></textarea><br />
            <input id="Submit" type="submit" value="Submit" />
            <input id="Reset" type="reset" class="hidden" />
        <% } %>
        </div>
        <p class="response"></p>
    </div>
</body>
</html>

部分视图

<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<AJAXComments.Models.Comment>" %>

<div class="comment hidden">
    <input class="id" type="hidden" value="<%: Model.Id %>" />
    <div class="author">Posted by <%: Model.User %></div>
    <div class="comment-text">
        Posted <%: Model.DateTimePosted %>
        <p><%: Model.CommentText %></p>
        <% using (Html.BeginForm("DeleteComment", "Home", new { id = Model.Id }, FormMethod.Post, new { @class = "DeleteForm" }))
           { %>
            <input type="submit" value="Remove" />
        <% } %>
    </div>
</div>

Controller ActionResult

[AcceptVerbs(HttpVerbs.Post)]
    public ActionResult DeleteComment(int id)
    {
        var comment = commentsRep.GetCommentById(id);

        if (Request.IsAjaxRequest())
        {
            commentsRep.DeleteComment(comment);

            return Json("Comment removed");
        }
        else
        {
            commentsRep.DeleteComment(comment);

            return RedirectToAction("Index");
        }
    }

JQuery的

$(document).ready(function () {

        $('#AddCommentForm').submit(function (e) {
            e.preventDefault();

            var form = {
                'User': $('#User').val(),
                'CommentText': $('#CommentText').val()
            };

            $.ajax({
                url: '/Home/AddComment',
                type: 'POST',
                data: form,
                success: function (html) {
                    $('#Comments').append(html);
                    $('.comment').slideDown('normal', function () {
                        $(this).removeClass('hidden');
                    });
                    $('#Reset').trigger('click');
                }
            });
        });

        $('.DeleteForm').submit(function (e) {
            e.preventDefault();

            var id = $(this).parent().siblings("input.id").val();
            var comment = $(this).parent().parent('.comment');

            $.ajax({
                url: '/Home/DeleteComment',
                type: 'POST',
                data: { id: id },
                success: function (response) {
                    $('p.response').append(response);
                    comment.slideUp('normal', function () {
                        comment.remove();
                    });
                }
            });
        });

    });

感谢任何帮助！

Answer 1

而不是：

$('.DeleteForm').submit(function(e) {});

您应该使用：

$('#Comments').delegate('.DeleteForm', 'submit', function(e) {...});

这会自动将事件绑定到加载到页面的新表单上。

ASP.NET MVC AJAX删除不适用于AJAX添加的记录

1 个答案: