Question

这个问题让我疯了两天我有强烈的键入视图与文本区域。用户可以在该区域撰写评论。单击按钮后，我保存注释并从操作方法返回视图，其中包含注释ID和注释文本。返回视图我添加到div称为“消息”，它的工作原理。保存的评论，返回的视图，显示正常，但是当我在浏览器中右键单击页面源 div“消息”为空。
这件事让我有问题。每个评论都有编辑按钮，如果我点击编辑时消息div中有5条评论我有5次编辑功能。但是，当我在div消息中使用注释硬编码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);
        }

enter image description here

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

enter image description here

这是评论视图。这是我添加到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是从源创建并显示的。如果稍后向DOM添加注释（使用jQuery），它将显示但页面源不会更新。到目前为止，这是预期的行为。

如果要在添加注释后检查HTML，请使用Firebug之类的工具。它适用于DOM，可以很好地处理动态部分。

多次执行事件处理程序的原因是您多次添加它。每次添加注释时，Ajax应答都会使用以下行传输（并且浏览器执行）脚本：

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

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

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

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

1 个答案: