[asp.net-mvc]Jquery-创建一个 div 和其他子元素

发布时间: 2017/3/25 11:46:05
注意事项: 本文中文内容可能为机器翻译,如要查看英文原文请点击上面连接.

我想为我的网站的评论部分。已过帐的评论后我想立即显示它而不是被迫重新加载该页面。所以我需要能够以某种方式创建 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 />

解决方法 1:

这是非常基本的例子,如何动态添加注释。没有我不能帮助更多返回什么数据的更多资料。这使得您的操作返回那个单一的注释部分视图的假设。

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.cshtml

return View("Comment", newCommentObj);

这意味着将有没有被传递的额外数据。 另一种方法是采取信息张贴在和自己使用 prepend 添加标记 (或追加,根据您的需要) 或作为 nayish 已经提到,使用克隆但再次虽然这是多一点的手册,你会最终管理中而不是一个两个地方的标记。使用这些方法将在长期内保持它疼痛。

官方微信
官方QQ群
31647020