【问题标题】:Ajax Modal Not Updating Target IDAjax 模式未更新目标 ID
【发布时间】:2015-06-19 10:09:03
【问题描述】:

我有以下模式可以将 cmets 添加到博客,但是当我提交表单而不是使用所有已添加 cmets 的列表更新目标 ID 时,它会重定向到带有 cmets 列表的新页面?如何更新目标 ID 以便它与所有其他评论一起显示新评论?

 <button type="button" class="btn btn-primary" data-toggle="modal"    data-target="#myModal"> Launch demo modal</button>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
    @using (Ajax.BeginForm("AddComment", "Blog", new AjaxOptions
                {
                    HttpMethod = "POST",
                    InsertionMode = InsertionMode.Replace,
                    UpdateTargetId = "comments",
                    LoadingElementId = "progress",
                    OnSuccess = "$('#myModal').modal('hide');"

                }))
      {
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Add Comment</h4>
        </div>
        <div class="modal-body">
             @Html.ValidationSummary(true)
             @Html.HiddenFor(model => model.Blog.BlogID)

             <div class="form-group">
                 @Html.LabelFor(model => model.BlogComment.Comment)
                 @Html.TextAreaFor(model => model.BlogComment.Comment, 4, 104, new { @class = "form-control" })
                 @Html.ValidationMessageFor(model => model.BlogComment.Comment)
             </div>

        </div>
        <div class="modal-footer">
           <button type="button" class="btn btn-primary">Save changes</button>
           <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
        </div>
      }
  </div>
 </div>
</div>


<div id="comments">
   @Html.Action("Comments", "Blog", new { id = Model.Blog.ID })
</div>



public PartialViewResult Comments(int id)
{
    IEnumerable<BlogComment> CommentList = _repository.GetBlogComments(id);

    return PartialView("_BlogComments", CommentList);

}

public ActionResult AddComment(// All Pramameters)
{
     if (ModelState.IsValid)
     {
          // Do Save Comment

          if (Request.IsAjaxRequest()) 
          {
             return RedirectToAction("Comments", new { id = id });
          }

     }
     else
    {
        //return to modal with errors
         return PartialView("_CreateComment", BlogViewModel);
     }

 }

【问题讨论】:

  • if (Request.IsAjaxRequest()) 无关。我可以完全消除这种情况。它仍然没有更新作为操作的 targetid。我认为问题可能是添加评论后如何返回视图。

标签: javascript jquery ajax asp.net-mvc bootstrap-modal


【解决方案1】:

RedirectToAction 将触发客户端重定向。

将你的 return 改为 this ,它只是调用你现有的返回 PartialViewResult 的方法:

 if (Request.IsAjaxRequest()) 
 {
     return Comments(id);
 }

更新

另请参阅下面的 cmets 以了解另一方面,即不显眼的 ajax 和 jquery 验证更新。

【讨论】:

  • 除了按照建议更改返回之外,问题还在于 jquery unobtrusive ajax 和 jquery validate。将两者都更新为修复了该问题的较新版本。
  • 还有一个问题。我的模态是局部视图。如果出现错误,如何重新显示模态框?
  • @ozzii 您可以使用 javascript 进行测试,失败只需使用 bootstrap api。在这里看到这个:stackoverflow.com/questions/28987752/…
  • 我认为模态是通过$('#myModal').modal(options)getbootstrap.com/javascript/#modals调用的
猜你喜欢
  • 1970-01-01
  • 2019-03-27
  • 2017-05-08
  • 2011-11-30
  • 1970-01-01
  • 2015-03-25
  • 2020-07-04
  • 2019-03-28
  • 1970-01-01
相关资源
最近更新 更多