Clever Geek Handbook

フォームを編集するためのモーダルブートストラップウィンドウ

フォームを編集するには、bootstrap-modal.jsプラグインを使用する必要がありました。 些細な作業のように思えますが、いくつかの困難に直面しなければなりませんでした。 この記事では、私の決定、よりエレガントな決定と健全な批判を歓迎します。



商品を編集するためのフォームを含むページがあります。 メーカーのリストを含むドロップダウンリストをフォームに追加します。 次に、ブートストラップアイコンと歌うアイコンを配置します。これは、モーダルウィンドウを呼び出すためのトリガーになります。



画像 



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




次に、モーダルウィンドウのコンテンツをレンダリングするための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); }




ProducerControllerコントローラーで、別のアクションを作成します。

注：カスタムの静的メソッド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 }); }




画像



一般に、それですべてです。 ご清聴ありがとうございました。



便利なリンク：

ロシアのブートストラップマニュアル

Bootstrap-modal.jsチュートリアル

ソースbootstrap-modal.js


More articles:


All Articles