ASP.NET MVC Перенаправление на ту же страницу после нажатия кнопки отправки

Question

некоторые друзья и я начали проект команды, но мы застряли на этом этапе. Мы сделали функцию сайта, чтобы добавлять комментарии к каждому сообщению. Проблема заключается в том, что при нажатии кнопки добавляется комментарий, но не обновляется страница, которая вызывает некоторые проблемы. Автор остается «анонимным», а при нажатии кнопки обновления отображается предупреждение:

Страница, в которой вы ищете информацию, которую вы ввели. Возврат на эту страницу может привести к повторению любого действия, которое вы приняли. Вы хотите продолжить?

Однако, если мы просто набираем URL еще раз и нажимаем «ВВОД», все хорошо: появляется автор, и комментарий появляется только один раз. Поэтому единственным решением для нас является перенаправление на ту же страницу. Вот форма:

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

Это как комментарии печатаются на странице:

<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 в зависимости от того, где вы хотите новые комментарии) и UpdateTargetId = «your-comment-div».

Вам нужно включить 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>