Ajax Modal Not Updating Target ID

Question

I have the following modal to add comments to a blog but when I submit the form instead of updating the target id with list of all added comments it redirect to a new page with list of comments? How Do I update the target ID so that it display the new comment along with all the others?

 <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);
     }

 }

It has nothing to do with `if (Request.IsAjaxRequest())` . I can take the condition out completely. It's still not updating the targetid which is an action. I think the question maybe how do I return the view after a comment is added. — adam78, Jun 19 '15 at 10:45

hutchonoid · Accepted Answer · 2015-06-22T13:10:54.130

1

The RedirectToAction will be triggering a client-side redirect.

Change your return to this instead which simply calls your existing method that returns the PartialViewResult:

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

Update

Also see the comments below for another aspect i.e. unobtrusive ajax and jquery validate update.

edited Jun 22 '15 at 13:10

answered Jun 19 '15 at 10:58

hutchonoid

32,982
15
99
104

In addition to changing the return as suggested the issue was with jquery unobtrusive ajax and jquery validate. Updated both to a newer version which fixed the issue. – adam78 Jun 22 '15 at 13:08
One more question though. My modal is in a partial view. How do I redisplay the modal if there are errors? – adam78 Jun 22 '15 at 13:10
@ozzii You can test with javascript, failing it simply use the bootstrap api. See this here: http://stackoverflow.com/questions/28987752/jquery-post-and-unobtrusive-ajax-validation-not-working-mvc-4/28989183#28989183 – hutchonoid Jun 22 '15 at 13:13
I think modal is called via `$('#myModal').modal(options)` http://getbootstrap.com/javascript/#modals – hutchonoid Jun 22 '15 at 13:15

Ajax Modal Not Updating Target ID

1 Answers1