使用 ajax 添加的 ASP MVC 视图 - 在浏览器页面源中不可见

Question

这个问题让我疯了两天。
我有文本区域的强类型视图。用户可以在该区域写评论。单击按钮后，我保存评论并从带有评论 ID 和评论文本的操作方法返回视图。返回的视图我添加到名为“消息”的 div 中，它可以工作。评论已保存，查看返回，显示正常，但当我在浏览器中右键单击页面源时 div "Messages" 为空。
这件事让我有问题。每个评论都有编辑按钮，如果当我单击编辑时消息 div 中有 5 个 cmets，我会调用 5 次编辑函数。但是当我在 div 消息中使用 cmets 对 HTML 进行硬编码时，它可以工作。但是当我 ajaxify 页面时，没有任何效果。
代码如下：

<script>
    $(function () {
        $('#addMessageForm').submit(function () {
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {                    
                    $('#messages').prepend($(result).fadeIn('slow'));                    
                }
            });
            return false;
        });
    });
</script>

@using (Html.BeginForm("AddMessage", "Comment", FormMethod.Post, new { id = "addMessageForm" }))
{
    @Html.TextAreaFor(a => a.CommentText);
    <input type="submit" value="Submit Comment" />
}

<div id="messages">
</div>

这是添加评论操作方法：

[HttpPost]
        public ActionResult AddMessage(CommentModel model)
        {
            model.Author = "Vlada Vucetic";

            Random r = new Random();
            int n = r.Next(1, 1000000);

            model.CommentId = n;
            return View("CommentView", model);
        }

当我单击编辑按钮时会发生这种情况。但正如我所说，当我在 div 消息中添加硬代码注释 div 并单击编辑时，它只调用一次。我不知道这里发生了什么？为什么页面源在浏览器中不显示任何内容...

这是评论视图。这是我添加到 div 消息的内容。

@model Demo_AjaxPosting.Models.CommentModel
@{
    Layout = null;
}
<script src="../../json2.js" type="text/javascript"></script>
<script>
    $('.editButton').live('click', function (e) {
        e.preventDefault();

        var container = $(this).closest('div');  //$(this).closest('.commentWrap');
        var itemId = container.attr('id');
        alert(itemId);
        var nestId = '#' + itemId;

        var txt = $(nestId + ' #commentTextValue').text();

        $(nestId + ' #commentTextValue').remove();
        $(nestId + ' #editButton').remove();
        $(nestId).prepend('<textarea id="editArea">' + txt + '</textarea>');
        $(nestId).append('<input type="submit" value="Ok" class="btnOk" />');
    })
</script>

    <div style="border: 1px solid #dddddd;">
        @Html.ActionLink(@Model.Author, "SomeAction") @Model.CommentId
        <div class="commentWrap" id="@Model.CommentId">
            <p id="commentTextValue">@Model.CommentText</p>
            <a class="editButton" href="#">Edit</a>
        </div>
    </div>

Answer 1

页面源显示最初从服务器接收到的页面。 DOM 从源创建并显示。如果您稍后将 cmets 添加到 DOM（使用 jQuery），它将显示但页面源不会更新。到目前为止，这是预期的行为。

如果您想在添加 cmets 后检查 HTML，请使用 Firebug 之类的工具。它适用于 DOM 并很好地处理动态部分。

您的事件处理程序执行多次的原因是您添加了多次。每次添加评论时，Ajax 答案都会传输（并且浏览器执行）带有以下行的脚本：

$('.editButton').live('click', function (e) {

因此，您最终安装了多个事件处理程序。他们可能有相同的代码。但这没关系。它们被安装了几次。因此，如果您单击“编辑”链接，其中几个会被执行，您会得到几个文本框。

解决方案是将 Javascript 代码（包括 SCRIPT 标签）移出 CommentView 并进入主页视图。