asp.net MVC 2 Right-click menus and simple pagination examples _ practical tips

Right-click menu is very convenient, many times will be used. This article will use a jquery plugin to implement the right-click menu in ASP.net mvc. This article also describes how to implement simple pagination in asp.net mvc. The effect of the following figure:

Creates a new ASP.net MVC application. Put this plugin into the Scripts folder. and refer to it on the page.
Define right-click menu:

<div class= "ContextMenu" id= "myMenu1" > <ul> 
<li id= "Detail" >
detail</li> 
<li id=" new ">new</li>
<li id=" Delete "> 
delete</li> 
<li id=" Modify ">
modify</li> 
 </ul> </div> 

This menu is defined on the product name, so add a class to the product name for jquery to choose from.

<TD class= "ShowContext" id= "<%= item. ProductID%> ">
<%: Item. ProductName%></td> 

Insert the following script on the page. The behavior used to bind the menu item. For simplicity, the behavior of the menu items is defined as navigating to the details page.

<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 ("Are you sure to delete it?") "); 
   Document.location.href = '/products/detail/' + t.id; 
    }, 
     ' Modify ': function (t) { 
  Document.location.href = '/products/detail/' + T.id;}}} 
  ); 

This makes it very simple to implement the function of the right-click menu.

Here is the implementation of simple pagination. asp.net mvc is easy to page through.

Look at the HTML code for the table defined below:

 <table> <tr> <th> ProductName </th> <th> SupplierID &LT;/TH&G 
   T <th> CategoryID11 </th> <th> quantityperunit </th> <th> Unit Price </th> <th> UnitsInStock20 </th> <th> UnitsOnOrder23 </th&gt 
    ; <th> reorderlevel </th> <th> discontinued </th> </tr> <% for Each (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>

All we have to do is insert a page of HTML script below this table. The paging script is of course to be generated, using the HtmlHelper extension method to generate the script. Look at the extension method below, very simple to generate pagination HTML code:

public static string Pager (this htmlhelper helper, int currentpage, int currentpagesize, int totalrecords, String urlpref 
ix) {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 ();  }

Then, after the table, add the following code to output the HTML code for pagination below the table:

<div class= "Pager" > 
<%=html.pager (model.currentpage, Model.totalpages,model.totalitems, "/Products/ List ")%>
 

This completes the paging and right-click menu functionality. It's very simple. ：）

Effect:

Show:

Through a plug-in implementation of ASP.net MVC 2 of the right menu and a fairly simple paging, hope to be able to help you master the paging function of the implementation.