[转载]ASP.NET MVC3 Webgrid Ajax查询条件绑定(Search Conditions Binding)、自动编号(Serial Number)及分页(Paging)的样式定义

[转载][原创] MVC3 Webgrid Ajax查询条件绑定(Search Conditions Binding)、自动编号(Serial Number)及分页(Paging)的样式定义 – 大熊的空间 – 博客园.

[原创] MVC3 Webgrid Ajax查询条件绑定(Search Conditions Binding)、自动编号(Serial Number)及分页(Paging)的样式定义

本文只代表作者在一定阶段的认识与理解。

一.写作前提

在MVC3 Bate version的时候小试了一把Webgrid ,并写了篇记录文章《[原创] MVC3 Web.Helpers – WebGrid Ajax 及查询绑定》,这篇文章在对webgrid一定阶段认识的条件下完成的,本文将就一些功能再加入说明,并把自动 编号及Paging CSS的实现加以说明,同时也希望能给更多人带来方便。

二.本文内容

  1. JQuery Ajax实现Webgrid查询条件的绑定(Search Conditions Binding),并将Webgrid公用化
  2. Webgrid自动编号(serial number)的实现
  3. Webgrid paging style的定义

三.Webgrid Ajax查询条件绑定及Webgrid公用化

注:需要加载JQuery的Script的文件,具体请参考《[原创] MVC3 Web.Helpers – WebGrid Ajax 及查询绑定》。

实现查询条件和webgrid绑定其实是通过把查询条件以Routing 的形式来传递,使生成webgrid的sorting及paging的请求路径中同样包含首次生成webgrid时候的查询条件,从而使webgrid可 以保持查询条件的前提下做paging和sorting的操作,请看现面的例子。

Search Page

1 @{ 2 View.Title = "Index"; 3 Layout = "~/Views/Shared/_Layout.cshtml"; 4 } 5  <script> 6 $(function () { 7 $("#btnSearchStudent").click(function (e) { 8 e.preventDefault(); 9 var url = "?studentName=" + $("#StudentName").val() + 10 "&studentChineseName=" + $("#StudentChineseName").val(); 11 url = "@ViewData["AppPath"]/Home/SearchStudent/" + url; 12 $('#searchformDiv').load(url, function (html) 13 { $('#searchformDiv')[0].value = html; }); 14 }); 15 }); 16  </script> 17 Student Name: @Html.TextBox("StudentName") 18  <br /> 19 Student Chinese Name : @Html.TextBox("StudentChineseName") 20  <br /> 21  <input type="button" value="Search" id="btnSearchStudent" /> 22  <div id="searchformDiv"> 23  </div>

在上面的razor代码中,有两个查询条件Student Name和 Student Chinese Name,当我们点击Search Button的时,调用JQuery的Ajax Request方法,并把结果返回到指定的Div标签中。小提一下,本来也像很多一样疯狂的喜爱razor的coding方式,使得代码相当简单。下面是 Action的实现代码。

Controller

1 namespace TOM.Custom.Controllers 2 { 3 [HandleErrors] 4 public class HomeController : BaseController 5 { 6 private IStudent _s; 7 8 public HomeController() 9 { 10 this._s = PolicyFactory.Create(); 11 } 12 13 public ActionResult Index() 14 { 15 this.ViewData.Model = this._s.SearchStudent(string.Empty, string.Empty); 16 return View("SearchStudent"); 17 } 18 19 public PartialViewResult SearchStudent(string studentName, string studentChineseName) 20 { 21 IDictionary showColumns = new Dictionary(); 22 23 this.ViewData.Model = this._s.SearchStudent(studentName, studentChineseName); 24 25 showColumns.Add("Student ID", "StudentID"); 26 showColumns.Add("Student Name", "StudentName"); 27 showColumns.Add("Student Code", "StudentCode"); 28 showColumns.Add("Sex", "Sex"); 29 showColumns.Add("NRIC/Passport No.", "NRICPassport"); 30 31 this.ViewModel.ShowColumns = showColumns; 32 return PartialView("UC/WebgridTemplate", this.ViewData.Model); 33 } 34 } 35 }

Action中,根据UI传递的参数进行查询,并返回一个PartialViewResult,然后把这个PartialView返回给 UI的div。在我的例子中这个PartialView返回的就是一个经过定制化的webgrid, 在上面的Action中,我们把查询结果以Model的形式返回,并且用变量“showColumns”列出了要显示的列名称及 绑定的字段,所以我们的webgrid现在只要显示指定结果中的指定字段即可。换言之,如果其它action中也有一个查询结果,并指定绑定,那么他就可 以使用这个webgrid的PartialView。OK,我们来看看这个PartialView如何实现webgrid的公用化。

PartialView Webgrid

1 @{ 2 var grid = new WebGrid(source: Model, canPage: true, 3 canSort: true, ajaxUpdateContainerId: "DivGridd", rowsPerPage: 20); 4 5 IList webGridcolumns = new List(); 6 IDictionary showColumns = ViewData["ShowColumns"] as IDictionary; 7 8 if (showColumns.Count &gt; 0) 9 { 10 foreach (string col in showColumns.Keys) 11 { 12 webGridcolumns.Add(grid.Column(showColumns[col], col)); 13 } 14 } 15  <div id="DivGridd"> 16  <div class="content-box"> @grid.GetHtml( 17 caption: "Search Result:", 18 mode: WebGridPagerModes.All, 19 numericLinksCount: 10, 20 fillEmptyRows: true, 21 emptyRowCellValue: " ", 22 columns: webGridcolumns 23 ) 24 <div class="webgrid-totalRow"> Total Result: @grid.TotalRowCount</div> 25 </div> 26 </div> 27 }

查询结果图

下面是webgrid生成的jQuery ajax paging 代码,我们可以看到,它会把查询条件以Routing的形式进行传递,从而保证可以在查询结果中进行paging.

代码图

四.Webgrid自动编号

在传统的gridview中可以很方便的进行自动 编号,但是似乎webgrid并没有给我们直接实现这个功能,那我们只能通过变通的方法来实现了。在生成Webgrid的column时,它提供了一个 format的方法,允许我们定制、填充这个column,在本例中,就是通过page size乘page number作为编号的开始,每一行加1,这样我们就可以实现自动编号了,我们修改上面的PartialView如下所示。

PartialView Webgrid

1@{ 2 var grid = new WebGrid(source: Model, canPage: true, 3 canSort: true, ajaxUpdateContainerId: "DivGridd", rowsPerPage: 20); 4 var i = grid.RowsPerPage * grid.PageIndex; 5 6 IList webGridcolumns = new List(); 7 IDictionary showColumns = ViewData["ShowColumns"] as IDictionary; 8 9 webGridcolumns.Add(grid.Column(format: (item) =&gt; (++i).ToString(), header: "S/N")); 10 11 if (showColumns.Count &gt; 0) 12 { 13 foreach (string col in showColumns.Keys) 14 { 15 webGridcolumns.Add(grid.Column(showColumns[col], col)); 16 } 17 } 18 19@grid.GetHtml( 20<div id="DivGridd"> 21<div class="content-box"> caption: "Search Result:", 22 mode: WebGridPagerModes.All, 23 firstText: "« First", 24 previousText: "« Previous", 25 nextText: "Next »", 26 lastText: "Last »", 27 numericLinksCount: 10, 28 fillEmptyRows: true, 29 emptyRowCellValue: " ", 30 columns: webGridcolumns 31 ) 32<div class="webgrid-totalRow"> Total Result: @grid.TotalRowCount</div> 33</div> 34</div> 35}

在上面的代码中var i = grid.RowsPerPage * grid.PageIndex;每行显示行数乘页数=当前页行号开始
webGridcolumns.Add(grid.Column(format: (item) => (++i).ToString(), header: “S/N”));
在创建每一行的时候,webgrid会以++i的值作为S/N列显示的值

五.Paging Style的定义

上面的Style相信大家看了都不太喜欢吧,好吧,那我们就来修改修改。我们在partralview的GetHtml的方法中,加了下面三个属性:

tableStyle: “webgrid-table”,

headerStyle: “webgrid-header”,

footerStyle: “paging-number”,

实现如下效果:

分页图

CSS如下:

CSS

1.webgrid-table 2{ 3 width: 100%; 4 height: 100%; 5 padding: 5px 5px 5px 5px; 6} 7 8.webgrid-table caption 9{ 10 text-align: left; 11 vertical-align: middle; 12 padding: 0px 0px 0px 5px; 13 font-size: medium; 14 font-weight: bold; 15} 16 17.webgrid-header 18{ 19 text-align: left; 20 vertical-align: middle; 21} 22 23.webgrid-totalRow 24{ 25 font-weight: bold; 26} 27 28.paging-number 29{ 30 text-align: left; 31 padding: 20px 0 5px 0; 32 font-family: Verdana, Arial, Helvetica, sans-serif; 33 font-size: 10px; 34 border-width: 1px; 35} 36 37.paging-number a 38{ 39 margin: 0 5px 0 0; 40 padding: 3px 6px; 41 border: 1px solid #ddd; 42 -moz-border-radius: 5px; 43 -khtml-border-radius: 5px; 44 -webkit-border-radius: 5px; 45 border-radius: 5px; 46}

六.总结
通过本章的学习,可以了解如下内容:

1.MVC3 中Webgrid Ajax Paging的操作

2.Webgrid中属性的使用

3.Webgrid中Paging Style的设置

赞(0) 打赏
分享到: 更多 (0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏