右鍵菜單非常方便，很多時(shí)候會(huì)用到。這篇文章將使用一個(gè)JQUERY的插件在ASP.NET MVC中實(shí)現(xiàn)右鍵菜單。本文還將介紹一下在ASP.NET MVC中如何實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)。效果如下圖：
新建一個(gè)asp.net mvc應(yīng)用程序。將此插件放入Scripts文件夾。并在頁(yè)面上引用。
定義右鍵菜單：
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>
在頁(yè)面上插入下面腳本。用于綁定菜單項(xiàng)的行為。為了簡(jiǎn)單起見(jiàn)，將所以的菜單項(xiàng)的行為都定義成導(dǎo)航到詳情頁(yè)面.
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)了右鍵菜單的功能。
下面說(shuō)下實(shí)現(xiàn)簡(jiǎn)單的分頁(yè)。asp.net mvc中分頁(yè)非常簡(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下面插入一段分頁(yè)的HTML腳本就行了。分頁(yè)的腳本當(dāng)然要生成，使用Htmlhelper的擴(kuò)展方法去生成這個(gè)腳本?？聪旅娴臄U(kuò)展方法，非常的簡(jiǎn)單的生成了分頁(yè)的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下面輸出分頁(yè)的html代碼:
div class="pager">
%=Html.Pager(Model.CurrentPage, Model.TotalPages,Model.TotalItems ,"/Products/List")%>
/div>
這樣就完成分頁(yè)和右鍵菜單的功能了。是不是非常的簡(jiǎn)單呢。：）
效果：
顯示：
通過(guò)一個(gè)插件實(shí)現(xiàn)ASP.NET MVC 2中的右鍵菜單和一個(gè)相當(dāng)簡(jiǎn)單的分頁(yè)，希望能夠幫助到大家熟練掌握分頁(yè)功能的實(shí)現(xiàn)。
您可能感興趣的文章:- ASP.NET MVC 5使用X.PagedList.Mvc進(jìn)行分頁(yè)教程(PagedList.Mvc)
- ASP.NET MVC4 HtmlHelper擴(kuò)展類(lèi)，實(shí)現(xiàn)分頁(yè)功能
- ASP.NET MVC分頁(yè)和排序功能實(shí)現(xiàn)
- ASP.NET MVC+EF在服務(wù)端分頁(yè)使用jqGrid以及jquery Datatables的注意事項(xiàng)
- 利用ASP.NET MVC+Bootstrap搭建個(gè)人博客之打造清新分頁(yè)Helper（三）
- ASP.NET MVC4 Razor模板簡(jiǎn)易分頁(yè)效果
- asp.net mvc4 mysql制作簡(jiǎn)單分頁(yè)組件（部分視圖）
- ASP.NET同步分頁(yè)MvcPager使用詳解
- asp.net MVC分頁(yè)代碼分享
- ASP.NET MVC分頁(yè)的實(shí)現(xiàn)方法
