.net mvc ajax实例,MvcPager 分页示例 — Ajax动态加载

View：

@model PagedList

点此加载MvcPager和分页数据

@section scripts

{

$(function () {

$("#loadbtn").click(function () {

$("#articles").load(location.href);

$(this).hide();

});

});

}

_LoadByAjax.cshtml

@model PagedList

@{ Html.RenderPartial("_ArticleTable"); }

@Ajax.Pager(Model, new PagerOptions { PageIndexParameterName = "id", ContainerTagName = "ul", PrevPageText = "上页", NextPageText = "下页", FirstPageText = "首页", LastPageText = "尾页", CssClass = "pagination", CurrentPagerItemTemplate = "

{0}",DisabledPagerItemTemplate = " {0}",PagerItemTemplate = "{0}" }, new MvcAjaxOptions { UpdateTargetId = "articles" })

$(function () {

@{ Ajax.LoadMvcPagerScript(); }

});

_ArticleTable.cshtml:

@model PagedList

序号	@Html.DisplayNameFor(model => model.Title)	@Html.DisplayNameFor(model => model.PubDate)	@Html.DisplayNameFor(model => model.Author)	@Html.DisplayNameFor(model => model.Source)

@{ int i = 0;}

@foreach (var item in Model)

{

@(Model.StartItemIndex + i++)

@Html.DisplayFor(modelItem => item.Title)

@Html.DisplayFor(modelItem => item.PubDate)

@Html.DisplayFor(modelItem => item.Author)

@Html.DisplayFor(modelItem => item.Source)

}

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 LoadByAjax(int id = 1)

{

using (var db = new DataContext())

{

var model = db.Articles.OrderByDescending(a => a.PubDate).ToPagedList(id, 5);

if (Request.IsAjaxRequest())

{

return PartialView("_LoadByAjax", model);

}

return View();

}

}