弹窗关闭并刷新页面元素
我想，对于初学者来说，可能多多少少都会遇到这样的问题，比如我想对一个模块进行增、删、改操作，希望弄的炫一点，就用弹窗的形式，而不是基本的新页面形式。好，弹窗能实现了，但是当提交了数据点击“添加”或者“保存”或者“删除成功”等确定按钮的时候，如何做到该页面元素的自动刷新和之前弹窗的自动关闭。我也是一个MVC的初学者，这里，我用了一些小技巧来实现这样的形式。
首先来看VIEW层，刷新页面元素和自动关闭弹窗都是在这一层，用JS代码来控制的，详细见代码：
1 function Add() { //定义一个弹窗 2 var window = $('#AddRoleWindow').data('tWindow'); 3 window.ajaxRequest("/Role/AddRole/");//弹窗调用的方法 4 window.center().open(); //弹窗的打开 5 }
这里是一个添加角色的弹窗，弹窗内容视图为：
1 @using (Ajax.BeginForm("AddRole", "Role", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "Message", OnSuccess = "AddWindow()" })) 2 { 3 @Html.ValidationSummary(true) 4 <fieldset> 5 <legend>添加角色cshtml</legend> 6 <div id="Message" style="color:Red"></div> 7 8 <div class="editor-label"> 9 @Html.LabelFor(model => model.RoleParentID) 10 </div> 11 <div class="editor-field"> 12 @Html.EditorFor(model => model.RoleParentID) 13 @Html.ValidationMessageFor(model => model.RoleParentID) 14 </div> 15 16 <div class="editor-label"> 17 @Html.LabelFor(model => model.RoleName) 18 </div> 19 <div class="editor-field"> 20 @Html.EditorFor(model => model.RoleName) 21 @Html.ValidationMessageFor(model => model.RoleName) 22 </div> 23 24 <div class="editor-label"> 25 @Html.LabelFor(model => model.RoleFunctionNotes) 26 </div> 27 <div class="editor-field"> 28 @Html.EditorFor(model => model.RoleFunctionNotes) 29 @Html.ValidationMessageFor(model => model.RoleFunctionNotes) 30 </div> 31 32 <div class="editor-label"> 33 @Html.LabelFor(model => model.IsChildrenRole) 34 </div> 35 <div class="editor-field"> 36 @Html.EditorFor(model => model.IsChildrenRole) 37 @Html.ValidationMessageFor(model => model.IsChildrenRole) 38 </div> 39 40 <p> 41 <input type="submit" value="保 存" /> 42 </p> 43 </fieldset> 44 }
这里使用的Raror视图，如果不习惯的朋友可以使用aspx，只需要把@改为<% %>就行了，这里不多介绍。这个视图是用Ajax.BeginFor的方式来传递表单数据UpdateTargetId是指在指定区域内显示对对应数据，OnSuccess 是指执行成功后调用该方法。
看后台控制器代码：
1 [AcceptVerbs(HttpVerbs.Post)] //POST表单获取数据需要的 2 public ActionResult AddRole(string Roleid) 3 { 4 T_Role ads = new T_Role(); 5 Initialize(ads); 6 string res = "角色添加成功"; 7 RoleRepository rep = new RoleRepository(); 8 try 9 { 10 if (TryUpdateModel(ads)) 11 { 12 int roleid = db.T_Role.OrderByDescending(o=>o.RoleID).FirstOrDefault().RoleID;//倒叙查找最大ID 13 ads.RoleID = roleid + 1; 14 rep.Insert(ads); //将POST表单填写的数据加入到数据库中 15 } 16 } 17 catch 18 { 19 res = "角色添加失败"; 20 } 21 ViewData["ActionMessagesForAdd"] = res; 22 return PartialView("../Shared/ShowActionMessage");//这里返回的数据就是之前提到的UpdateTargetId显示的数据 23 }
接下来看JS代码，就是OnSuccess调用的方法了：
1 function AddWindow(ms) { //ms为之前提到的控制器后面返回的数据 2 var res = ms; 3 if (res != "" ) 4 alert(res); 5 else 6 alert("添加失败"); 7 $('#RoleTree').jstree('refresh', -1); 8 $('#AddRoleWindow').data('tWindow').close(); 9 }
注意了，代码的第7行，就是对页面中知道部分数据的刷新，这里是对知道的jstree进行刷新，如果是要刷新telerik，可以用：
1 var grid = $('#UsersGrid').data('tGrid'); //重新加载（UsersGrid是telerik的Name） 2 grid.rebind(); 3 autodisapear();
上面的第8行就是对指定弹窗的关闭操作了，就是一句JS代码。如有不懂得或者代码有问题的，欢迎探讨。
