弹窗关闭并刷新页面元素

我想,对于初学者来说,可能多多少少都会遇到这样的问题,比如我想对一个模块进行增、删、改操作,希望弄的炫一点,就用弹窗的形式,而不是基本的新页面形式。好,弹窗能实现了,但是当提交了数据点击“添加”或者“保存”或者“删除成功”等确定按钮的时候,如何做到该页面元素的自动刷新和之前弹窗的自动关闭。我也是一个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代码。如有不懂得或者代码有问题的,欢迎探讨。

 

posted @ 2013-07-26 00:40  真假不分  阅读(...)  评论(...编辑  收藏