ASP.NET MVC2右鍵菜單和最簡單分頁

右鍵菜單非常友善，很多時候會用到。這篇文章将使用一個JQUERY的插件在asp.net mvc中實作右鍵菜單。本文還将介紹一下在asp.net mvc中如何實作簡單的分頁。效果如下圖：

    建立一個asp.net mvc應用程式。将此插件放入Scripts檔案夾。并在頁面上引用。

    這個demo使用到NORTHWND資料庫的Product表。

    定義右鍵菜單：

<a></a>

1 &lt;div class="contextMenu" id="myMenu1"&gt; 

2 &lt;ul&gt; 

3 &lt;li id="detail"&gt;&lt;img src="http://www.cnblogs.com/Content/detail.ico"/&gt;detail&lt;/li&gt; 

4 &lt;li id="new"&gt;&lt;img src="http://www.cnblogs.com/Content/new.ico"/&gt;new&lt;/li&gt; 

5 &lt;li id="delete"&gt;&lt;img src="http://www.cnblogs.com/Content/delete.ico"/&gt;delete&lt;/li&gt; 

6 &lt;li id="modify"&gt;&lt;img src="http://www.cnblogs.com/Content/modify.ico"/&gt;modify&lt;/li&gt; 

7 &lt;/ul&gt; 

8  &lt;/div&gt;

    将此菜單定義在産品名上，故在在産品名上添加一個class供jquery選擇。

&lt;td class="showContext" id="&lt;%= item.ProductID %&gt;"&gt;&lt;%: item.ProductName %&gt;&lt;/td&gt;

    在頁面上插入下面腳本。用于綁定菜單項的行為。為了簡單起見，将是以的菜單項的行為都定義成導航到詳情頁面。

1 &lt;script type="text/javascript"&gt;

2 

3 $(document).ready(function () {

4 $('td.showContext').contextMenu('myMenu1', {

5 bindings: {

6 'detail': function (t) {

7 document.location.href ='/Products/Detail/'+t.id;

8 },

9 'new': function (t) {

10 document.location.href ='/Products/Detail/'+ t.id;

11 },

12 'delete': function (t) {

13 confirm("你确定删除嗎？");

14 document.location.href ='/Products/Detail/'+ t.id;

15 },

16 'modify': function (t) {

17 document.location.href ='/Products/Detail/'+ t.id;

18 }

19 }

20 });

21 });

22 

23  &lt;/script&gt;

    這樣就非常簡單的實作了右鍵菜單的功能。

    下面說下實作簡單的分頁。asp.net mvc中分頁非常簡單。

    看下面定義的table的html代碼：

1 &lt;table&gt;

2 &lt;tr&gt;

3 &lt;th&gt;

4 ProductName

5 &lt;/th&gt;

6 &lt;th&gt;

7 SupplierID

8 &lt;/th&gt;

9 &lt;th&gt;

10 CategoryID

11 &lt;/th&gt;

12 &lt;th&gt;

13 QuantityPerUnit

14 &lt;/th&gt;

15 &lt;th&gt;

16 UnitPrice

17 &lt;/th&gt;

18 &lt;th&gt;

19 UnitsInStock

20 &lt;/th&gt;

21 &lt;th&gt;

22 UnitsOnOrder

23 &lt;/th&gt;

24 &lt;th&gt;

25 ReorderLevel

26 &lt;/th&gt;

27 &lt;th&gt;

28 Discontinued

29 &lt;/th&gt;

30 &lt;/tr&gt;

31 

32 &lt;% foreach (var item in Model.Products)

33 { %&gt;

34 &lt;tr&gt;

35 &lt;td class="showContext" id="&lt;%= item.ProductID %&gt;"&gt;&lt;%: item.ProductName %&gt;&lt;/td&gt;

36 &lt;td&gt;

37 &lt;%: item.SupplierID %&gt;

38 &lt;/td&gt;

39 &lt;td&gt;

40 &lt;%: item.CategoryID %&gt;

41 &lt;/td&gt;

42 &lt;td&gt;

43 &lt;%: item.QuantityPerUnit %&gt;

44 &lt;/td&gt;

45 &lt;td&gt;

46 &lt;%: String.Format("{0:F}", item.UnitPrice) %&gt;

47 &lt;/td&gt;

48 &lt;td&gt;

49 &lt;%: item.UnitsInStock %&gt;

50 &lt;/td&gt;

51 &lt;td&gt;

52 &lt;%: item.UnitsOnOrder %&gt;

53 &lt;/td&gt;

54 &lt;td&gt;

55 &lt;%: item.ReorderLevel %&gt;

56 &lt;/td&gt;

57 &lt;td&gt;

58 &lt;%: item.Discontinued %&gt;

59 &lt;/td&gt;

60 &lt;/tr&gt;

61 

62 &lt;% } %&gt;

63 

64 &lt;/table&gt;

    我們隻要在這個table下面插入一段分頁的HTML腳本就行了。分頁的腳本當然要生成，使用Htmlhelper的擴充方法去生成這個腳本。看下面的擴充方法，非常的簡單的生成了分頁的html代碼：

1 publicstaticstring Pager(this HtmlHelper helper, int currentPage, int currentPageSize, int totalRecords, string urlPrefix)

2 {

3 StringBuilder sb1 =new StringBuilder();

4 

5 int seed = currentPage % currentPageSize ==0? currentPage : currentPage - (currentPage % currentPageSize);

6 

7 if (currentPage &gt;0)

8 sb1.AppendLine(String.Format("&lt;a href=\"{0}/{1}\"&gt;Previous&lt;/a&gt;", urlPrefix, currentPage));

9 

10 if (currentPage - currentPageSize &gt;=0)

11 sb1.AppendLine(String.Format("&lt;a href=\"{0}/{1}\"&gt;...&lt;/a&gt;", urlPrefix, (currentPage - currentPageSize) +1));

12 

13 for (int i = seed; i &lt; Math.Round((totalRecords /10) +0.5) &amp;&amp; i &lt; seed + currentPageSize; i++)

14 {

15 sb1.AppendLine(String.Format("&lt;a href=\"{0}/{1}\"&gt;{1}&lt;/a&gt;", urlPrefix, i +1));

16 }

17 

18 if (currentPage + currentPageSize &lt;= (Math.Round((totalRecords /10) +0.5) -1))

19 sb1.AppendLine(String.Format("&lt;a href=\"{0}/{1}\"&gt;...&lt;/a&gt;", urlPrefix, (currentPage + currentPageSize) +1));

20 

21 if (currentPage &lt; (Math.Round((totalRecords /10) +0.5) -1))

22 sb1.AppendLine(String.Format("&lt;a href=\"{0}/{1}\"&gt;Next&lt;/a&gt;", urlPrefix, currentPage +2));

23 

24 return sb1.ToString();

25 }

然後在table後面添加下面的代碼，在table下面輸出分頁的html代碼:

&lt;div class="pager"&gt;

&lt;%=Html.Pager(Model.CurrentPage, Model.TotalPages,Model.TotalItems ,"/Products/List")%&gt;

&lt;/div&gt;

這樣就完成分頁和右鍵菜單的功能了。是不是非常的簡單呢。：）

效果：

顯示：

如果有興趣可以下載下傳代碼。

總結：在asp.net mvc中實作右鍵菜單和簡單的分頁。

本文轉自麒麟部落格園部落格，原文連結：http://www.cnblogs.com/zhuqil/archive/2010/08/01/asp-net-mvc-context-menu-and-simple-paging.html，如需轉載請自行聯系原作者