ajaxで追加されたASP MVCビュー – ブラウザのページソースに表示されない

This problem drive me nuts for two days.
I have strongly typed view with text area. User can write comment
in that area. After button click I save comment and return view
from action method with comment id and comment text. Returned view
I add to div called “messages” and it works. Comments saved, View
returned, Display fine but when I right click in browser for page
source div “Messages” is empty.
This thing makes me problem. Each comment has edit button and if
there is 5 comments in messages div when I click edit I got edit
function called 5 times. But when I hard code HTML with comments in
div messages it works. But when I ajaxify page nothing works as it
should.
Here is the code:

<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('

');
        $(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">
            
@Model.CommentText

Edit </div> </div>
ベストアンサー

ページソースは、最初にサーバーから受信したページを表示します。
DOMはソースから作成され、表示されます。後で(jQueryを使用して)DOMにコメントを追加すると、そのページが表示されますが、ページソースは更新されません。これまでのところ、これは期待される動作です。

コメントが追加された後にHTMLを検査する場合は、Firebugのようなツールを使用します。
DOM上で動作し、ダイナミックな部分をうまく処理します。

イベントハンドラが複数回実行されるのは、そのイベントハンドラを何度か追加するためです。コメントが追加されるたびに、Ajaxの答えは次の行でスクリプトを送信(およびブラウザで実行)します。

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

その結果、いくつかのイベントハンドラがインストールされてしまいます。彼らは同じコードを持つかもしれません。しかし、それは問題ではありません。それらは何回かインストールされます。したがって、「編集」リンクをクリックすると、それらのいくつかが実行され、いくつかのテキストボックスが表示されます。

解決策は、JavaScriptのコード(SCRIPTタグを含む)を CommentView
からメインページのビューに移動することです。

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です