Mikel
[转载]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
