Question

我正在网站工作，我想在帖子中添加评论，一切都在使用Html.Begin表单，但每次添加评论时页面都会刷新。

我用Ajax.BeginForm替换了Html.BeginForm但我要刷新页面才能看到评论。我添加了jquery.unobtrusive-ajax.js但仍然没有工作。

控制器：

    public PartialViewResult Comments(string id)
    {
        return PartialView("Comments", _dc.Comments.Where(m => m.Id_P == id).OrderByDescending(m => m.Date).ToList());
    }

    public ActionResult AddComment(string id, string comment)
    {
        Comment com = new Comment();
        com.Id = Guid.NewGuid().ToString();
        com.Id_A = AccountInfo.Id;
        com.CommentT = comment;
        com.Id_P = id;   
        com.Date = String.Format("{0: dd MMM 'at' HH:mm}", DateTime.Now);

        _dc.Comments.Add(com);
        _dc.SaveChanges();

        return RedirectToAction("Index", "Home");
    }

查看：

<div class="article-comments">
    <div class="post-comm">
        @Html.Action("Comments", "Post", new { id = item.Id })
            @using (Ajax.BeginForm("AddComment", "Post", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "post-comm" }))
            {
                <input type="hidden" id="id" value="@item.Id" name="id" />
                <div class="form-group">
                    <div class="col-md-12">
                        <input class="form-control" placeholder="enter your comment..." name="comment" id="comment">
                    </div>
                </div>
             }
    </div>
</div>

我试过了，但现在正在刷新页面

public JsonResult AddComment(string id, string comment)
    {
        Comment com = new Comment();
        com.Id = Guid.NewGuid().ToString();
        com.Id_A = AccountInfo.Id;
        com.CommentT = comment;
        com.Id_P = id;   
        com.Date = String.Format("{0: dd MMM 'at' HH:mm}", DateTime.Now);

        _dc.Comments.Add(com);
        _dc.SaveChanges();

        return Json("success");
    }

观点：

<div class="post-comm">
    @Html.Action("Comments", "Post", new { id = item.Id })
</div>
<form method="post" onsubmit="addComment('@item.Id', this)">
    <div class="form-group">
         <div class="col-md-12">
              <input class="form-control" placeholder="enter your comment..." name="comment" id="comment">
          </div>
     </div>
</form>

和ajax电话

function addComment(idP, el) {
var comm = $(el).find("#comment").val()
$.ajax({
    url: "/Post/AddComment/",
    type: "POST",
    data: { id: idP, comment: comm },
    async: true,
    success: function (data) {
        $(".post-comm").load("@Html.Action('Comments', 'Post', new { id = "+ idP +"})")
    },
    error: function (xhr) {
        alert("error - comment post");
    }
});}

Answer 1

好的，所以我最终做到了。我这样做就像Burak说的那样并且正在发挥作用。

我做了一个ajax调用来返回像这样的局部视图：

function reloadComments(el) {
var idP = $(el).attr("id")
$.ajax({
    url: '/Post/Comments/',
    data: { id: idP, },
    type: 'POST',
    success: function (result) {
        $(el).prevAll("div.post-comm:first").html(result);
    },
    error: function (xhr) {
        alert("error - load comments");
    }
});}

和视图：

<div class="post-comm">
    @Html.Action("Comments", "Post", new { id = item.Id })
</div>
@using (Ajax.BeginForm("AddComment", "Post", new AjaxOptions { HttpMethod = "POST", OnSuccess = "reloadComments(this)" }, new { id=item.Id}))
{
     <input type="hidden" id="id" value="@item.Id" name="id" />
     <div class="form-group">
         <div class="col-md-12">
              <input class="form-control" placeholder="enter your comment..." name="comment" id="comment">
         </div>
     </div>
}

控制器就像我问题中的最后一个我希望这有助于某人

MVC 5 Ajax.Begin表单不替换UpdateTargetId

1 个答案: