右键菜单非常方便,很多时候会用到。这篇文章将使用一个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

转载于:https://www.cnblogs.com/waw/archive/2011/08/29/2158649.html

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

  1. 一起谈.NET技术,在MVC2.0使用Lodop为WEB打印提出完美解决方案

    通过好友CallHot介绍Lodopweb打印控件.由于是国人开发的,故这两天认真了研究下,打算在未来的项目中使用.现将学习成果与园友分享.如果存在不足的地方,希望您指出. 具体的实现步骤如下: 一. ...

  2. 一起谈.NET技术,ASP.NET MVC2.0在Tab页中实现异步无刷新分页

    概述 很多地方都存在以Tab页来呈现数据的方式,比如网易.新浪.搜狐.QQ等知名的门户网站的首页,还有大家熟知的博客园首页,都是用了tab页来显示数据.大家之所以喜欢用Tab,因为它能大大的增加显示数 ...

  3. Asp.Net MVC2.0 Url 路由入门---实例篇

    本篇主要讲述Routing组件的作用,以及举几个实例来学习Asp.Net MVC2.0 Url路由技术. 接着上一篇开始讲,我们在Global.asax中注册一条路由后,我们的请求是怎么转到相应的Vi ...

  4. ASP.NET MVC2+MSSQL+Godaddy

    先感谢一下博客园,在网上浪了这么长时间,现在发现还是博客园的文章技术含量要高一点! 现在言归正传,最近在课外学习ASP.NET MVC,也在微软的官网上学了一些例子教程,现在刚好有机会可以实践一下,一 ...

  5. Asp.net MVC2.0系列文章-MVC简介篇

    使用微软VS工具开发Web应用程序主要有两种方式:一种是常用的创建Asp.net Web Forms,另外一种就是今天着重介绍的Asp.net  MVC. <?XML:NAMESPACE PRE ...

  6. 【飞秋】Asp.net MVC2 model验证 看似美好,实则让人失望。

    最近几天看了一下Asp.net MVC2的model验证,初始的感觉让我眼前一亮,于是去看了看它的源代码,Validation和Metadata部分应该是从Dynamic Data哪里得到的灵感,一切 ...

  7. Asp.net MVC2.0系列文章-运行Web MVC2.0 Demo

    安装VS2010 首先安装VS2010,安装过程请参考文章: http://www.cnblogs.com/ywqu/archive/2010/01/27/1657450.html. 创建第一个MVC ...

  8. 浅谈虚拟化技术下的云安全如何处置

    浅谈虚拟化技术下的云安全如何处置 近年来,云计算是目前非常热门的一个研究领域,其实它并不是一种全新的技术,而是许多技术的融合体,包括分布式计算.动态和拓展等各种各样的技术算法,而虚拟化技术是云计算里最 ...

  9. Oxite移植到ASP.NET MVC2 BETA 笔记(关于Html.RenderPartialFromSkin)

    在将Oxite移植到asp.net mvc2 beta平台后,经过一系列有关"方法调用"变更的修正后,终于能够通过编译运行起来了!(移植后的源码参见:http://ecubecms ...

最新文章

  1. github里的默认域_GitMAD 一款扫描Github上的敏感信息和数据泄漏工具
  2. 【Android 系统开发】Android JNI 之 JNIEnv 解析
  3. commons-lang常用工具类StringEscapeUtils使用--转
  4. 恢复xfs文件系统superblock实验
  5. STL札记2(序列容器vector、list、deque)
  6. jdbc oracle clob blob long类型数据
  7. 一些javascript的经验 (3)
  8. Spring.Net学习笔记(3)-创建对象
  9. 422通讯测试软件,通讯软硬件实现通讯测试
  10. PC微信防撤回多开补丁 v0.6
  11. 期末了给孩子们一些鼓励吧!用Python批量制作【纸质】奖状的方法请查收!
  12. USB协议详解第20讲(USB包-帧首包SOF)
  13. 苹果手机开热点电脑/安卓手机无法链接?
  14. QNET:APP弱网络测试专家
  15. 计算机主机如何睡眠,win7怎样设置电脑休眠_w7电脑设置休眠的详细步骤
  16. 泰坦尼克号生存预测(超详细)
  17. linux centos7和xshell在黑暗中摸索记
  18. [蓝桥杯][2013年第四届真题]带分数(DFS,next_permutation两种方法)
  19. 青阳网络文件传输系统 kiftd 1.0.17 正式发布
  20. 蒲慕明写给实验室学生的信

热门文章

  1. K:hash(哈希)碰撞攻击
  2. Spring4 MVC json问题(406 Not Acceptable)
  3. MySQL中优化sql语句查询常用的30种方法
  4. nginx+php-fpm动静分离
  5. Android菜鸟的成长笔记(11)——Android中的事件处理
  6. 接收到开始本地截图的命令:videoshot.exe 解决方法
  7. ADExchange2010 简单安装部署(二)
  8. Linux/Ubuntu sudo不用输入密码的方法
  9. 利用反射,泛型,静态方法快速获取表单值到Model。
  10. hp 服务器系统无法启动不了怎么办,HP Elite X2 1011 G1 笔记本电脑 - 电脑无法启动至预启动执行环境...