0

何らかの方法で、コメント システムの ajax 投稿の結果を追加しようとしています。私はさまざまな方法を試しましたが、いずれも何らかの方法で失敗しているようです。

コメントの HTML は次のとおりです。

@using ( Html.BeginForm( ) )
{
    <ul class="commentList">
    @foreach ( var comment in Model )
    {
        <li>
            <a href="http://www.google.com"><img src='@Url.Content("~/Images/User.png")' alt="User" /></a>
            <div class="commentBody">
                <a href="http://www.google.com">@comment.UserName </a>
                <span>@comment.CommentText </span>
                <div>
                    <abbr title='@comment.CommentDate '>@comment.CommentDate.ToString( "dd. MMMM HH:mm" )</abbr>
                    <a href="#" class="likar">Like</a>
                </div>
            </div>
        </li>
     }
        <li class="commentAdd">
            <textarea id="CommentText" name="CommentText" rows="3" cols="20"></textarea>
            <label>
                <input type="submit" value="Write comment" />
            </label>
            @Html.ValidationMessage( "CommentText" )
        </li>
    </ul>
}

これが私のスクリプトです:

$('input[type="submit"]').click(function(event){

    // Prevent the default behaviour.
    event.preventDefault();
    var form = $(this).parent();
    var PostComment = { "comment": $("#CommentText").val() };
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "/Home/AddComment/",
        data: JSON.stringify(PostComment),
        dataType: "json",
        success: function (data) {
            var commentEntry = $('<li/>');
            commentEntry.append('<a href="http://www.ru.is"><img src=\'@Url.Content("~/Images/User.png")\' alt="User" /></a>');
            var diver = $('<div/>').addClass('commentBody');
            diver.append('<a href="http://www.google.com">').text(data.name).append('</a>');
            diver.append($('<span/>').text(data.comment));
            var diver2 = $('<div/>');
            diver2.append('<abbr title=\' ');
            diver2.append().text(data.timeOf);
            diver2.append('\'>');
            diver2.append().text(data.timeOf);
            diver2.append('</abbr><a href="#" class="likar">Like</a>');
            diver.append(diver2);
            commentEntry.append(diver);
            $(".commentAdd").before(commentEntry);
            // reset the form.
            form[0].reset();

        },
        error: function (xhr, err) {
            // Note: just for debugging purposes!
            alert("readyState: " + xhr.readyState +
            "\nstatus: " + xhr.status);
            alert("responseText: " + xhr.responseText);
        }
    });
});

PostComment クラスは次のようになります。

    public class PostComment
{
    public string comment { get; set; }
    public string name { get; set; }
    public string timeOf { get; set; }
}

の時刻は HomeController - AddComment でこのように設定されています

c.timeOf = DateTime.Now.ToString("yyyy-dd-MM HH:mm:ss");

ここで、c は PostComment クラスのインスタンスです。

私は単に追加の正しいアプローチを得ることができません。このように使用すると、date.name を追加した行で「a href」要素が DOM に追加されません。何か案は?私はできることを試しましたが、アイデアがありません。

4

1 に答える 1