PC6下载站

分类分类

在asp.net mvc中实现右键菜单和简单的分页教程

关注+2010-11-17作者:不详

这里带领大家来学习用在asp.net mvc中实现右键菜单和简单的分页

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

具体介绍:右键菜单非常方便,很多时候会用到。这篇文章将使用一个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中实现右键菜单和简单的分页。

 

 

展开全部

相关文章

更多+相同厂商

热门推荐

  • 最新排行
  • 最热排行
  • 评分最高
排行榜

    点击查看更多

      点击查看更多

        点击查看更多

        说两句网友评论

          我要评论...
          取消