ASP.NET学习网|ASP.NET教程|ASP.NET MVC|ASP.NET 源码|VS2010教程|ASP.NET视频教程

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

 

首先，下载此插件

jquery.contextmenu.r2.rar

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

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

    定义右键菜单：

  <div class="contextMenu" id="myMenu1"> 
<ul> 
  <li id="detail"><img src="http://www.cnblogs.com/Content/detail.ico" />detail</li>
<li id="new"><img src="http://www.cnblogs.com/Content/new.ico" />new</li>
<li id="delete"> <img src="http://www.cnblogs.com/Content/delete.ico"/>delete</li>
<li id="modify"><img src="http://www.cnblogs.com/Content/modify.ico"/>modify</li> 
  </ul> 
 </div>

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

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

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

<script type="text/javascript">
 
     $(document).ready(function () {
       $('td.showContext').contextMenu('myMenu1', {
 bindings: {
                 'detail': function (t) {
                     document.location.href = '/Products/Detail/'+t.id;
                 },
                'new': function (t) {
                    document.location.href = '/Products/Detail/' + t.id;
                 },
                'delete': function (t) {
                    confirm("你确定删除吗？");
                     document.location.href = '/Products/Detail/' + t.id;
             },
              'modify': function (t) {
                     document.location.href = '/Products/Detail/' + t.id;
                }
             }
        });
     });

 </script>

    <table>
     <tr>
          <th>
           ProductName
     </th>
       <th>
            SupplierID
         </th>
           <th>
               CategoryID
       </th>
            <th>
              QuantityPerUnit
        </th>
          <th>
               UnitPrice
           </th>
        <th>
          UnitsInStock
         </th>
           <th>
            UnitsOnOrder
        </th>
           <th>
           ReorderLevel
         </th>
           <th>
               Discontinued
         </th>
    </tr>

    <% foreach (var item in Model.Products)
        { %>
    <tr>
             <td class="showContext" id="<%= item.ProductID %>"><%: item.ProductName %></td>
    <td>
              <%: item.SupplierID %>
          </td>
        <td>
          <%: item.CategoryID %>
           </td>
       <td>
           <%: item.QuantityPerUnit %>
        </td>
     <td>
              <%: String.Format("{0:F}", item.UnitPrice) %>
        </td>
        <td>
                <%: item.UnitsInStock %>
          </td>
        <td>
              <%: item.UnitsOnOrder %>
         </td>
          <td>
              <%: item.ReorderLevel %>
           </td>
          <td>
              <%: item.Discontinued %>
         </td>
   </tr>    
  <% } %>
  </table>

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

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

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

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

 public static string Pager(this HtmlHelper helper, int currentPage, int currentPageSize, int totalRecords, string urlPrefix)
      {
       StringBuilder sb1 = new StringBuilder();
         int seed = currentPage % currentPageSize == 0 ? currentPage : currentPage - (currentPage % currentPageSize);

   if (currentPage > 0)
          sb1.AppendLine(String.Format("<a href=\"{0}/{1}\">Previous</a>", urlPrefix, currentPage));
    if (currentPage - currentPageSize >= 0)
               sb1.AppendLine(String.Format("<a href=\"{0}/{1}\">...</a>", urlPrefix, (currentPage - currentPageSize) + 1));

        for (int i = seed; i < Math.Round((totalRecords / 10) + 0.5) && i < seed + currentPageSize; i++)
        {
              sb1.AppendLine(String.Format("<a href=\"{0}/{1}\">{1}</a>", urlPrefix, i + 1));
          }

   if (currentPage + currentPageSize <= (Math.Round((totalRecords / 10) + 0.5) - 1))
             sb1.AppendLine(String.Format("<a href=\"{0}/{1}\">...</a>", urlPrefix, (currentPage + currentPageSize) + 1));

         if (currentPage < (Math.Round((totalRecords / 10) + 0.5) - 1))
          sb1.AppendLine(String.Format("<a href=\"{0}/{1}\">Next</a>", urlPrefix, currentPage + 2));

    return sb1.ToString();
 }

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

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

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

效果：

显示：

 

ContextMenuDemo.rar