[转载]ASP.NET MVC2右键菜单和最简单分页

baacloud免费翻墙vpn注册使用

[转载]ASP.NET MVC2右键菜单和最简单分页 – 海纳百川 – 博客园.

右键菜单非常方便,很多时候会用到。这篇文章将使用一个JQuery的插件在ASP.NET mvc中实现右键菜单。本文还将介绍一下在ASP.NET mvc中如何实现简单的分页。效果如下图:

首先,下载此插件

新建一个ASP.NET mvc应用程序。将此插件放入Scripts文件夹。并在页面上引用。

这个demo使用到NORTHWND数据库的Product表。

定义右键菜单:

1 <div class="contextMenu" id="myMenu1"> 2 <ul> 3 <li id="detail"><img src="http://www.cnblogs.com/Content/detail.ico" />detail</li> 4 <li id="new"><img src="http://www.cnblogs.com/Content/new.ico" />new</li> 5 <li id="delete"> <img src="http://www.cnblogs.com/Content/delete.ico"/>delete</li> 6 <li id="modify"><img src="http://www.cnblogs.com/Content/modify.ico"/>modify</li> 7 </ul> 8  </div>

将此菜单定义在产品名上,故在在产品名上添加一个class供JQuery选择。

<td class="showContext" id="<%= item.ProductID %>"><%: item.ProductName %></td>

在页面上插入下面脚本。用于绑定菜单项的行为。为了简单起见,将所以的菜单项的行为都定义成导航到详情页面。

1 <script type="text/javascript"> 2 3 $(document).ready(function () { 4 $('td.showContext').contextMenu('myMenu1', { 5 bindings: { 6 'detail': function (t) { 7 document.location.href = '/Products/Detail/'+t.id; 8 }, 9 'new': function (t) { 10 document.location.href = '/Products/Detail/' + t.id; 11 }, 12 'delete': function (t) { 13 confirm("你确定删除吗?"); 14 document.location.href = '/Products/Detail/' + t.id; 15 }, 16 'modify': function (t) { 17 document.location.href = '/Products/Detail/' + t.id; 18 } 19 } 20 }); 21 }); 22 23  </script>

这样就非常简单的实现了右键菜单的功能。

下面说下实现简单的分页。ASP.NET MVC中分页非常简单。

看下面定义的table的html代码:

1 <table> 2 <tr> 3 <th> 4 ProductName 5 </th> 6 <th> 7 SupplierID 8 </th> 9 <th> 10 CategoryID 11 </th> 12 <th> 13 QuantityPerUnit 14 </th> 15 <th> 16 UnitPrice 17 </th> 18 <th> 19 UnitsInStock 20 </th> 21 <th> 22 UnitsOnOrder 23 </th> 24 <th> 25 ReorderLevel 26 </th> 27 <th> 28 Discontinued 29 </th> 30 </tr> 31 32 <% foreach (var item in Model.Products) 33 { %> 34 <tr> 35 <td class="showContext" id="<%= item.ProductID %>"><%: item.ProductName %></td> 36 <td> 37 <%: item.SupplierID %> 38 </td> 39 <td> 40 <%: item.CategoryID %> 41 </td> 42 <td> 43 <%: item.QuantityPerUnit %> 44 </td> 45 <td> 46 <%: String.Format("{0:F}", item.UnitPrice) %> 47 </td> 48 <td> 49 <%: item.UnitsInStock %> 50 </td> 51 <td> 52 <%: item.UnitsOnOrder %> 53 </td> 54 <td> 55 <%: item.ReorderLevel %> 56 </td> 57 <td> 58 <%: item.Discontinued %> 59 </td> 60 </tr> 61 62 <% } %> 63 64 </table>

我们只要在这个table下面插入一段分页的HTML脚本就行了。分页的脚本当然要生成,使用Htmlhelper的扩展方法去生成这个脚本。看下面的扩展方法,非常的简单的生成了分页的html代码:

1 public static string Pager(this HtmlHelper helper, int currentPage, int currentPageSize, int totalRecords, string urlPrefix) 2 { 3 StringBuilder sb1 = new StringBuilder(); 4 5 int seed = currentPage % currentPageSize == 0 ? currentPage : currentPage - (currentPage % currentPageSize); 6 7 if (currentPage > 0) 8 sb1.AppendLine(String.Format("<a href=\"{0}/{1}\">Previous</a>", urlPrefix, currentPage)); 9 10 if (currentPage - currentPageSize >= 0) 11 sb1.AppendLine(String.Format("<a href=\"{0}/{1}\">...</a>", urlPrefix, (currentPage - currentPageSize) + 1)); 12 13 for (int i = seed; i < Math.Round((totalRecords / 10) + 0.5) && i < seed + currentPageSize; i++) 14 { 15 sb1.AppendLine(String.Format("<a href=\"{0}/{1}\">{1}</a>", urlPrefix, i + 1)); 16 } 17 18 if (currentPage + currentPageSize <= (Math.Round((totalRecords / 10) + 0.5) - 1)) 19 sb1.AppendLine(String.Format("<a href=\"{0}/{1}\">...</a>", urlPrefix, (currentPage + currentPageSize) + 1)); 20 21 if (currentPage < (Math.Round((totalRecords / 10) + 0.5) - 1)) 22 sb1.AppendLine(String.Format("<a href=\"{0}/{1}\">Next</a>", urlPrefix, currentPage + 2)); 23 24 return sb1.ToString(); 25 }

然后在table后面添加下面的代码,在table下面输出分页的html代码:

<div class="pager"> <%=Html.Pager(Model.CurrentPage, Model.TotalPages,Model.TotalItems ,"/Products/List")%> </div>

这样就完成分页和右键菜单的功能了。是不是非常的简单呢。:)

效果:

显示:

如果有兴趣可以下载代码。

总结:ASP.NET MVC中实现右键菜单和简单的分页。

代码http://cid-aef1e64945224a20.office.live.com/self.aspx/.Public/ContextMenuDemo.rar

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

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

支付宝扫一扫打赏

微信扫一扫打赏