弹窗关闭并刷新页面元素

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