单击提交按钮后，ASP.NET MVC 重定向到同一页面

Question

我和一些朋友已经开始了一个团队项目，但我们被困在了这一点上。我们制作了网站的功能，可以在每个帖子下添加 cmets。问题是单击提交时，它会添加评论但不会刷新页面，这会导致一些问题。作者保持“匿名”，点击刷新按钮时会显示警报：

您要查找的页面使用了您输入的信息。返回该页面可能会导致您重复执行的任何操作。你想继续吗？

但是，如果我们再次输入 URL 并单击 ENTER，一切都很好：作者出现了，而评论只出现了一次。所以我们唯一的解决方案是重定向到同一页面。这是表格：

<div style="text-align: left">
  <div><i>Leave your comment</i>
  </div>
  <form method="post">
    <fieldset>
      <p>
        <textarea rows="10" class="form-control" type="text" id="1" name="commentText" style="height: 100px"></textarea>
      </p>

      <p>
        <input type="submit" name="buttonSubmit" onclick="redirect" value="Add comment" class="btn btn-default" style="" />
      </p>
    </fieldset>
  </form>
</div>

这是 cmets 在页面上的打印方式：

 <h3>Comments</h3> 
<br>
<div>
  @foreach (var comment in ViewBag.Comments) {
  <section class="row">
    <article class="post col-md-12">
      <div class="about">
        Posted on <i>@comment.Date</i>
        @if (comment.AuthorId != null) { @: by <i>@comment.Author.FullName</i>
        }else { @: by <i>anonymous</i>
        }
      </div>
      <div class="body">@comment.Text</div>
    </article>
  </section>
  }
</div>

提前致谢！

Answer 1

使用@Ajax.BeginForm() 助手。

在AjaxOptions() 中，您需要将 Httpmethod 设置为“Post”、InsertionMode.InsertBefore（或 After，具体取决于您想要新 cmets 的位置）和 UpdateTargetId =“your-comment-div”。

您需要包含 jquery.unobtrusive-ajax.js 以便 Ajax 帮助程序正常工作。您可以使用 nuget 包管理器将其拉入。请务必将其添加到您的 jquery 包中。

然后，您需要在控制器中创建发布操作以接受评论参数并返回部分视图。

这样做会使 Ajax 仅限于剃刀助手和控制器方法。

查看：

    @using (Ajax.BeginForm("AjaxAddComment",
                           "MyController", 
                           /* route params */, 
                           new AjaxOptions()
                           {
                               InsertionMode = InsertionMode.InsertBefore,
                               UpdateTargetId = "commentsDiv",
                               HttpMethod = "Post"
                           }, htmlAttributes: new { /* ... */ }))
    {
        <div class="form-horizontal">
            @* comment form... *@
        </div>
    }

   ...

    <div id="commentsDiv">
        <div class="comment">...</div>
        <div class="comment">...</div>
    </div>

控制器：

[HttpPost]
//[ValidateAntiForgeryToken]
public async Task<PartialView> AjaxAddComment(string comment, /*...other params*/)
{
    var newComment = ... // comment viewModel
    // add comment to db
    await db.SaveChangesAsync();

    return PartialView("_CommentPartial", newComment);       
}

_CommentPartial：

<div class="comment">
    ...
</div>