ASP .NET MVC 5 + Bootstrap modal with form POST

Question

I've got problem with posting bootstrap modal in ASP .NET MVC 5 web application. I'm using partial view for modal:

    @model Presentation.APP.MyAPP.Portal.Models.DocumentAndFilesManager.AddDocumentTypeModel

<script>
    $(document).ready(function () {
        $("#addDocumentTypeModal").on("submit", "#form-adddocumenttype-appt", function (e) {
            e.preventDefault();  // prevent standard form submission

            var form = $(this);
            $.ajax({
                url: form.attr("action"),
                method: form.attr("method"),  // post
                data: form.serialize(),
                success: function (partialResult) {
                    $('#addDocumentTypeModal').modal('toggle');
                    $("#form-container").html(partialResult);
                }
            });
        });
    });
</script>

<div class="modal fade" id="addDocumentTypeModal" role="dialog">
    <div class="modal-dialog" role="document">
        <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>
                <h3 class="modal-title" id="addDocumentTypeModalLabel">Add document type</h3>
            </div>

            @using (Html.BeginForm("AddDocumentType", "WebManager", FormMethod.Post, new { id = "form-adddocumenttype-appt" }))
            {
                <div class="modal-body" id="form-container">
                    <div class="row">
                        <div class="col-sm-12">
                            Input unique NAME and unique REFERENCE NUMBER of new Document.
                        </div>
                    </div>

                    <div class="row">

                        <br />

                        @Html.ValidationSummary(true, "", new { @class = "text-danger" })

                        <div class="form-group">
                            @Html.LabelFor(m => m.DocumentTypeTitle, new { @class = "col-sm-12 control-label" })
                            <div class="col-sm-8">
                                @Html.TextBoxFor(m => m.DocumentTypeTitle, new { @class = "form-control" })
                                @Html.ValidationMessageFor(m => m.DocumentTypeTitle, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="form-group">
                            @Html.LabelFor(m => m.DocumentTypeReferenceNumber, new { @class = "col-sm-12 control-label" })
                            <div class="col-sm-8">
                                @Html.TextBoxFor(m => m.DocumentTypeReferenceNumber, new { @class = "form-control" })
                                @Html.ValidationMessageFor(m => m.DocumentTypeReferenceNumber, "", new { @class = "text-danger" })
                            </div>
                        </div>

                        <div class="modal-footer">
                            <button type="submit" class="btn btn-success">Add</button>
                            <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                        </div>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

Then I have parent view where partial view is rendered:

<div id="form-container">
@Html.Partial("_AddDocumentTypeModal")
</div>

And finally my controler action method:

[HttpPost]
    public ActionResult AddDocumentType(AddDocumentTypeModel model) {
        if (ModelState.IsValid) {
            if (!documentManagementFacade.AddDocumentType(model.DocumentTypeReferenceNumber, model.DocumentTypeTitle)) {
                ModelState.AddModelError("", "Document type with this title and/or reference number already exists!");
            }
            else
            {
                return Json(new { success = true });
            }
        }

        return PartialView("_AddDocumentTypeModal", model);
    }

Validation in form works fine, but there is a problem with modal after post: modal is still present after successful POST as well as after post with error. How can I display some message after post with error/hide modal after successful post?

Many thanks.

Answer 1

$.ajax({
 url: form.attr("action"),
 method: form.attr("method"),  // post
 data: form.serialize(),
 success: function (partialResult) {
       $('#addDocumentTypeModal').modal('hide');
       $('#addDocumentTypeModal').find("#errorMsg").hide();
       $("#form-container").html(partialResult);

     }
 error:function (error) {
       $('#addDocumentTypeModal').find("#errorMsg").html(error).show();
     }

});

Inside modal body add a error div

<div class="modal-body" id="form-container">
  <div class="alert alert-danger" id="errorMsg" style="display:none" >Oops! Some error.....</div>
  ....
  ....
</div>