ASP.NET MVC 2右鍵菜單和簡(jiǎn)單分頁實(shí)例講解
更新時(shí)間：2015年09月27日 14:59:29 作者：朱祁林
在這里我們將討論的是通過一個(gè)插件實(shí)現(xiàn)ASP.NET MVC 2中的右鍵菜單和一個(gè)相當(dāng)簡(jiǎn)單的分頁，希望對(duì)大家有所幫助。
右鍵菜單非常方便，很多時(shí)候會(huì)用到。這篇文章將使用一個(gè)JQUERY的插件在ASP.NET MVC中實(shí)現(xiàn)右鍵菜單。本文還將介紹一下在ASP.NET MVC中如何實(shí)現(xiàn)簡(jiǎn)單的分頁。效果如下圖：
新建一個(gè)asp.net mvc應(yīng)用程序。將此插件放入Scripts文件夾。并在頁面上引用。
定義右鍵菜單：
<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>
將此菜單定義在產(chǎn)品名上，故在在產(chǎn)品名上添加一個(gè)class供jquery選擇。
<td class="showContext" id="<%= item.ProductID %>"> <%: item.ProductName %></td>
在頁面上插入下面腳本。用于綁定菜單項(xiàng)的行為。為了簡(jiǎn)單起見，將所以的菜單項(xiàng)的行為都定義成導(dǎo)航到詳情頁面.
<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>
這樣就非常簡(jiǎn)單的實(shí)現(xiàn)了右鍵菜單的功能。
下面說下實(shí)現(xiàn)簡(jiǎn)單的分頁。asp.net mvc中分頁非常簡(jiǎn)單。
看下面定義的table的html代碼：
<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>
我們只要在這個(gè)table下面插入一段分頁的HTML腳本就行了。分頁的腳本當(dāng)然要生成，使用Htmlhelper的擴(kuò)展方法去生成這個(gè)腳本。看下面的擴(kuò)展方法，非常的簡(jiǎn)單的生成了分頁的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>
這樣就完成分頁和右鍵菜單的功能了。是不是非常的簡(jiǎn)單呢。：）
效果：
顯示：
通過一個(gè)插件實(shí)現(xiàn)ASP.NET MVC 2中的右鍵菜單和一個(gè)相當(dāng)簡(jiǎn)單的分頁，希望能夠幫助到大家熟練掌握分頁功能的實(shí)現(xiàn)。
您可能感興趣的文章:
- ASP.NET MVC 5使用X.PagedList.Mvc進(jìn)行分頁教程(PagedList.Mvc)
- ASP.NET MVC4 HtmlHelper擴(kuò)展類，實(shí)現(xiàn)分頁功能
- ASP.NET MVC分頁和排序功能實(shí)現(xiàn)
- ASP.NET MVC+EF在服務(wù)端分頁使用jqGrid以及jquery Datatables的注意事項(xiàng)
- 利用ASP.NET MVC+Bootstrap搭建個(gè)人博客之打造清新分頁Helper（三）
- ASP.NET MVC4 Razor模板簡(jiǎn)易分頁效果
- asp.net mvc4 mysql制作簡(jiǎn)單分頁組件（部分視圖）
- ASP.NET同步分頁MvcPager使用詳解
- asp.net MVC分頁代碼分享
- ASP.NET MVC分頁的實(shí)現(xiàn)方法
相關(guān)文章
ASP.NET web.config中 數(shù)據(jù)庫連接字符串加密解密
本文主要介紹利用aspnet_regiis.exe工具對(duì)web.config中connectionStrings節(jié)點(diǎn)進(jìn)行加密和解密的過程，希望對(duì)大家有所幫助。2016-05-05
目前已經(jīng)有很多介紹創(chuàng)建IIS虛擬目錄的文章了,我個(gè)人也翻譯過一篇2007-04-04
常用的在數(shù)據(jù)庫中建立無限級(jí)樹形菜單的asp.net代碼
經(jīng)常在項(xiàng)目中遇到建立無限級(jí)樹形菜單展示的效果,這里簡(jiǎn)單地做了一個(gè),基本后臺(tái)代碼如下2008-09-09
這篇文章主要介紹了Nginx配置實(shí)現(xiàn)下載文件的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-11-11
visual Studio 2017創(chuàng)建簡(jiǎn)單控制臺(tái)程序
這篇文章主要為大家詳細(xì)介紹了visual Studio 2017創(chuàng)建簡(jiǎn)單控制臺(tái)程序，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-11-11
最近有點(diǎn)煩，沒怎么看書，幾天下來，就研究了一個(gè)保存遠(yuǎn)程圖片的。2008-09-09
ASP.NET使用SignalR2實(shí)現(xiàn)服務(wù)器廣播
這篇文章介紹了ASP.NET使用SignalR2實(shí)現(xiàn)服務(wù)器廣播的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-05-05
在.NET下有一種技術(shù)叫做對(duì)象序列化，它可以將對(duì)象序列化為二進(jìn)制文件、XML文件、SOAP文件，這樣， 使用經(jīng)過序列化的流進(jìn)行傳輸效率就得到了大大的提升。2008-08-08
DAM 簡(jiǎn)單跨數(shù)據(jù)庫ADO.NET組件
這是一個(gè)可以實(shí)現(xiàn)簡(jiǎn)單跨數(shù)據(jù)庫基于ADO.NET的組件。您可以在DAL層透過它來訪問數(shù)據(jù)庫。這是一個(gè)以前寫過一個(gè)小組件的修改版.2011-01-01
ASP.NET 鏈接 Access 數(shù)據(jù)庫路徑問題最終解決方案
ASP.NET 鏈接 Access 數(shù)據(jù)庫路徑問題最終解決方案...2007-04-04