Question

我试图以这种或那种方式追加评论系统中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类的实例。

我根本无法获得正确的追加方法。如果我像这样使用它，我appen date.name的行将不会将“a href”元素添加到DOM。有任何想法吗？因为我已经尽了我的努力而且没有想法。

Answer 1

您无法按照自己的方式使用.append()。您只能附加完整元素，而不是关闭标记：

您可以尝试以下方式：

success: function(data) {

    var diver2 = $('<div>')
        .append($('<abbr>').attr('title', data.timeOf))
        .append('<a href="#" class="likar">Like</a>');

    var diver = $('<div>').addClass('commentBody')
        .append('<a href="http://www.google.com">' + data.name + '</a>')
        .append($('<span>').text(data.comment))
        .append(diver2);

    var commentEntry = $('<li>')
        .append('<a href="http://www.ru.is"><img src=\'@Url.Content("~/Images/User.png")\' alt="User" /></a>')
        .append(diver);

    $('.commentAdd').before(commentEntry);

    // reset the form.
    form[0].reset();
}

请注意使用.attr()方法设置<abbr>元素的“title”属性。

附加到DOM

1 个答案: