Fork me on GitHub

MvcPager 分页示例 — Ajax正在加载效果

该示例演示如何通过设置MvcAjaxOptions的LoadingElementId属性和使用OnBegin及OnComplate等Ajax事件处理程序来实现Ajax加载数据时的特效。

在获取分页数据比较耗时的情况下(如调用外部Web Service、数据库数据量太大或缺少优化以及网络延迟等原因),Ajax分页时,可以添加进度条或正在加载动画来增进用户体验。

序号 文章标题 作者 文章来源
1 吴起热线微信公众号上线 Webdiyer 吴起热线
2 再到吴起观“绿海” Webdiyer 吴起热线
3 吴起:从贫困县到全国百强 Webdiyer 吴起热线
4 吴起县铁边城入围全省31个文化旅游名镇 Webdiyer 吴起热线
5 吴起特色养殖成农民致富首选 Webdiyer 吴起政府网
首页 上页 1 2 3 4 5 6 7 8 9 10 ... 下页 尾页 

View:

@model PagedList<article>
<div id="loadingDiv" style="display:none"><img src="/Images/loading.gif" /><h3>正在加载数据,请稍候...</h3></div>
<div id="articles">
    @Html.Partial("_AjaxLoading",Model)
</div>
@section Scripts{@{Html.RegisterMvcPagerScriptResource();}}

_AjaxLoading.cshtml:

@model PagedList<article>
@Html.Partial("_ArticleTable", Model)
@Ajax.Pager(Model,new PagerOptions{PageIndexParameterName = "id"},new MvcAjaxOptions{UpdateTargetId = "articles",LoadingElementId = "loadingDiv",OnBegin="$('#articles').fadeOut('slow')",OnComplete="$('#articles').fadeIn('slow')"})

_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 AjaxLoading(int id = 1)
        {
            using (var db = new DataContext())
            {
                var model = db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(id, 5);
                if (Request.IsAjaxRequest())
                {
                    System.Threading.Thread.Sleep(2000);
                    return PartialView("_AjaxLoading", model);
                }
                return View(model);
            }
        }