Fork me on GitHub

MvcPager 分页示例 — Ajax事件

本示例演示Ajax分页时如何处理Ajax事件。

Ajax事件有onbegin、onsuccess、onfailure和oncomplete。若在onbegin事件处理函数中返回false,则Ajax请求将被取消,后续的onsuccess、onfailure和oncomplete事件都不会被触发。 点击第二页将在服务器端返回500错误,因此会引发Ajax的onfailure事件。

序号 文章标题 作者 文章来源
21 吴起:现代农业蓬勃发展 Webdiyer 吴起热线
22 吴起打造“绿色革命”圣地 Webdiyer 吴起热线
23 吴华路二级公路施工期间实行交通管制的通告 Webdiyer 吴起热线
24 吴起县:加快发展旅游业 打造经济发展新引擎 杨涛 吴起政府网
25 吴起将举办四国男篮赛 国奥男篮“牵手”残疾儿童 Webdiyer 吴起热线
首页 上页 1 2 3 4 5 6 7 8 9 10 ... 下页 尾页 

View:

@model PagedList<article>
<div id="articles">
    @Html.Partial("_AjaxEvents",Model)
</div>
@section scripts
{
    @{Html.RegisterMvcPagerScriptResource();}
        <script type="text/javascript">
    function handleFailure(xhr, status, error) {
        alert('onfailure事件引发,返回的错误信息是:' + xhr.responseText + ',错误代码:' + xhr.status + ',状态代码:' + status + ',错误类型:' + error);
    }

    function handleSuccess(data, xhr, status) {
        alert('onsuccess事件引发,返回的数据如下:' + data + '\r\n返回的 http请求代码:' + xhr.status + ',状态代码:' + status);
    }
    </script>
}

_AjaxEvents.cshtml:

@model PagedList<article>
@Html.Partial("_ArticleTable", Model)
@Ajax.Pager(Model,new PagerOptions{PageIndexParameterName = "id",PagerItemTemplate = "{0}&nbsp;"},new MvcAjaxOptions{UpdateTargetId = "articles",OnBegin = "alert('onbegin事件引发')",OnSuccess = "handleSuccess",OnComplete = "function(xhr,status){alert('oncomplete事件引发,Http响应代码:'+xhr.status+',响应内容:'+xhr.statusText+',状态代码:'+status)}",OnFailure = "handleFailure"})

_ArticleTable.cshtml:

@model PagedList<Article>
<table class="table table-bordered table-striped">
    <tr>
        <th class="nowrap">序号</th>
        <th>
            @Html.DisplayNameFor(model => model.Title)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PubDate)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Author)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Source)
        </th>
    </tr>
    @{ int i = 0;}
    @foreach (var item in Model)
    {
        <tr>
            <td>@(Model.StartItemIndex + i++)</td>
            <td>
                @Html.DisplayFor(modelItem => item.Title)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.PubDate)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Author)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Source)
            </td>
        </tr>
    }
</table>

Model:

    public class Article
    {
        [Display(Name="文章编号")]
        public int ID { get; set; }
        [Display(Name="文章标题")]
        [MaxLength(200)]
        public string Title { get; set; }
        [Display(Name = "文章内容")]
        public string Content { get; set; }
        [Display(Name = "发布日期")]
        public DateTime PubDate { get; set; }
        [Display(Name = "作者")]
        [MaxLength(20)]
        public string Author { get; set; }
        [Display(Name = "文章来源")]
        [MaxLength(20)]
        public string Source { get; set; }
    }

Controller:

        
        public ActionResult AjaxEvents(int id = 1)
        {
            using (var db = new DataContext())
            {
                if (id == 2)
                {
                    Response.StatusCode = 500;
                    return Content("测试用的服务器端错误信息");
                }
                //throw new ApplicationException("测试用的服务器端错误信息");
                var model = db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(id, 5);
                if (Request.IsAjaxRequest())
                    return PartialView("_AjaxEvents", model);
                return View(model);
            }
        }