ASP. net mvc 2 context menu and simple paging instance explanation, mvc instance explanation

ASP. net mvc 2 context menu and simple paging instance explanation, mvc instance explanation

The right-click menu is very convenient and is often used. This article uses a JQUERY plug-in to implement the right-click menu in ASP. net mvc. This article also describes how to implement simple paging in ASP. net mvc. The effect is as follows:

Create an asp.net mvc application. Put this plug-in the Scripts folder. And reference it on the page.
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> 

Define this menu on the product name, so add a class on the product name for jquery to choose.

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

Insert the following script on the page. Used to bind menu items. For the sake of simplicity, the menu items are defined as navigation 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 you want to delete it? "); Document. location. href = '/Products/Detail/' + t. id;}, 'modify': function (t) {document. location. href = '/Products/Detail/' + t. id ;}}}) ;}); </script>

In this way, the right-click menu function is very simple.

The following describes how to implement simple paging. In asp.net mvc, paging is very simple.

See the html code of the table defined below:

 <table>  <tr>    <th>     ProductName     </th>    <th>     SupplierID    </th>    <th>     CategoryID11    </th>    <th>      QuantityPerUnit    </th>    <th>      UnitPrice    </th>     <th>     UnitsInStock20    </th>    <th>      UnitsOnOrder23    </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> 

We just need to insert a paging HTML Script under this table. The paging script must be generated. Use the Htmlhelper extension method to generate the script. Take a look at the following extension method to easily generate html code for pagination:

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(); } 

Add the following code to the end of the table and output the paging html code under the table:

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

This completes the paging and right-click menu functions. Is it very simple. :)

Effect:

Display:

Using a plug-in to implement the right-click menu in ASP. net mvc 2 and a fairly simple page, we hope to help you master the implementation of the page function.