一个简单的数据弹框更改功能

　　项目中因为某个页面的数据太多，容易使页面看起来比较杂乱，所以我们分成了A、B、C等的各个小块来显示，不过这样的数据显示修改起来是很麻烦的，需要将整个页面的数据

传回服务器，比较浪费资源。顺理成章的我们想到了对每一个小块进行分别编辑，比如点击A小块，A小块的内容弹出编辑对话框，编辑完后保存，对话框消失，然后在编辑B小块。

效果图如下：

　　

　　说起来很容易，做起来并不简单，下面我们一起来看看怎么实现吧！

　　<1>我自己构造了三张表(Person、School、Company)，插入一条简单的数据作为测试。

　　<2>我构建了一个VM_Person来获取所有的Person数据传递到页面，分Person、School、Company三大块显示。

　　<3>每一小块构建两个PartialView，一个用来显示，一个用来编辑。然后把这几块组合到一个页面中。这里注意我将<input type="button" id="PersonEdit"

value="Edit">放在了PartialView的外面，如果将按钮放在PartialView里面的话，第一次编辑操作之后这个按钮就不工作了。(这里可以将button放到partialview里面去，但同时将下面要讲到的弹出对话框的相关代码都放到partialview里面就可以了，我做项目的时候因为对话框太多，并没有即使的将各个对话框对应的JQuery代码放到相应的partialview里，才出现了编辑按钮只工作一次的情况。2013-4-25 1:40分改)

@model DialogOperate.Models.VM_Person

@{
    ViewBag.Title = "Details";
}

<table style="width:100%;">
    <tr>
        <td>
            <fieldset>
                <legend>Person</legend>
                    @{Html.RenderPartial("_D_Person", Model);}
                    <input  type="button" id="PersonEdit" value="Edit"/>
                </fieldset>
        </td>
    </tr>
    <tr>
        <td>
            <fieldset>
                <legend>Company</legend>
                    @{Html.RenderPartial("_D_Company", Model);}
                </fieldset>
        </td>
    </tr>
    <tr>
        <td>
            <fieldset>
                <legend>School</legend>
                    @{Html.RenderPartial("_D_School", Model);}
                </fieldset>
        </td>
    </tr>
</table>

@{Html.RenderPartial("_E_Person", Model);}
@{Html.RenderPartial("_E_Company", Model);}
@{Html.RenderPartial("_E_School", Model);}

 

　　

　　<4>下来我们需要做出简单的弹框效果

　　　　 首先添加要引用的js文件　　　　 

　　<!--Jquery 皮肤-->
    <link href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
    <!--Jquery 1.7.2-->
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js" type="text/javascript"></script>
    <!--Jquery UI 1.10.2-->
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js" type="text/javascript"></script>　　　　

　　　　 我们先把下面的三个编辑框变成对话框，让他们隐藏，然后在点击Edit的时候，弹出显示框对于的对话框。　　　　

    //Person
    //将Person的编辑框变成对话框，隐藏
    $("#PersonEditTable").dialog({
        autoOpen: false,
        height: 500,
        width: 550,
        modal: true,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        }
    });
    //点击编辑 弹出 对话框
    $("#PersonEdit").click(function () {
        $("#PersonEditTable").dialog("open");
    });

　　　<5>现在弹框效果已经有了，然后我们需要做的是在我们保持修改的数据的时候，异步刷新被修改的对话框对应的显示框。这里用到了MVC中的AJAX帮助方法。

　　　　  首先要添加一个js文件，这个在生成MVC项目的时候都会被加载进来。只有添加了这个，我们在使用AJAX的时候在能起作用。　　　　  

　　　　<script src="@Url.Content("~/Scripts/jquery.unobtrusive-ajax.min.js")"></script>

　　　      以Person为例。现在我们需要对_D_Person(View)进行一下修改，代码即注释如下：这里要注意的是<div id="PersonEditTable">这里的id是我们要弹出的对话框的

id，我们要保证Ajax代码在这个div内部，代码才能工作。如果将id添加到table上，Ajax代码就不工作了。　　　　  　　　　 

<div id="PersonEditTable">
    <!--PersonModify        actionName-->
    <!--new{id=Model.Id}    避免每个页面都要添加一个 hideInput来存id，这里将id作为参数传给对于的action-->
    <!--UpdateTargetId      异步操作要更新的目标Id，这里用的是_D_Person的Table的Id，更新他的显示数据-->
    @using (Ajax.BeginForm("PersonModify", new { id = Model.Id }, new AjaxOptions
    {            
             UpdateTargetId = "PersonDisplayTable"        
    }))
    {
    <table  title="Person">
       ..........
    </table>
    }
</div>

　　　　　然后去controller里添加我们的 PersonModify Action(Controller)　　　　　

public ActionResult PersonModify(VM_Person person,int id)
        { 
            //这里是对象修改的代码，不同的地方可能不太一样，你的项目和我的可能不同，所以不多做讲解
            Person p=new Person{
                Id=id,
                Name=person.Name,
                Age =person.Age,
                Country =person.Country,
                Phone  =person.Phone
            };
            db.Entry(p).State = EntityState.Modified;
            db.SaveChanges();

            //这里的return是重点，我们return了一个PartialView，model的类型是VM_Person，这里的model就是我们要修改的数据的实例，这样_D_Person就接受到了我们改变的数据了
            //这里存在一个问题，就是数据在数据库的修改 和 更改后的数据的显示 分开了，这就可能出现 即使没修改成功，显示的数据也会改变的情况，这个后面有解决办法。
            return PartialView("_D_Person",person);
        }

　　　　   下面我们来说一下关于数据验证的问题，其实也并不复杂，我们需要在我们的VM_Person上添加我们的验证信息，然后再在页面上做验证就好了。注意这里是在

VM_Person而不是Person。这里的添加要和数据库对应。

　　　　   首先添加两个script，不知道为什么加这两个，但是不加不工作。　　　　　

　　<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js" type="text/javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js" type="text/javascript"></script>

　　　　   我们为Name添加一个特性　　　　

 　　　　[StringLength(10)]
        public string Name { get; set; }

　　　　　　在页面_E_Person上添加验证：　　　　　　

　　　　@Html.ValidationMessageFor(x=>Model.Name)

　　　　　　效果如下：这样用户的数据不通过验证的话，是没办法提交的。　　　　

　　　最后我们在为Ajax.BeginForm方法的AjaxOptions添加OnSuccess事件，让成功修改数据之后，对话框关闭就OK了。操作方法如下：　　 　

OnSuccess="success"  
.........
<script>
    function success()
    {
        $("#PersonEditTable").dialog("close");
    }
</script>