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

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

成都创新互联公司是一家专业提供冀州企业网站建设,专注与网站设计、网站制作、H5页面制作、小程序制作等业务。10年已为冀州众多企业、政府机构等服务。创新互联专业的建站公司优惠进行中。

首先,下载此插件。

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

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

定义右键菜单:

 
 
 
 
  1.  
         
    • detail
    •    
    • new
    •  
    • delete
    •    
    • modify
    •    
    •  
     
 

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

 
 
 
 
  1. ">
  2. <%: item.ProductName %> 

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

 
 
 
 
  1.    
  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.  

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

下面说下实现简单的分页。asp.net mvc中分页非常简单。

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

 
 
 
 
  1.     
  2.   
  3.    
  4.             
  5.  
  6.           
  7.    
  8.             
  9.  
  10.             
  11.  
  12.             
  13.  
  14.              
  15.  
  16.            
  17.  
  18.              
  19.  
  20.             
  21.  
  22.          
  23.  
  24.     <% foreach (var item in Model.Products)  
  25.         { %> 
  26.         
  27.  
  28.   "> 
  29. <%: item.ProductName %> 
  30.              
  31.  
  32.              
  33.  
  34.              
  35.  
  36.              
  37.  
  38.              
  39.  
  40.           
  41.  
  42.           
  43.  
  44.             
  45.  
  46.         
  47.       
  48.     <% } %> 
  49.    
  50.                 ProductName   
  51.              
  52.    
  53.                SupplierID   
  54.             
  55.  
  56.                CategoryID11             
  57.  
  58.                  QuantityPerUnit  
  59.           
  60.  
  61.                  UnitPrice  
  62.            
  63.  
  64.                 UnitsInStock20             
  65.  
  66.                  UnitsOnOrder23             
  67.  
  68.                 ReorderLevel  
  69.             
  70.  
  71.                 Discontinued  
  72.              
  73.  
  74.                  <%: item.SupplierID %> 
  75.            
  76.  
  77.                 <%: item.CategoryID %> 
  78.             
  79.  
  80.                 <%: item.QuantityPerUnit %> 
  81.              
  82.  
  83.        <%: String.Format("{0:F}", item.UnitPrice) %> 
  84.             
  85.  
  86.                 <%: item.UnitsInStock %> 
  87.              
  88.  
  89.              <%: item.UnitsOnOrder %> 
  90.              
  91.  
  92.            <%: item.ReorderLevel %> 
  93.             
  94.  
  95.                <%: item.Discontinued %> 
  96.           
  97.  

我们只要在这个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("Previous", urlPrefix, currentPage));   
  7. if (currentPage - currentPageSize >= 0)  
  8. sb1.AppendLine(String.Format("...", 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("{1}", urlPrefix, i + 1));  
  12.  }  
  13. if (currentPage + currentPageSize <= (Math.Round((totalRecords / 10) + 0.5) - 1))  
  14. sb1.AppendLine(String.Format("...", urlPrefix, (currentPage + currentPageSize) + 1));  
  15. if (currentPage < (Math.Round((totalRecords / 10) + 0.5) - 1))  
  16. sb1.AppendLine(String.Format("Next", urlPrefix, currentPage + 2));  
  17. return sb1.ToString();  

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

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

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

效果:

显示:

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

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

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

当前名称:ASP.NET MVC 2中实现右键菜单和简单分页
URL地址:http://www.hantingmc.com/qtweb/news21/73171.html

网站建设、网络推广公司-创新互联,是专注品牌与效果的网站制作,网络营销seo公司;服务项目有等

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

猜你还喜欢下面的内容

面包屑导航知识

同城分类信息