Bootstrap modal window for editing forms

There was a need to use the bootstrap-modal.js plugin to edit the form. It would seem a trivial task, but I had to face some difficulties. In this article I will share with you my decision, more elegant solutions and healthy criticism are welcome.

There is a page with a form for editing the product. Add a drop-down list with a list of manufacturers to the form. Next we will place the bootstrap icon-plus-sing icon, which will be the trigger for calling the modal window.

<div id="edit_producer" class="modal fade hide in"> </div> <div class="editor-label"> @Html.LabelFor(model => model.Producers) </div> <div class="editor-field"> @Html.DropDownListFor(model => model.ProducerId, Model.Producers) @Ajax.RawActionLink( "<i class='icon-plus-sign icon-2x'></i>", ActionConstants.Edit, ProducerController.Name, null, new AjaxOptions { UpdateTargetId = "edit_producer", InsertionMode = InsertionMode.Replace, HttpMethod = "GET", OnSuccess = "ShowProducerEditModal" }, null) @Html.ValidationMessageFor(model => model.Producers) </div> </div> 

Note: custom DropDownListFor and RawActionLink html-helpers are used.
')
Go ahead. We write js handler for the OnSuccess event.

 function ShowProducerEditModal() { $('#edit_producer').modal('show'); } 

Next, we need an action in the ProducerController controller to render the contents of the modal window.

 [HttpGet] public ActionResult Edit(long? id) { ProducerEditModel model = service.GetProducerEditModel(id); return PartialView("ProducerEditPartial", model); } 

Partial presentation of modal window content:

 @using (Ajax.BeginForm( ActionConstants.Edit, ProducerController.Name, new AjaxOptions { HttpMethod = "POST", OnSuccess = "OnSuccess" })) { <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3> </h3> </div> <div class="modal-body"> @Html.HiddenFor(model => model.Id) <div class="editor-label"> @Html.LabelFor(model => model.Name) </div> <div class="editor-field"> @Html.EditorFor(model => model.Name) @Html.ValidationMessageFor(model => model.Name) </div> </div> <div class="modal-footer"> <input type="submit" class="btn btn-success" value="" /> <a href="#" class="btn" data-dismiss="modal">Close</a> </div> } 

As a result, we get a beautiful popup with a form by clicking on the trigger.


Next comes the task of validating the edited form and adding a new item to the drop-down list. To do this, we write the OnSuccess event handler. Let's consider the possibility of adding and editing an item in the drop-down list. If the content of the form is not valid, then draw the form inside the modal window again.

 function OnSuccess(data) { if (data.isValid) { $('#edit_producer').modal('hide'); if (data.isNew) { AppendToDropDownList(data.name, data.id, 'ProducerId'); } else { EditDropDownListItem(data.name, data.id, 'ProducerId'); } } else { $('#edit_producer').html(data.partialView); } } function AppendToDropDownList(text, value, ddlId) { var newItem = $('<option/>', { value: value, text: text }); $('#' + ddlId).append(newItem); } function EditDropDownListItem(text, value, ddlId) { $('#' + ddlId + ' option[value="' + value + '"]').text(text).val(value); } 

In the controller ProducerController write another action.
Note: the custom static RenderRazorViewToString method is used.

 [HttpPost] public ActionResult Edit(ProducerEditModel model) { if (ModelState.IsValid) { bool isNew = model.Id == 0; long id = service.Save(model); return Json(new { isValid = true, id = id, name = model.Name, isNew = isNew }); } return Json(new { partialView = RenderUtils.RenderRazorViewToString(this, "ProducerEditPartial", model), isValid = false }); } 

In general, that's all. Thanks for attention.

Useful links:
Bootstrap Russian manual
Bootstrap-modal.js tutorial
Sources bootstrap-modal.js