रूपों के संपादन के लिए मोडल बूटस्ट्रैप विंडो

फ़ॉर्म को संपादित करने के लिए बूटस्ट्रैप-मोडल.जेएस प्लगइन का उपयोग करने की आवश्यकता थी। यह एक तुच्छ कार्य प्रतीत होगा, लेकिन मुझे कुछ कठिनाइयों का सामना करना पड़ा। इस लेख में मैं आपके साथ अपने फैसले को साझा करूंगा, अधिक सुरुचिपूर्ण निर्णय और स्वस्थ आलोचना का स्वागत है।

माल संपादित करने के लिए एक फॉर्म के साथ एक पृष्ठ है। निर्माताओं की सूची के साथ एक ड्रॉप-डाउन सूची के रूप में जोड़ें। आगे हम बूटस्ट्रैप आइकन-प्लस-सिंग आइकन रखते हैं, जो मोडल विंडो को कॉल करने के लिए ट्रिगर होगा।

<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> 

नोट: कस्टम html हेल्पर्स DropDownListFor और RawActionLink का उपयोग किया जाता है।

आगे बढ़ो। हम OnSuccess इवेंट के लिए एक js हैंडलर लिखते हैं।

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

अगला, हमें modal window की सामग्री को प्रस्तुत करने के लिए ProducerController में एक कार्रवाई की आवश्यकता है।

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

मोडल विंडो सामग्री की आंशिक प्रस्तुति:

 @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> } 

परिणामस्वरूप, हमें ट्रिगर पर क्लिक करके एक सुंदर पॉप-अप मिलता है।


अगला ऊपर संपादन योग्य फ़ॉर्म को मान्य करने और ड्रॉप-डाउन सूची में एक नया तत्व जोड़ने का कार्य है। ऐसा करने के लिए, हम OnSuccess इवेंट हैंडलर लिखते हैं। हम ड्रॉप-डाउन सूची आइटम को जोड़ने और संपादित करने की क्षमता प्रदान करेंगे। यदि फॉर्म की सामग्री मान्य नहीं है, तो फिर से मोडल विंडो के अंदर फॉर्म को ड्रा करें।

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

निर्माता नियंत्रक नियंत्रक में, हम एक और कार्रवाई लिखते हैं।
नोट: कस्टम स्थैतिक विधि RenderRazorViewToString का उपयोग कर

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

सामान्य तौर पर, यह सब है। आपका ध्यान देने के लिए धन्यवाद।

उपयोगी लिंक:
रूसी बूटस्ट्रैप मैनुअल
बूटस्ट्रैप- modal.js ट्यूटोरियल
सूत्र बूटस्ट्रैप-modal.js