Question

我正在尝试为我的网站制作评论部分。评论发布后，我想立即显示，而不是被迫重新加载页面。所以我需要能够以某种方式创建div和其他元素，然后用相关数据填充它们。

$(document).ready(function () {

    $(".commentAnswer").keypress(function (e) {
        if (e.which == 13) {

            var commentData = { Value: ($(input).attr("data-answerId")),
                Description: ($(input).attr("value"))
            };

            $.ajax({
                type: "POST",
                url: '@Url.Action("SubmitComment", "Home")',
                data: JSON.stringify(commentData),
                dataType: "json",
                contentType: 'application/json, charset=utf-8',
                traditional: true,
                success: function (data) {
                    //create elements.

                }
            });

        }

    });

这是我要创建的块。

<div class="commentContent">
     <div class="comment">@comment.Comment.Text</div>
     <ul>
         <li>
             <div class="newsTime">@comment.User.FirstName @comment.User.LastName</div>
         </li>
         <li>- </li>
         <li>
             <div class="newsTime">
                 @foreach (var role in comment.CommenterRoles) {
                     if (role.Role.Equals("Authenticated") || role.Role.Equals("Administrator")) {
                                            //Don't write anything
                     } else {
                         @role.Role@:.
                     }
                 }
             </div>
         </li>
         <li>- </li>
         <li>
             <div class="newsTime">
                 @Project.Tools.TimeTool.ToTimeSinceString(comment.Comment.SubmitDateTime)
             </div>
        </li>
    </ul>
</div>
<hr />

Answer 1

这是如何动态添加评论的一个非常基本的示例。关于返回什么数据的更多信息，我无法提供更多帮助。这假设您的Action返回该单个注释的部分视图。

包含示例标记的JSFiddle： http://jsfiddle.net/HenryGarle/SMbxk/

// This is what you would add to your success call - Assumes that your action method returns a parial view for the comment


data = "<div class=\"comment\"> Some Example </div>";

$(".commentContent").prepend(data);

我的推荐：

创建显示单个评论的部分视图。在你的注释内部做一个foreach循环调用部分传递单个注释对象。即：

foreach (var comment in Model.Comments)
{
 @Html.Partial("comment", comment);
}

Comment.cshtml：

这是您重复标记的位置。

SubmitComment行动：使用新添加的Comment

返回部分Comment.cshtml

return View("Comment", newCommentObj);

这意味着不会传递额外的数据。另一种方法是获取发布的信息并使用前置添加标记（或者根据您的需要添加）或者正如nayish所提到的那样，使用克隆但是再次使用克隆，虽然这是一个更多的手册，你将结束在两个地方而不是一个地方管理标记。使用这些方法会使其长期保持疼痛。

Answer 2

您需要做的是在页面中创建一个隐藏的区域，并放置您想要的元素并稍后更改：

<强> HTML

<div id="hidden" style="display: none">
     <div class="commentContent">
          <div class="comment">@comment.Comment.Text</div>
          <ul>
              <li>
                  <div class="newsTime"></div>
              </li>
              <li>- </li>
              <li>
                   <div class="newsTime">
                   </div>
              </li>
              <li>- </li>
              <li>
                  <div class="newsTime">
                  </div>
             </li>
        </ul>
    </div>
</div>

现在使用jquery克隆这个div并更改不同列表项的内部并将其植入到页面上的任何位置。

Answer 3

使用.load()函数将ajax调用的结果加载到选择器。

如果您将其瞄准返回部分视图的操作，那么您将不必使用JSON结果来构建HTML以使用DOM插入函数插入DOM：

Answer 4

您可能希望了解一下：http://api.jquery.com/jquery.tmpl/

我认为它仍然是测试版，但它让我想到了你的问题。

Jquery - 创建div和其他子元素

4 个答案: