一起谈.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

目录
相关文章
|
7月前
|
监控 Cloud Native 测试技术
.NET技术深度解析:现代企业级开发指南
每日激励:“不要一直责怪过去的自己,他曾经站在雾里也很迷茫”。我是蒋星熠Jaxonic,一名在代码宇宙中探索的极客旅人。从.NET Framework到.NET 8,我深耕跨平台、高性能、云原生开发,践行领域驱动设计与微服务架构,用代码书写技术诗篇。分享架构演进、性能优化与AI融合前沿,助力开发者在二进制星河中逐光前行。关注我,共探技术无限可能!
.NET技术深度解析:现代企业级开发指南
|
8月前
|
前端开发 Java 开发者
MVC 架构模式技术详解与实践
本文档旨在全面解析软件工程中经典且至关重要的 MVC(Model-View-Controller) 架构模式。内容将深入探讨 MVC 的核心思想、三大组件的职责与交互关系、其优势与劣势,并重点分析其在现代 Web 开发中的具体实现,特别是以 Spring MVC 框架为例,详解其请求处理流程、核心组件及基本开发实践。通过本文档,读者将能够深刻理解 MVC 的设计哲学,并掌握基于该模式进行 Web 应用开发的能力。
1693 1
|
SQL 小程序 API
如何运用C#.NET技术快速开发一套掌上医院系统?
本方案基于C#.NET技术快速构建掌上医院系统,结合模块化开发理念与医院信息化需求。核心功能涵盖用户端的预约挂号、在线问诊、报告查询等,以及管理端的排班管理和数据统计。采用.NET Core Web API与uni-app实现前后端分离,支持跨平台小程序开发。数据库选用SQL Server 2012,并通过读写分离与索引优化提升性能。部署方案包括Windows Server与负载均衡设计,确保高可用性。同时针对API差异、数据库老化及高并发等问题制定应对措施,保障系统稳定运行。推荐使用Postman、Redgate等工具辅助开发,提升效率与质量。
554 0
|
开发框架 算法 .NET
C#/.NET/.NET Core技术前沿周刊 | 第 15 期(2024年11.25-11.30)
C#/.NET/.NET Core技术前沿周刊 | 第 15 期(2024年11.25-11.30)
285 6
|
开发框架 Cloud Native .NET
C#/.NET/.NET Core技术前沿周刊 | 第 16 期(2024年12.01-12.08)
C#/.NET/.NET Core技术前沿周刊 | 第 16 期(2024年12.01-12.08)
330 6
|
自然语言处理 物联网 图形学
.NET 技术凭借其独特的优势和特性,为开发者们提供了一种高效、可靠且富有创造力的开发体验
本文深入探讨了.NET技术的独特优势及其在多个领域的应用,包括企业级应用、Web应用、桌面应用、移动应用和游戏开发。通过强大的工具集、高效的代码管理、跨平台支持及稳定的性能,.NET为开发者提供了高效、可靠的开发体验,并面对技术更新和竞争压力,不断创新发展。
752 7
|
开发框架 安全 .NET
在数字化时代,.NET 技术凭借跨平台兼容性、丰富的开发工具和框架、高效的性能及强大的安全稳定性,成为软件开发的重要支柱
在数字化时代,.NET 技术凭借跨平台兼容性、丰富的开发工具和框架、高效的性能及强大的安全稳定性,成为软件开发的重要支柱。它不仅加速了应用开发进程,提升了开发质量和可靠性,还促进了创新和业务发展,培养了专业人才和技术社区,为软件开发和数字化转型做出了重要贡献。
396 5
|
机器学习/深度学习 人工智能 物联网
.NET 技术:引领未来开发潮流
.NET 技术以其跨平台兼容性、高效的开发体验、强大的性能表现和安全可靠的架构,成为引领未来开发潮流的重要力量。本文深入探讨了 .NET 的核心优势与特点,及其在企业级应用、移动开发、云计算、人工智能等领域的广泛应用,展示了其卓越的应用价值和未来发展前景。
299 5
|
传感器 人工智能 供应链
.NET开发技术在数字化时代的创新作用,从高效的开发环境、强大的性能表现、丰富的库和框架资源等方面揭示了其关键优势。
本文深入探讨了.NET开发技术在数字化时代的创新作用,从高效的开发环境、强大的性能表现、丰富的库和框架资源等方面揭示了其关键优势。通过企业级应用、Web应用及移动应用的创新案例,展示了.NET在各领域的广泛应用和巨大潜力。展望未来,.NET将与新兴技术深度融合,拓展跨平台开发,推动云原生应用发展,持续创新。
230 4
|
开发框架 .NET C#
.NET 技术凭借高效开发环境、强大框架支持及跨平台特性,在软件开发中占据重要地位
.NET 技术凭借高效开发环境、强大框架支持及跨平台特性,在软件开发中占据重要地位。从企业应用到电子商务,再到移动开发,.NET 均展现出卓越性能,助力开发者提升效率与项目质量,推动行业持续发展。
436 4