MVC 3 基本操作列表分页查询

Mvc3中默认提供了一个WebGrid扩展方法，这个方法实现列表功能是非常的强大，但是的asp.net中的GridView一样，它的分页查询都是基于内存的，这样对服务器的性能影响就比较大，在网上也看到很实现分页的代码，但能运行起来的也是很有限，根据最近这段时间的学习，作一个学习笔记。

 

生成效果如下（使用了MVCPager）：

 

此分页是通过jquery异步调用生成的，下面来看看怎样达到这样的效果：

还是打开上次准备好的项目，引用MvcPager程序集，最好从网站上下载最新的代码自己编译，下载地址为“http://www.webdiyer.com/Controls/MvcPager/”，我当时就遇到过下载到的dll引用的MVC的版本和我本地的不一样，上面使用的MVCPager，我修改了一下输出的地址，如下所示：

 

调用了自定义的函数（“LoadMvcPage”），修改过程如下：

打开MvcPager中PageBuiler.cs文件，修改函数“GeneratePagerElement，GenerateAnchor”为如下内容：

private string GenerateAnchor(PagerItem item)
        {

            return GeneratePagerElement(item).ToHtmlString();
        }
private MvcHtmlString GeneratePagerElement(PagerItem item)
        {
            //pager item link
            string url = GenerateUrl(item.PageIndex);
            if (item.Disabled) //first,last,next or previous page
                return CreateWrappedPagerElement(item, String.Format("<a disabled=\"disabled\">{0}</a>", item.Text));
            return CreateWrappedPagerElement(item,
                                             string.IsNullOrEmpty(url)
                                                 ? _html.Encode(item.Text)
                                                 : String.Format("<a href=\"javascript:{2}('{0}');\">{1}</a>", url, item.Text,loadPageAction));
        }

 

修改HomeConroller下的List Action为如下内容：

 

[OutputCache(Duration = 0)]
        public ActionResult List(int? page)
        {
            int current = 1;
            if (page != null)
            {
                current = page.Value;
            }
            var manager = new NoteManager();
            Collection<Note> data = manager.GetAll();
            var list = new PagedList<Note>(data.Skip((current - 1) * 4).Take(4), current, 4, data.Count);
            return PartialView(list);
        }

 

修改Common.js文件内容为：

var Success = 0;
var AlertError = 2;
function DialogObject(dialogId, formId, addUrl, editUrl, saveUrl, ajaxPostFunction, loadSuccessCallBack) {
    this._dialogId = "#" + dialogId;
    this._formId = "#" + formId;
    this._saveUrl = saveUrl;
    this._addUrl = addUrl;
    this._editUrl = editUrl;
    this._ajaxPostFunction = ajaxPostFunction;
    this._loadSuccessCallBack = loadSuccessCallBack;
};

DialogObject.prototype.dialogLoad = function (width, height, modal) {
    $(this._dialogId).dialog({
        autoOpen: false, //对话框的是否自动打开
        width: width, //宽高
        height: height,
        modal: modal == undefined ? true : modal, //模态对话框
        buttons: {//自定义对话框的按钮信息
            "保存": this._ajaxPostFunction,
            "返回": this._closedialog()
        }
    });
};
DialogObject.prototype.loadEdit = function (id) {

    $(this._dialogId).html("")
        .dialog("option", "title", "编辑")
        .load(this._editUrl + "/" + id, this._openDialog());

};
DialogObject.prototype.loadAdd = function () {
    $(this._dialogId).html("")
            .dialog("option", "title", "新增")
            .load(this._addUrl, this._openDialog());
};
DialogObject.prototype._openDialog = function () {
    return new Function("$('" + this._dialogId + "').dialog('open');");
};
DialogObject.prototype._closedialog = function () {
    return new Function("$('" + this._dialogId + "').dialog('close');");
};

DialogObject.prototype.checkFormData = function () {
    var b = $(this._formId);
    b.submit();
    if (b.validate().numberOfInvalids() > 0) {
        return false;
    }

    return true;
};

DialogObject.prototype.defaultAjaxPostFunction = function () {
    if (!this.checkFormData()) {
        return;
    }
    this._postFunction($(this._formId).serialize(), function (dlgObject, formObject, data, dlg) {
        if (data.Success == true) {
            dlgObject.dialog("close");
            if (dlg._loadSuccessCallBack != null) {
                dlg._loadSuccessCallBack();
            }
        }
//        else if (data.Success == AlertError) {
//            alert(data.data);
//        }
//        else {
//            formObject.html(data.data);
//        }
    }, this);
};
DialogObject.prototype.postFunction = function (formData, successCallback) {
    this._postFunction(formData, successCallback, this);
};

DialogObject.prototype._postFunction = function (formData, successCallback, dlg) {
    $.post(dlg._saveUrl,
                formData,
                function (data, textStatus) {
                    switch (textStatus) {
                        case
                                "timeout":
                            break;
                        case "error":
                            break;
                        case "notmodified":
                            break;
                        case "success":
                            successCallback($(dlg._dialogId), $(dlg._formId), data, dlg);
                            break;
                        case "parsererror":
                            break;
                        default:
                            break;
                    }

                });

};

 

修改List视图为如下内容：

@using Webdiyer.WebControls.Mvc
@model PagedList<MvcSample.Models.Note>
       <ul class="NotesList">
       @foreach (var note in Model)
       {
            <li>        @note.Title <br />        @note.Body <br />
        <span class="EditLink" noteid="@note.Id">Edit</span>
        </li>
       }
       </ul>

       <br />
@*分页控件显示的地方一定要放在刷新的div里面，不然会出现双重控件*@
<div style="text-align:right;">
@Html.AjaxPager(Model, new PagerOptions()
{ PageIndexParameterName = "page", ShowDisabledPagerItems = true,
    AlwaysShowFirstLastPageNumber = true, CssClass = "pages" },
        new AjaxOptions { UpdateTargetId = "NoteListBlock" })</div>

 

修改Index视图为如下内容：

@{
    ViewBag.Title = "Home Page";
}
<h2>
    Notes</h2>
<div id="NoteListBlock">
</div>
<span class="AddLink">Add New Note</span>
<div id="NoteDialog" title="" class="Hidden">
</div>
<script src="@Url.Content("~/Scripts/Common.js?verion=1")" type="text/javascript"></script>   <script type="text/javascript">     var noteDialog = new DialogObject("NoteDialog", "NoteForm", "/Home/Create", "/Home/Edit", "/Home/Save", ajaxPostFunctionModel, LoadList);     $(function() {         noteDialog.dialogLoad(440,330);         $(".EditLink").live("click", function () {             var id = $(this).attr("noteid");             noteDialog.loadEdit(id);         });         $(".AddLink").click(function () {             noteDialog.loadAdd();         });           LoadList();     });     function ajaxPostFunctionModel() {         noteDialog.defaultAjaxPostFunction();     }          function LoadList() {         LoadMvcPage("/Home/List");     }       function AddRecord() {         noteDialog.loadAdd();         return false;     }       function LoadMvcPage(url) {         $("#NoteListBlock").load(url);     }</script>

 

到此所有的修改完成，如果完全按照上面的做，就能看页面开始图片的效果。