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

======================================================
注：本文源代码点此下载
======================================================

[原创] mvc3 webgrid ajax查询条件绑定(search conditions binding)、自动编号(serial number)及分页(paging)的样式定义

your browser does not support iframes.

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

一.写作前提

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

二.本文内容

jquery ajax实现webgrid查询条件的绑定(search conditions binding),并将webgrid公用化

webgrid自动编号(serial number)的实现

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 @{

2view.title = "index";

3layout = "~/views/shared/_layout.cshtml";

4 }

5script>

6$(function () {

7$("#btnsearchstudent").click(function (e) {

8e.preventdefault();

9var url = "?studentname=" + $("#studentname").val() +

10"&studentchinesename=" + $("#studentchinesename").val();

11url = "@viewdata["apppath"]/home/searchstudent/" + url;

12$('#searchformdiv').load(url, function (html)

13{ $('#searchformdiv')[0].value = html; });

14});

15});

16script>

17 student name: @html.textbox("studentname")

18br />

19 student chinese name : @html.textbox("studentchinesename")

20br />

21input type="button" value="search" id="btnsearchstudent" />

22div id="searchformdiv">

23div>

在上面的razor代码中,有两个查询条件student name和 student chinese name,当我们点击search button的时,调用jquery的ajax request方法,并把结果返回到指定的div标签中。小提一下,本来也像很多一样疯狂的喜爱razor的coding方式,使得代码相当简单。下面是action的实现代码。

controller

1 namespace tom.custom.controllers

2 {

3[handleerrors]

4public class homecontroller : basecontroller

5{

6private istudent _s;

7

8public homecontroller()

9{

10this._s = policyfactory.create();

11}

12

13public actionresult index()

14{

15this.viewdata.model = this._s.searchstudent(string.empty, string.empty);

16return view("searchstudent");

17}

18

19public partialviewresult searchstudent(string studentname, string studentchinesename)

20{

21idictionary showcolumns = new dictionary();

22

23this.viewdata.model = this._s.searchstudent(studentname, studentchinesename);

24

25showcolumns.add("student id", "studentid");

26showcolumns.add("student name", "studentname");

27showcolumns.add("student code", "studentcode");

28showcolumns.add("sex", "sex");

29showcolumns.add("nric/passport no.", "nricpassport");

30

31this.viewmodel.showcolumns = showcolumns;

32return 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 @{

2var grid = new webgrid(source: model, canpage: true,

3cansort: true, ajaxupdatecontainerid: "divgridd", rowsperpage: 20);

4

5ilist webgridcolumns = new list();

6idictionary showcolumns = viewdata["showcolumns"] as idictionary;

7

8if (showcolumns.count > 0)

9{

10foreach (string col in showcolumns.keys)

11{

12webgridcolumns.add(grid.column(showcolumns[col], col));

13}

14}

15div id="divgridd">

16div class="content-box">@grid.gethtml(

17caption: "search result:",

18mode: webgridpagermodes.all,

19numericlinkscount: 10,

20fillemptyrows: true,

21emptyrowcellvalue: " ",

22columns: webgridcolumns

23)

24 div class="webgrid-totalrow">total result: @grid.totalrowcountdiv>

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@{

2var grid = new webgrid(source: model, canpage: true,

3cansort: true, ajaxupdatecontainerid: "divgridd", rowsperpage: 20);

4var i = grid.rowsperpage * grid.pageindex;

5

6ilist webgridcolumns = new list();

7idictionary showcolumns = viewdata["showcolumns"] as idictionary;

8

9webgridcolumns.add(grid.column(format: (item) => (++i).tostring(), header: "s/n"));

10

11if (showcolumns.count > 0)

12{

13foreach (string col in showcolumns.keys)

14{

15webgridcolumns.add(grid.column(showcolumns[col], col));

16}

17}

18

[email protected](

20div id="divgridd">

21div class="content-box">caption: "search result:",

22mode: webgridpagermodes.all,

23firsttext: "« first",

24previoustext: "« previous",

25nexttext: "next »",

26lasttext: "last »",

27numericlinkscount: 10,

28fillemptyrows: true,

29emptyrowcellvalue: " ",

30columns: webgridcolumns

31)

32div class="webgrid-totalrow">total result: @grid.totalrowcountdiv>

33div>

34div>

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{

3width: 100%;

4height: 100%;

5padding: 5px 5px 5px 5px;

6}

7

8.webgrid-table caption

9{

10text-align: left;

11vertical-align: middle;

12padding: 0px 0px 0px 5px;

13font-size: medium;

14font-weight: bold;

15}

16

17.webgrid-header

18{

19text-align: left;

20vertical-align: middle;

21}

22

23.webgrid-totalrow

24{

25font-weight: bold;

26}

27

28.paging-number

29{

30text-align: left;

31padding: 20px 0 5px 0;

32font-family: verdana, arial, helvetica, sans-serif;

33font-size: 10px;

34border-width: 1px;

35}

36

37.paging-number a

38{

39margin: 0 5px 0 0;

40padding: 3px 6px;

41border: 1px solid #ddd;

42-moz-border-radius: 5px;

43-khtml-border-radius: 5px;

44-webkit-border-radius: 5px;

45border-radius: 5px;

46}

六.总结

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

1.mvc3 中webgrid ajax paging的操作

2.webgrid中属性的使用

3.webgrid中paging style的设置

标签: asp.net mvc webgrid, webgrid aaja, webgrid paging, webgrid sorting, webgrid search condition

绿色通道:好文要顶关注我收藏该文与我联系

posted @ 2010-12-23 19:24 我-大熊 阅读(2073) 评论(7)编辑 收藏

发表评论

2257147

回复 引用 查看

#1楼 2010-12-23 19:48 chenyulie

学习下!

回复 引用 查看

#2楼 2010-12-24 14:29 webaspx

嗯,功能是不错,不过分页的话数据是一次性拉出来的,数据量大的话性能不太好。

回复 引用 查看

#3楼[楼主] 2010-12-24 16:02 我-大熊

引用webaspx:嗯,功能是不错,不过分页的话数据是一次性拉出来的,数据量大的话性能不太好。

其实你可以通过传入的参数进行分页,然后返回

回复 引用 查看

#4楼 2011-02-21 19:42 lvquanming

@viewdata["apppath"],apppath是什么意思,没有看到它的定义啊

回复 引用 查看

#5楼 2011-07-17 18:44 cdboy

自动编号还是不错

回复 引用 查看

#6楼 2011-08-24 11:44 老干部灰太狼

ilist webgridcolumns = new list();在@grid.gethtml(...)是报错cannot convert from 'system.collections.ilist' to 'system.collections.generic.ienumerable';

controller中this.viewmodel.showcolumns = showcolumns;找不到viewmodel;

新手,请指教

回复 引用 查看

#7楼 2011-11-30 10:33 腾飞刘

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

请问这是如何实现的?

另外如何排序?

刷新评论列表刷新页面返回页首

发表评论

昵称: [登录]

[注册]

主页:

邮箱:(仅博主可见)

验证码:看不清。
       换一个

评论内容:

记住我的昵称和主页

-->

登录注册

[使用ctrl+enter键快速提交评论]

0

1915211

qsa4qntvqco=

首页博问闪存新闻园子招聘知识库

最新it新闻:

·ios 5.1 beta3文件预示未来 siri有可能支持 ipad和 ipod touch

·android平台12月广告浏览份额51.6% 超越ios

·测试版ios源代码显示ipad 3或将支持siri

·斯蒂芬·霍金的新电脑

·京东商城2.95亿竞得北京商业地一块

» 更多新闻...

最新知识库文章:

·javascript 面向对象编程

·持续集成之“everything is code”

·持续集成之“软件自我识别”

·持续集成之戏说check-in dance

·什么是闭包。
       我的理解

» 更多知识库文章...

china-pub 2011秋季教材巡展

china-pub 计算机绝版图书按需印刷服务

======================================================
在最后，我邀请大家参加新浪APP，就是新浪免费送大家的一个空间，支持PHP+MySql，免费二级域名，免费域名绑定 这个是我邀请的地址，您通过这个链接注册即为我的好友，并获赠云豆500个，价值5元哦！短网址是http://t.cn/SXOiLh我创建的小站每天访客已经达到2000+了，每天挂广告赚50+元哦，呵呵，饭钱不愁了，\(^o^)/