MVC4下如何实现模态弹出对话框效果--对话框里可以实现翻页效果（1）

浏览数：21 / 时间：2015年06月09日

需求：MVC4下我想实现弹出对话框的效果，是模态的效果。在弹出对话框里不仅仅实现填充编辑框的效果。而是分页效果。这个功能我差不多花了一个星期的时间。其实我没有CSHARP开发过代码，而且对最新的技术都不了解了。因为没有基础的知识点支撑，没有好好的处理基础知识，所以绕了这么大的圈子。

英文水平有限，翻译可能不准确。非常好的一篇文章，支撑我的项目：http://www.codeproject.com/Articles/565513/How-to-series-about-MVC-jQuery-JSON-paging-mapRout《"How to series" about MVC, jQuery, JSON, paging, mapRoute》---当然这篇文章并没有实现在对话框下分页功能，但是里面丰富的知识点足以举一反三。

介绍：因为系统大量的数据，客户端工作非常重要，在ASP.NET典型的后置代码下，很自然的方法将很多的工作用ASP.NET组件放在后置代码中，然而，通过ASP.NET组件和可视降低性能。通过MVC可以知道以前的设计结果模式。在ASP.NET之前很流行。高执行性能。JQUERY和JSON。

背景：在想读懂或实现这些功能，需要了解的知识点：

MVC for beginners : http://www.w3schools.com/aspnet/mvc_intro.asp
jQuery for beginners : http://www.w3schools.com/jquery/default.asp
jSon for beginners : http://www.w3schools.com/json/default.asp

那篇文章提出知识点和实现效果，我这里就不赘述了。我原来实现的思路是想用 UPDATAPENL+AJAXTOOLKIT来实现的。确实我在ASP普通网站实现了弹出对话框分页的可能，而MVC下完全没有实现，所有的动作被控制器收了。就是不更新。

学习了jquery+AJAX,很快爱上了。不知道为什么，国内国外网站上面对弹出的对话框分页效果实现都没有案例，难道不需要，还是太简单的。对于我这个跳跃的学习的人来讲，完全没有必要。我不能理解。

别人的代码拿过来我们也是不说可以直接用的：

自己手动创建MVC4项目，我们需要如何移植代码呢？

1、MVC4里的_LAYOUT页面里，需要加入保证我们运行的JS。需要把别人的JS拷贝响应目录下

jquery-1.5.1.min.js

jquery-ui-1.8.11.min.js

moderizr-1.7.min.js

jquery.unobtrusive-ajax.js

jquery.validate.min.js

myjs.js

jquery.validate.unobtrusive.min.js

2、VIEW里找到需要增加弹出窗口的页面，可以选择HOME控制器里面Index页面，增加如下代码：

@Html.ActionLink("New","New",new{DataModuleId=0},new{@class="newLink"})

这个是弹出对话框的代码。

New:代表链接的文字。

New:控制器的动作。（我们的就在HOME的控制器里加一个就可以了）

DataModuleId：因为我做的是新建和编辑功能，他们可以共用一个窗体。所以我们用它传递0和1,0就是新建，1是编辑。

newlink:是下文JQUERY使用的类名。

3、下面我们增加JQuery代码，在Index里面加。可能新学的同学不知道在哪里加加什么，就需要了解MVC的相关知识。

<div id="saveDialog" title="Person Information"></div>

<script type="text/javascript">

    var linkObj;

    //.....

    $(document).ready(function () {

       //...

        $(‘#saveDialog‘).dialog({
            autoOpen: false,
            width: 400,
            resizable: false,
            modal: true,
            buttons: {
                "Save": function () {
                    $("#update-message").html(‘‘);
                    $("#savePersonForm").submit();
                },
                "Cancel": function () {
                    $(this).dialog("close");
                }
            }
        });

       //....

       setLinks();

    });

    // ....

    function setLinks()
    {

        $(".editLink, .newLink, uploadPicLink").unbind(‘click‘);

        $(".editLink, .newLink").click
        (
            function ()
            {
                linkObj = $(this);
                var dialogDiv = $(‘#saveDialog‘);
                var viewUrl = linkObj.attr(‘href‘);
                $.get(viewUrl, function (data)
                {
                    dialogDiv.html(data);
                    //validation
                    var $form = $("#savePersonForm");
                    $form.unbind();
                    $form.data("validator", null);
                    $.validator.unobtrusive.parse(document);
                    $form.validate($form.data("unobtrusiveValidation").options);

                    dialogDiv.dialog(‘open‘);
                });

                return false;

            }
        );

        //...

    } //end setLinks
</script>

4、创建控制器，控制器当然也是Home,在HOME里增加New动作。-这里的模型不一定是你要的模型

[HttpGet]
public ActionResult New(int personNo)
{

Person person= new Person();
person.BirthDate = DateTime.Today;
person.PersonNo = 0;

if (personNo > 0)
{
     person = Repository.GetPersonList().Where(c => c.PersonNo == personNo).FirstOrDefault();
}

return PartialView(person);

}
到这里可以实现了弹出对话框了。代码是加了，可是很多人会调不通，因为不懂基础原理。JQUERT有一点不对，都有可能调不通。