1.在Index.cshtml中添加創建按鈕

<a class="btn btn-success" href="@Url.Action("create" })" data-toggle="x-modal" data-modalId="@(Guid.NewGuid().ToString("N"))" ><span class="glyphicon glyphicon-plus"></span>創建</a>

2.控制器

[HttpGet]public ActionResult Create(){ViewBag.ModalID = Request["ModalID"];StudentModel model = new StudentModel();model.StatusID = 1;return View("CreateOrEdit",model);}

3.html代碼

CreateOrEdit.cshtml代碼

@{var action = ViewContext.RouteData.Values["Action"].ToString().ToLower();ViewBag.Title = action == "create" ? "添加信息" : "修改信息";Layout = "~/Views/Shared/_FormMaster.cshtml"; } @model Models.Students.StudentsModel <div id="form-content" class="container">@using (Ajax.BeginForm(action, "Students", new { area = "Students" }, new AjaxOptions { OnSuccess = "onsuccess", HttpMethod = "Post", UpdateTargetId = ViewBag.ModalID, InsertionMode = InsertionMode.Replace }, new { @class = "form-horizontal", role = "form" })){//模態框 ID<input type="hidden" name="ModalID" value="@ViewBag.ModalID" />if (!string.IsNullOrEmpty(ViewBag.FormCode)){//表單狀態代碼<input type="hidden" name="FormCode" id="@(ViewBag.ModalID + "_FormCode")" value="@ViewBag.FormCode" />}<div class="modal-dialog" style="width: 400px;"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h4 class="modal-title" id="myModalLabel">@ViewBag.Title</h4></div><div class="modal-body">@Html.HiddenFor(t => t.ID) <div class="form-group"><label class="control-label col-md-3">@Html.LabelFor(t => t.Name)</label><div class="col-md-8 input-group">@Html.TextBoxFor(t => t.Name, new { @class = "form-control " })@Html.ValidationMessageFor(t => t.Name, null, new { @class = "input-group-addon" })</div></div> </div><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">關閉</button><button type="submit" class="btn btn-primary">保存</button></div></div><!-- /.modal-content --></div><!-- /.modal-dialog -->}<script type="text/javascript">function onsuccess() {var ModalID = "@ViewBag.ModalID";if ($('#' + ModalID + "_FormCode").val() == "1") {alert("提示", "保存成功！");}refresh();}</script> </div>

4.提交表單

[HttpPost] public ActionResult Create(StudentsModel model) {ViewBag.ModalID = Request["ModalID"];if (ModelState.IsValid){ //添加餐桌var result = InsertRule(model.ID, model.Name);if (result.IsOK){//成功ViewBag.FormCode = "1";}}return View("CreateOrEdit", model); }

?

總結

以上是生活随笔為你收集整理的第七章 模态框的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。