ASP.NET MVC 2中实现右键菜单和简单分页

开发 后端
在这里我们将讨论的是通过一个插件实现ASP.NET MVC 2中的右键菜单和一个相当简单的分页,希望对大家有所帮助。

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

首先,下载此插件

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

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

定义右键菜单:

  1. <div class="contextMenu" id="myMenu1"> <ul>   
  2. <li id="detail">
  3. <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"> 
  6. <img src="http://www.cnblogs.com/Content/delete.ico"/>delete</li>   
  7. <li id="modify">
  8. <img src="http://www.cnblogs.com/Content/modify.ico"/>modify</li>   
  9.  </ul> </div> 

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

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

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

  1. <script type="text/javascript">   
  2.    $(document).ready(function () {   
  3.       $('td.showContext').contextMenu('myMenu1', {   
  4.          bindings: {  
  5.                'detail'function (t) {   
  6.            document.location.href = '/Products/Detail/'+t.id;   
  7.                 },   
  8.                'new'function (t) {  
  9.          document.location.href = '/Products/Detail/' + t.id;  
  10.               },  
  11.                  'delete'function (t) {  
  12.                      confirm("你确定删除吗?");  
  13.           document.location.href = '/Products/Detail/' + t.id;  
  14.                 },  
  15.                  'modify'function (t) {  
  16.        document.location.href = '/Products/Detail/' + t.id;  
  17.                }  
  18.              }  
  19.         });  
  20.      });  
  21. </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.                CategoryID11             </th> 
  11.             <th> 
  12.                  QuantityPerUnit  
  13.           </th> 
  14.             <th> 
  15.                  UnitPrice  
  16.            </th> 
  17.              <th> 
  18.                 UnitsInStock20             </th> 
  19.            <th> 
  20.                  UnitsOnOrder23             </th> 
  21.              <th> 
  22.                 ReorderLevel  
  23.             </th> 
  24.             <th> 
  25.                 Discontinued  
  26.              </th> 
  27.          </tr> 
  28.     <% foreach (var item in Model.Products)  
  29.         { %> 
  30.         <tr> 
  31.   <td class="showContext" id="<%= item.ProductID %>"> 
  32. <%: item.ProductName %></td> 
  33.              <td> 
  34.                  <%: item.SupplierID %> 
  35.            </td> 
  36.              <td> 
  37.                 <%: item.CategoryID %> 
  38.             </td> 
  39.              <td> 
  40.                 <%: item.QuantityPerUnit %> 
  41.              </td> 
  42.              <td> 
  43.        <%: String.Format("{0:F}", item.UnitPrice) %> 
  44.             </td> 
  45.              <td> 
  46.                 <%: item.UnitsInStock %> 
  47.              </td> 
  48.           <td> 
  49.              <%: item.UnitsOnOrder %> 
  50.              </td> 
  51.           <td> 
  52.            <%: item.ReorderLevel %> 
  53.             </td> 
  54.             <td> 
  55.                <%: item.Discontinued %> 
  56.           </td> 
  57.         </tr>      
  58.     <% } %> 
  59. </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. int seed = currentPage % currentPageSize == 0 ? currentPage : currentPage - (currentPage % currentPageSize);   
  5. if (currentPage > 0)   
  6. sb1.AppendLine(String.Format("<a href=\"{0}/{1}\">Previous</a>", urlPrefix, currentPage));   
  7. if (currentPage - currentPageSize >= 0)  
  8. sb1.AppendLine(String.Format("<a href=\"{0}/{1}\">...</a>", urlPrefix, (currentPage - currentPageSize) + 1));  
  9. for (int i = seed; i < Math.Round((totalRecords / 10) + 0.5) && i < seed + currentPageSize; i++)  
  10.  {  
  11. sb1.AppendLine(String.Format("<a href=\"{0}/{1}\">{1}</a>", urlPrefix, i + 1));  
  12.  }  
  13. if (currentPage + currentPageSize <= (Math.Round((totalRecords / 10) + 0.5) - 1))  
  14. sb1.AppendLine(String.Format("<a href=\"{0}/{1}\">...</a>", urlPrefix, (currentPage + currentPageSize) + 1));  
  15. if (currentPage < (Math.Round((totalRecords / 10) + 0.5) - 1))  
  16. sb1.AppendLine(String.Format("<a href=\"{0}/{1}\">Next</a>", urlPrefix, currentPage + 2));  
  17. return sb1.ToString();  

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

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

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

效果:

效果

显示:

右键菜单

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

总结:在asp.net mvc中实现右键菜单和简单的分页。

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

原文标题:ASP.NET MVC2右键菜单和最简单分页

链接:http://www.cnblogs.com/zhuqil/archive/2010/08/01/asp-net-mvc-context-menu-and-simple-paging.html

【编辑推荐】

  1. 添加设置ASP.NET Web时出现问题
  2. 详细说明ASP.NET 2.0功能支持
  3. 强化部署ASP.Net 2.0配置应用程序
  4. 微软PDC2009直击:改进ASP.NET 4运行时
  5. 详解ASP.NET MVC 2自定义验证

 

 

责任编辑:彭凡 来源: 博客园
相关推荐

2009-07-28 14:47:18

ASP.NET MVC

2009-07-22 16:02:39

ASP.NET MVCPagedList

2009-09-10 09:50:47

ASP.NET MVC

2010-03-19 09:17:16

ASP.NET MVC

2012-04-13 10:05:24

ASP.NET

2009-07-20 15:44:32

ASP.NET MVC

2010-02-03 09:50:58

ASP.NET MVC

2010-01-26 13:15:42

ASP.NET MVC

2009-12-21 10:05:10

ASP.NET MVC

2009-07-31 12:43:59

ASP.NET MVC

2012-04-23 15:10:18

ASP.NET

2009-04-20 09:43:37

ASP.NET MVC基础开发

2009-07-24 13:20:44

MVC框架ASP.NET

2010-10-14 09:05:36

ASP.NET MVC

2010-11-02 08:46:55

NupackASP.NET MVC

2009-06-12 09:24:34

ASP.NET窗体ASP.NET MVC

2009-09-24 09:26:22

ASP.NET MVC

2010-02-05 08:32:32

ASP.NET MVC

2009-07-22 13:16:04

MvcAjaxPaneASP.NET MVC

2009-08-04 14:23:36

ASP.NET查询分页
点赞
收藏

51CTO技术栈公众号