Return a modal confirmation box in a JsonResult from controller if a condition

Question

Hi everyone i have the following situation: I have a view in which I have a save button that is serializing a form and sending it by Ajax to a JsonResult in the Controller. Inside this JsonResult I'm adding/editing tables in the database. My question is if is possible to return a confirmation box to the view if a certain condition exists. Bellow is my code. Thanks in the advance :)

This is the javascript in my view that is sending the form-data to the controller by ajax.

<script>
    function submitForm() {
        $.ajax({
            type: 'POST',
            url: '@Url.Action("UpdateEvent", "EventCalendar")',
            data: $('#UpdateEventForm').serialize(),
            success: function (eventoId) {
                $('#modal-edit-event').modal('hide');
                $('#calendar').fullCalendar('refetchEvents');

            }
        });
    }

This is my Controller code that is receiving the form-data:

 public JsonResult UpdateEvent(.........)
 {
   List<Guid> usersChanged = new List<Guid>();
   .
   .
   .
   if(usersChanged.Count() > 0)
   {
    //Here is where i want to call a confirmation box
   }
   .
   .
   .
   return Json(eventId, JsonRequestBehavior.AllowGet);
}

}

Answer 1

Yes it is possible. All you have to do is, return the HTML markup needed to show in the modal dialog.

Here, i am using the RenderRazorViewToString method (from the Ben Lesh's answer on Render a view as a string )

public string RenderRazorViewToString(string viewName, object model)
{
    ViewData.Model = model;
    using (var sw = new StringWriter())
    {
        var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext,
                                                                    viewName);
        var viewContext = new ViewContext(ControllerContext, viewResult.View,
                                        ViewData, TempData, sw);
        viewResult.View.Render(viewContext, sw);
        viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View);
        return sw.GetStringBuilder().ToString();
    }
}

Now, you just need to call this method as needed to get the string version of your viewresult

public ActionResult UpdateEvent()
{

    if (SomeConditionHere)
    {
       var modalMarkup = RenderRazorViewToString("MyModalView", null);
       return Json(new { status = "failed", data = modalMarkup },
                                                            JsonRequestBehavior.AllowGet);
    }
    return Json(new { status = "success", eventId = 123 }, JsonRequestBehavior.AllowGet);
}

Assuming you have a view called MyModalView.cshtml which has the markup needed for the bootstrap modal dialog as below

<div class="modal-content">
    <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">Modal title</h4>
    </div>
    <div class="modal-body">
        <h2>Modal content</h2>
    </div>
    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
    </div>
</div>

Make sure your ajax call's success event callback method is checking the json data coming back and based on the status property value, use the data /eventId as needed.

success: function (res) {
    $("#myModal").remove();
    if (res.status === "failed") {
        $('<div id="myModal" class="modal fade"><div class="modal-dialog" role="document">'
                +res.data 
                +'</div></div>')
            .modal();
    } else {
        alert("eventId is : "+ res.eventId);
    }

}