ASP.NET MVC 2右键菜单和简单分页实例讲解

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

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

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

我们只要在这个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 2中的右键菜单和一个相当简单的分页,希望能够帮助到大家熟练掌握分页功能的实现。

(0)

相关推荐

  • ASP.NET MVC+EF在服务端分页使用jqGrid以及jquery Datatables的注意事项

    一直想自己做个博客网站,技术路线是用ASN.NET MVC5+EF6(Code First)+ZUI+各种Jquery插件,有了这个想法之后就开始选择UI,看了好多bootstrap的模板之后,发现即使你用了bootstrap还是要自己写css样式,都是自学的,前端真的很垃圾,在网上找了很多UI,以下是各种UI的地址,需要的可以去看看: H-ui:http://www.h-ui.net/H-ui.admin.shtml ,是一个前端大牛弄得,模仿bootstrap,做适合中国网上的UI. Ama

  • ASP.NET MVC4 Razor模板简易分页效果

    一.无数据提交 第一步,建立一个 Controller命名为PageIndex的空控制器,自定义一个方法如下: public ActionResult PageIndex(string action, string controller, int currentPage, int pageCount) { //int count = db.Product.Count(); ViewBag.PageCount = pageCount;//从操作中获取总数据页数将传入分页视图页面 ViewBag.C

  • ASP.NET MVC分页的实现方法

    在这一篇文章中,我们将学习如何在MVC页面中实现分页的方法.分页功能是一个非常实用,常用的功能,当数据量过多的时候,必然要使用分页.在今天这篇文章中,我们学习如果在MVC页面中使用PagedList.Mvc包来实现分页功能. 1) 安装PagedList.Mvc 首先,我们需要安装分页组件包,在Visual Studio 2010中点击[项目]-[管理NuGet程序包],打开NuGet包管理器窗体,在该窗体中,选择"联机"标签,然后搜索pagedlist,如下图所示.点击"安

  • asp.net mvc4 mysql制作简单分页组件(部分视图)

    在开始做mysql分页功能组件前,便设定的是要有一定可复用性.先在项目里Views文件夹下右键新建名为_PaginationComponent.cshtml,这里html及css我采用的bootstrap分页组件,这可以参考http://v3.bootcss.com/components/. 先将生成项目效果截图呈上: 这里有需要预先知道的,是mysql分页查询与mssql分页查询实现不同点在于,mysql支持limit语句,limit格式为 limit pageIndex*pageSize,p

  • ASP.NET MVC4 HtmlHelper扩展类,实现分页功能

    1.扩展HtmlHelper类方法ShowPageNavigate public static HtmlString ShowPageNavigate(this HtmlHelper htmlHelper, int currentPage, int pageSize, int totalCount) { var redirectTo = htmlHelper.ViewContext.RequestContext.HttpContext.Request.Url.AbsolutePath; page

  • ASP.NET MVC 5使用X.PagedList.Mvc进行分页教程(PagedList.Mvc)

    ASP.NET MVC中进行分页的方式有多种,但在NuGet上使用最广泛的就是用PagedList.X.PagedList.Mvc进行分页.(原名为:PagedList.Mvc,但是2014年开始,作者将项目名称改名字为"X.PagedList.Mvc"),用这个插件的话会非常便利,大家可以试试,接下来将给大家讲下如何安装这个NuGet插件. ASP.NET MVC 5使用X.PagedList.Mvc进行分页教程(原名为PagedList.Mvc) 1.工具--NuGet 程序包管理

  • ASP.NET同步分页MvcPager使用详解

    最近接触了一下MvcPager,来做个笔记吧 其实,我喜欢前后端分离,分页这种东西前端负责的地方,后端不用顾问,这里的MvcPager有点让我想起服务器控件,毕竟用到了HtmlHelper. 但是挺方便的..以前我们写分页,后端会封装一Page<T>类,现在我们可以用MvcPager给我们提供好的PageList<T>,功能有点类似,不过MvcPager的功能要强大. 一.使用MvcPager这个控件,需要以下支持 1.后端MvcPager.dll引用: 2.前端需要Css:pag

  • 利用ASP.NET MVC+Bootstrap搭建个人博客之打造清新分页Helper(三)

    0. 没有找到一款中意的分页插件,又不想使用现成的(丑到爆),所以自己动手造一个吧 先看下效果(其实也不咋滴...): 我的小站地址:我的Bootstrap小站; PS:(问博客园:为什么老是删我的置顶随便?上一篇阅读量都快500了,也分分钟给我从首页删掉...真是无语了<博客园地址:http://www.cnblogs.com/haust/p/5615946.html> ). 有点另类,分页直接是在后台拼接好html,然后发送到前台的: 1. 分页容器: <div class=&quo

  • ASP.NET MVC分页和排序功能实现

    分页和排序,应该是软件开发中,需要必知必会的技能了,对于分页,网上很多教程,当然,别人终究是别人的,只有自己理解,会了,并且吸收之后,再用自己的语言,传授出来,这才是硬道理.好了,废话说多了.现在我们进入正题: 这里,我打算使用EF Code-First方式分页控件就是用PagedList.MVC,来做分页,对于排序,实现的思路是,加载数据出来之后,默认是升序排序,然后我们点击一下相应的列标题,就按照该字段降序排序,查数据.思路明确了,就开始干吧! 1.首先新建一个空白的MVC项目,在Model

  • asp.net MVC分页代码分享

    本文实例为大家分享了MVC分页代码,供大家参考,具体内容如下 using System.Collections.Generic; using System.Collections.Specialized; using System.Linq; using System.Web; using System.Text; using System.Web.Mvc; using System.Web.Routing; using System.Data.Objects.DataClasses; name

随机推荐