无法在不刷新页面的情况下使用 ajax 调用更新 mvc 视图上的评论模块

Question

这对我来说是一个检查和配对的情况...... 我正在使用 mvc 3。 我正在尝试在单个视图上创建一个帖子和评论模块。下面是视图和控制器的代码。我能够加载帖子和所有 cmets，但是一旦我通过 AJAX 调用添加新评论，它就会保存到数据库中的正确表中，但我不明白如何在不刷新页面的情况下更新它。 .

//model
public class PostViewModel
{
   public bool? IsActive
    { get; set; }

   public string PostDescription
    { get; set; }

   ...

    public List<PostCommentModel> objPostCommentInfo { get; set; }
}

//Post Controller

 DBEntities1 db = new DBEntities1();

    public ActionResult Index(int ID)
    {

        int id = Convert.ToInt32(ID);
        PostViewModel objPostViewModel = new PostViewModel();
        List<PostViewModel> lstobjPostViewModel = new List<PostViewModel>();

        PostCommentModel objPostCommentModel;
        List<PostCommentModel> lstobjPostCommentModel = new List<PostCommentModel>();

        var objPost = (from x in db.PostInfoes 
                        where x.PostId  == id
                        select x).ToList();

        var objPostComment = (from y in db.PostCommentInfoes  
                               where y.PostId  == id
                               orderby y.CommentId  descending
                               select y).ToList();

        foreach  (var x in objPost)
        {

            objPostViewModel.PostID = x.PostId;
            objPostViewModel.IsActive = x.IsActive;
            objPostViewModel.PostTitle = x.PostTitle;
            objPostViewModel.PostDescription = x.PostDescription;
            lstobjPostViewModel.Add(objPostViewModel);
        }

        foreach (var y in objPostComment)
        {
            objPostCommentModel = new PostCommentModel();
            objPostCommentModel.PostId  = y.PostId;
            objPostCommentModel.IsActive  = y.IsActive;
            objPostCommentModel.CommentBody = y.CommentBody;
            lstobjPostCommentModel.Add(objPostCommentModel);
        }
        objPostViewModel.objPostCommentInfo = lstobjPostCommentModel;
        return View(lstobjPostViewModel);
    }

  //view
  @model IEnumerable<MVCProjectModels.PostViewModel>

<table border="1">
 @foreach (var item in Model)
 {    
    <tr>
        <td>
            <text>Created By:</text>
            @Html.DisplayFor(modelItem => item.PostDescription)
        </td>
        <td rowspan="2">
            @Html.DisplayFor(modelItem => item.PostDescription)
        </td>
    </tr>
    .....
  }
 </table>
 <table>
 <tr>
    <td>
        <textarea cols="10" rows="5" id="txtComment"></textarea>
    </td>
  </tr>
  <tr>
    <td>
        <input id="btnPostComment" type="button" value="Post Comment" />
    </td>
 </tr>
 </table>
 <table border="1">
 @foreach (var item1 in Model)
 {
    foreach (var item2 in item1.objPostCommentInfo)
    {    
    <tr>
        <td colspan="2">
            @Html.DisplayFor(modelItem => item2.CommentBody)
        </td>
    </tr>
    }
  }
 </table>

//Ajax 调用来更新评论（cmets 被保存到数据库，但我无论如何都找不到在 UI 或视图上更新它）

       <script type="text/javascript">

       $("#btnPostComment").click(function () {
       var commentBody = $("#txtComment").val();
       postComment(commentBody);
       });
       function postComment(commentBody) {
       $.ajax({
       url: "/Post/postComment", // this controller method calls a store procedure to insert the new comment in the database.
          type: 'POST',
          data: {
              Comment: commentBody,
              ID: 6
          },
          success: function (result) {

          },
          error: function () {
              alert("error");
          }
        });
        }
        </script>

如果我在上述模块中犯了任何重大设计错误，请告诉我。我是 mvc 的新手，所以只是试图通过阅读一些书籍和文章来做到这一点，所以不确定这是否是实现这种结果的正确方法。谢谢

Answer 1

您可以在 AJAX 调用的成功回调中将新的注释文本 .prepend() 到 cmets 表中：

success: function (result) {
    // give your comments table a class="comments" so that the following
    // selector is able to match it:
    $('table.comments').prepend(
        $('<tr/>', {
            html: $('<td/>', {
                text: commentBody
            })
        })    
    );
}

Answer 2

您需要为表格命名以便于参考：

<table border="1" id="postList">

在您看来，您正在编写用户名<text>Created By:</text>，但我在模型中没有看到。因此，假设它保存在会话中，或者您可以在控制器中检索它，您可以执行以下操作：

public ActionResult PostComment(YourModel input){
    // everything went well
    // you get this from a session or from the database
    var username = "the creator";
    return Json(new { success = true, username});
} 

在您的 ajax 调用的 success 上：

success: function (result) {
    if (result.success) {
        $("#postList").append('<tr><td><text>Created By:</text>' +
            result.username + '</td><td rowspan="2">' +
            commentBody + '</td>');
    </tr>
    }
}

如果不是连接从template 读取的tr 字符串并插入必要的值，那将会很酷。或者您可以使用其他工具（例如敲除）在客户端进行绑定。但这是我猜的另一个问题。