Question

有些朋友和我已经开始了一个团队项目，但我们现在陷入困境。我们制作了网站的功能，在每个帖子下添加评论。问题是，当单击提交时，它会添加注释，但不会刷新导致某些问题的页面。作者保持匿名＆＃34;单击刷新按钮时会显示警告：

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

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

提前致谢！

Answer 1

使用@Ajax.BeginForm()帮助程序。

在AjaxOptions()中，您希望将Httpmethod设置为＆＃34; Post＆＃34;，InsertionMode.InsertBefore（或者After取决于您想要新评论的位置），以及UpdateTargetId =＆＃34;您的注释-DIV＆＃34 ;.

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

然后，您需要在控制器中创建post动作以接受注释参数并返回部分视图。

这样做可以将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>

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

1 个答案: