一起谈.NET技术,ASP.NET MVC2实现分页和右键菜单

简介:   右键菜单非常方便,很多时候会用到。这篇文章将使用一个JQUERY的插件在asp.net mvc中实现右键菜单。本文还将介绍一下在asp.net mvc中如何实现简单的分页。效果如下图:  首先,下载此插件。

  右键菜单非常方便,很多时候会用到。这篇文章将使用一个JQUERY的插件在asp.net mvc中实现右键菜单。本文还将介绍一下在asp.net mvc中如何实现简单的分页。效果如下图:

  首先,下载此插件

  新建一个asp.net mvc应用程序。将此插件放入Scripts文件夹。并在页面上引用。

  这个demo使用到NORTHWND数据库的Product表。

  定义右键菜单:

 
 
< 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 >

  将此菜单定义在产品名上,故在在产品名上添加一个class供jquery选择。

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

  在页面上插入下面脚本。用于绑定菜单项的行为。为了简单起见,将所以的菜单项的行为都定义成导航到详情页面。

 
 
< 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 >

  这样就非常简单的实现了右键菜单的功能。

  下面说下实现简单的分页。asp.net mvc中分页非常简单。

  看下面定义的table的html代码:

 
 
< table >
< tr >
< th >
ProductName
</ th >
< th >
SupplierID
</ th >
< th >
CategoryID
</ th >
< th >
QuantityPerUnit
</ th >
< th >
UnitPrice
</ th >
< th >
UnitsInStock
</ th >
< th >
UnitsOnOrder
</ 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 >

  我们只要在这个table下面插入一段分页的HTML脚本就行了。分页的脚本当然要生成,使用Htmlhelper的扩展方法去生成这个脚本。看下面的扩展方法,非常的简单的生成了分页的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 >

  这样就完成分页和右键菜单的功能了。是不是非常的简单呢。:)

  效果:

  显示:

  如果有兴趣可以下载代码。

  总结:在asp.net mvc中实现右键菜单和简单的分页。

  代码http://cid-aef1e64945224a20.office.live.com/self.aspx/.Public/ContextMenuDemo.rar

目录
相关文章
|
1月前
|
人工智能 前端开发 Devops
.NET技术在现代开发中的作用:.NET技术的核心价值、在现代应用开发中的实际应用、以及面临的挑战与未来趋势。
.NET技术是软件开发领域的核心力量,本文从其核心价值、实际应用及未来挑战三方面进行探讨。它支持多种语言,提供强大的开发工具和丰富的类库,并具备跨平台能力。在现代应用开发中,.NET广泛应用于企业级系统、Web应用、移动应用、云服务和游戏开发等领域。面对性能优化、容器化、AI集成等挑战,.NET持续创新以适应不断发展变化的技术环境。
48 4
|
1月前
|
人工智能 开发框架 .NET
.NET技术的强大功能:.NET技术的基础特性、在现代开发中的应用、以及它如何助力未来的软件开发。
.NET技术是软件开发领域的核心支柱,以其强大功能、灵活性及安全性广受认可。本文分三部分解析:基础特性如多语言支持、统一运行时环境;现代应用如企业级与Web开发、移动应用、云服务及游戏开发;以及未来趋势如性能优化、容器化、AI集成等,展望.NET在不断变化的技术环境中持续发展与创新。
65 4
|
1月前
|
人工智能 物联网 开发者
.NET技术在现代软件开发中的应用愈发广泛和深入
.NET技术是软件开发的关键支柱,本文分为三部分探讨其创新应用:最新进展如.NET 5/6统一平台、性能提升、跨平台支持增强、云集成优化及开源社区贡献;应用场景涵盖微服务架构、物联网、AI/机器学习、游戏及移动应用开发;未来发展潜力在于持续性能优化、云原生支持、新兴技术集成、生态扩张及教育培训加强。.NET正以其强大适应性和创新潜力引领软件开发的新方向。
30 3
|
1月前
|
人工智能 开发框架 .NET
如何掌握.NET技术,引领开发前沿:.NET技术的核心能力、在现代开发中的应用实践、以及如何通过.NET技术实现持续创新。
.NET技术已成为软件开发不可或缺的部分,本文分三部分探讨:核心能力如多语言支持、统一运行时环境、丰富的类库及跨平台能力;现代开发实践包括企业级应用、Web与移动开发、云服务及游戏开发;并通过性能优化、容器化、AI集成等方面实现持续创新,使开发者站在技术前沿。
47 3
|
1天前
|
人工智能 前端开发 开发工具
解读.NET 技术的开发潜力
本文全面介绍了.NET技术在软件开发领域的核心优势、创新应用及面临的挑战。.NET以其统一的开发平台、强大的工具和跨平台能力,成为企业级应用、Web应用乃至游戏开发的理想选择。然而,在性能优化、容器化及AI集成等方面仍需不断突破。通过积极拥抱开源和社区驱动模式,.NET将持续推动软件开发的进步。
10 1
|
14天前
|
监控 网络协议 API
.NET WebSocket 技术深入解析,你学会了吗?
【9月更文挑战第4天】WebSocket 作为一种全双工协议,凭借低延迟和高性能特点,成为实时应用的首选技术。.NET 框架提供了强大的 WebSocket 支持,使实时通信变得简单。本文介绍 WebSocket 的基本概念、.NET 中的使用方法及编程模型,并探讨其在实时聊天、监控、在线游戏和协同编辑等场景的应用,同时分享最佳实践,帮助开发者构建高效实时应用。
55 12
|
8天前
|
人工智能 前端开发 Devops
.NET技术自发布以来,在软件开发领域发挥了重要作用
【9月更文挑战第12天】.NET技术自发布以来,在软件开发领域发挥了重要作用。本文分为三部分探讨其在现代开发中的应用:首先介绍.NET的核心价值,包括语言多样性、强大的开发工具支持、丰富的类库、跨平台能力和活跃的社区;接着分析其在企业级应用、Web开发、移动应用、云服务及游戏开发中的实际应用;最后讨论.NET面临的挑战与未来趋势,如性能优化、容器化、AI集成及跨平台框架竞争等。通过不断的技术创新和社区驱动,.NET将持续推动软件开发的进步。
21 4
|
13天前
|
开发框架 前端开发 JavaScript
ASP.NET MVC 教程
ASP.NET 是一个使用 HTML、CSS、JavaScript 和服务器脚本创建网页和网站的开发框架。
21 7
|
13天前
|
人工智能 开发框架 算法
C#/.NET/.NET Core技术前沿周刊 | 第 2 期(2024年8.19-8.25)
C#/.NET/.NET Core技术前沿周刊 | 第 2 期(2024年8.19-8.25)
|
13天前
|
传感器 应用服务中间件 Linux
C#/.NET/.NET Core技术前沿周刊 | 第 3 期(2024年8.26-8.31)
C#/.NET/.NET Core技术前沿周刊 | 第 3 期(2024年8.26-8.31)