弹窗关闭并刷新页面元素

我想，对于初学者来说，可能多多少少都会遇到这样的问题，比如我想对一个模块进行增、删、改操作，希望弄的炫一点，就用弹窗的形式，而不是基本的新页面形式。好，弹窗能实现了，但是当提交了数据点击“添加”或者“保存”或者“删除成功”等确定按钮的时候，如何做到该页面元素的自动刷新和之前弹窗的自动关闭。我也是一个MVC的初学者，这里，我用了一些小技巧来实现这样的形式。

首先来看VIEW层，刷新页面元素和自动关闭弹窗都是在这一层，用JS代码来控制的，详细见代码：

function Add() {   //定义一个弹窗
var window = $('#AddRoleWindow').data('tWindow');
window.ajaxRequest("/Role/AddRole/");//弹窗调用的方法
window.center().open();  //弹窗的打开
}

这里是一个添加角色的弹窗，弹窗内容视图为：

@using (Ajax.BeginForm("AddRole", "Role", new AjaxOptions { HttpMethod = "POST", UpdateTargetId = "Message", OnSuccess = "AddWindow()" }))
{
@Html.ValidationSummary(true)
<fieldset>
<legend>添加角色cshtml</legend>
<div id="Message" style="color:Red"></div>

<div class="editor-label">
@Html.LabelFor(model => model.RoleParentID)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.RoleParentID)
@Html.ValidationMessageFor(model => model.RoleParentID)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.RoleName)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.RoleName)
@Html.ValidationMessageFor(model => model.RoleName)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.RoleFunctionNotes)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.RoleFunctionNotes)
@Html.ValidationMessageFor(model => model.RoleFunctionNotes)
</div>

<div class="editor-label">
@Html.LabelFor(model => model.IsChildrenRole)
</div>
<div class="editor-field">
@Html.EditorFor(model => model.IsChildrenRole)
@Html.ValidationMessageFor(model => model.IsChildrenRole)
</div>

<p>
<input type="submit" value="保 存"  />
</p>
</fieldset>
}

这里使用的Raror视图，如果不习惯的朋友可以使用aspx，只需要把@改为<% %>就行了，这里不多介绍。这个视图是用Ajax.BeginFor的方式来传递表单数据UpdateTargetId是指在指定区域内显示对对应数据，OnSuccess 是指执行成功后调用该方法。

看后台控制器代码：

[AcceptVerbs(HttpVerbs.Post)] //POST表单获取数据需要的
public ActionResult AddRole(string Roleid)
{
T_Role ads = new T_Role();
Initialize(ads);
string res = "角色添加成功";
RoleRepository rep = new RoleRepository();
try
{
if (TryUpdateModel(ads))
{
int roleid = db.T_Role.OrderByDescending(o=>o.RoleID).FirstOrDefault().RoleID;//倒叙查找最大ID
ads.RoleID = roleid + 1;
rep.Insert(ads);  //将POST表单填写的数据加入到数据库中
}
}
catch
{
res = "角色添加失败";
}
ViewData["ActionMessagesForAdd"] = res;
return PartialView("../Shared/ShowActionMessage");//这里返回的数据就是之前提到的UpdateTargetId显示的数据
}

接下来看JS代码，就是OnSuccess调用的方法了：

function AddWindow(ms) {  //ms为之前提到的控制器后面返回的数据
var res = ms;
if (res != "" )
alert(res);
else
alert("添加失败");
$('#RoleTree').jstree('refresh', -1);
$('#AddRoleWindow').data('tWindow').close();
}

注意了，代码的第7行，就是对页面中知道部分数据的刷新，这里是对知道的jstree进行刷新，如果是要刷新telerik，可以用：

var grid = $('#UsersGrid').data('tGrid'); //重新加载（UsersGrid是telerik的Name）
grid.rebind();
autodisapear();

上面的第8行就是对指定弹窗的关闭操作了，就是一句JS代码。如有不懂得或者代码有问题的，欢迎探讨。