NET Core TagHelper实现分页标签

这里将要和大家分享的是学习总结使用TagHelper实现分页标签,之前分享过一篇使用HtmlHelper扩展了一个分页写法地址可以点击这里http://www.jb51.net/article/89272.htm,今天分享的是net core的另外一种能写分页标签的方法具体是继承TagHelper,如下将讲述实现一个简单分页和总要注意步奏。

1.继承父类TagHelper并重写Process方法(这里还有一个异步的方法ProcessAsync各位可以自己尝试下)

2.注意:怎么在试图页面使用自定义标签

3.注意:怎么识别标签中的属性

4.注意:自定义标签类怎么获取分页参数

5.效果展示

下面一步一个脚印的来分享:

1.继承父类TagHelper并重写Process方法(这里还有一个异步的方法ProcessAsync各位可以自己尝试下)

首先咋们定义一个类取名为PagerTagHelper,这里需要继承TagHelper类,重写Process方法,TagHelper位于命名空间Microsoft.AspNetCore.Razor.TagHelpers下面,因为这里要实现的效果是mvc分页,所以还需要通过nuget获取引用Microsoft.AspNetCore.Mvc.TagHelpers,引用后如图:

这里的版本是1.0.0-rc2-final,之前直接通过nuget引用默认版本是1.0.0版本如图本地已经下载了两个版本:

各位需要注意版本一直,不然还原程序包的时候会出错

2.注意:怎么在试图页面使用自定义标签

如果要在html中使用定义的标签,需要注意命名规则如图上面定义的类:

标签类必须以TagHelper结尾,然后在试图中使用如图所示:

这里的pager就是上面PagerTagHelper对应的标签,去掉固定的TagHelper然后剩余Pager,因为html标签都是小写所以是pager,咋们先在Process中打个断点然后F5调试,可以看到进入了咋们重写的方法中,这样pager标签就和标签类对应上了

3.注意:怎么识别标签中的属性

咋们在自定义标签类中定义个属性(这里因为要做分页所以这里直接定义个分页参数的对应属性类当做标签类的属性),分页参数类如下:

/// <summary>
 /// 分页option属性
 /// </summary>
 public class MoPagerOption
 {
  /// <summary>
  /// 当前页 必传
  /// </summary>
  public int CurrentPage { get; set; }
  /// <summary>
  /// 总条数 必传
  /// </summary>
  public int Total { get; set; }

  /// <summary>
  /// 分页记录数(每页条数 默认每页15条)
  /// </summary>
  public int PageSize { get; set; }

  /// <summary>
  /// 路由地址(格式如:/Controller/Action) 默认自动获取
  /// </summary>
  public string RouteUrl { get; set; }

  /// <summary>
  /// 样式 默认 bootstrap样式 1
  /// </summary>
  public int StyleNum { get; set; }
 }

然后定义的属性PagerOption截图如:

这里要让定义的属性在标签中能使用需要注意在html中小写,然后首个单词后面以'-'和后面的单词隔开,下面是试图标签中使用定义的属性:

注意:

*单词大小写

*首个单词后'-'分割(属性名称是PagerOption对应pager-option这个细节不容忽视)

4.注意:自定义标签类怎么获取分页参数

这里用到上面第3点的属性节点来传递参数,先看一下咋们在Controller定义的列表数据和分页数据封装如下:

// GET: Articles
  public async Task<IActionResult> Index(int id = 1)
  {

   var artiles = _context.Article;
   var pageOption = new MoPagerOption
   {
    CurrentPage = id,
    PageSize = 2,
    Total = await artiles.CountAsync(),
    RouteUrl = "/Articles/Index"
   };

   //分页参数
   ViewBag.PagerOption = pageOption;

   //数据
   return View(await artiles.OrderByDescending(b => b.CreateTime).Skip((pageOption.CurrentPage - 1) * pageOption.PageSize).Take(pageOption.PageSize).ToListAsync());
  }

然后在试图对应的自定义分页标签属性中:

代码如下:

1 <pager pager-option="ViewBag.PagerOption as MoPagerOption"></pager>

就是这么简单,通过标签属性直接传递到标签类中的属性上,需要更详细跟中的朋友可以F5调试下看看结果,以上就是这次分享的注意点,需要注意这几个output.TagName = "div"这个是定义一个包含了重新元素的父级元素,output.TagMode是标签在html中表现形式,再来就是自定义标签类的全部代码:

using Microsoft.AspNetCore.Razor.TagHelpers;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace Text.Core.Extend
{

 #region 分页扩展 PageExtend

 /// <summary>
 /// 分页option属性
 /// </summary>
 public class MoPagerOption
 {
  /// <summary>
  /// 当前页 必传
  /// </summary>
  public int CurrentPage { get; set; }
  /// <summary>
  /// 总条数 必传
  /// </summary>
  public int Total { get; set; }

  /// <summary>
  /// 分页记录数(每页条数 默认每页15条)
  /// </summary>
  public int PageSize { get; set; }

  /// <summary>
  /// 路由地址(格式如:/Controller/Action) 默认自动获取
  /// </summary>
  public string RouteUrl { get; set; }

  /// <summary>
  /// 样式 默认 bootstrap样式 1
  /// </summary>
  public int StyleNum { get; set; }
 }

 /// <summary>
 /// 分页标签
 /// </summary>
 public class PagerTagHelper : TagHelper
 {

  public MoPagerOption PagerOption { get; set; }

  public override void Process(TagHelperContext context, TagHelperOutput output)
  {

   output.TagName = "div";

   if (PagerOption.PageSize <= 0) { PagerOption.PageSize = 15; }
   if (PagerOption.CurrentPage <= 0) { PagerOption.CurrentPage = 1; }
   if (PagerOption.Total <= 0) { return; }

   //总页数
   var totalPage = PagerOption.Total / PagerOption.PageSize + (PagerOption.Total % PagerOption.PageSize > 0 ? 1 : 0);
   if (totalPage <= 0) { return; }
   //当前路由地址
   if (string.IsNullOrEmpty(PagerOption.RouteUrl))
   {

    //PagerOption.RouteUrl = helper.ViewContext.HttpContext.Request.RawUrl;
    if (!string.IsNullOrEmpty(PagerOption.RouteUrl))
    {

     var lastIndex = PagerOption.RouteUrl.LastIndexOf("/");
     PagerOption.RouteUrl = PagerOption.RouteUrl.Substring(0, lastIndex);
    }
   }
   PagerOption.RouteUrl = PagerOption.RouteUrl.TrimEnd('/');

   //构造分页样式
   var sbPage = new StringBuilder(string.Empty);
   switch (PagerOption.StyleNum)
   {
    case 2:
     {
      break;
     }
    default:
     {
      #region 默认样式

      sbPage.Append("<nav>");
      sbPage.Append(" <ul class=\"pagination\">");
      sbPage.AppendFormat("  <li><a href=\"{0}/{1}\" aria-label=\"Previous\"><span aria-hidden=\"true\">«</span></a></li>",
            PagerOption.RouteUrl,
            PagerOption.CurrentPage - 1 <= 0 ? 1 : PagerOption.CurrentPage - 1);

      for (int i = 1; i <= totalPage; i++)
      {

       sbPage.AppendFormat("  <li {1}><a href=\"{2}/{0}\">{0}</a></li>",
        i,
        i == PagerOption.CurrentPage ? "class=\"active\"" : "",
        PagerOption.RouteUrl);

      }

      sbPage.Append("  <li>");
      sbPage.AppendFormat("   <a href=\"{0}/{1}\" aria-label=\"Next\">",
           PagerOption.RouteUrl,
           PagerOption.CurrentPage + 1 > totalPage ? PagerOption.CurrentPage : PagerOption.CurrentPage + 1);
      sbPage.Append("    <span aria-hidden=\"true\">»</span>");
      sbPage.Append("   </a>");
      sbPage.Append("  </li>");
      sbPage.Append(" </ul>");
      sbPage.Append("</nav>");
      #endregion
     }
     break;
   }

   output.Content.SetHtmlContent(sbPage.ToString());
   //output.TagMode = TagMode.SelfClosing;
   //return base.ProcessAsync(context, output);
  }

 }
 #endregion
}

5.效果展示

分页效果:

右键查看浏览器中的html元素:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • asp.net正则表达式删除指定的HTML标签的代码

    如果全盘删除里面的 HTML 标签,可能会造成阅读上的困难(比如 a, img 这些标签), 最好是删除一部分,保留一部分. 正则表达式里,判断 包含某些字符串 是非常容易理解的,但是如何判断 不包含某些字符串 (是字符串,不是字符,是某些,不是某个) 确实是个费解的事. 复制代码 代码如下: <(?!((/?\s?li)|(/?\s?ul)|(/?\s?a)|(/?\s?img)|(/?\s?br)|(/?\s?span)|(/?\s?b)))[^>]+> 这个正则是判断HTML标签不

  • 解读ASP.NET 5 & MVC6系列教程(13):TagHelper

    在新版的MVC6中,微软提供了强大的TagHelper功能,以便让我们摆脱如下的臃肿代码: @Html.LabelFor(model => model.FullName) @Html.EditFor(model => model.FullName) @Html.ValidationMessageFor(model => model.FullName) 引入新功能TagHelper以后,我们只需要这样定义就可以了,代码如下: @addTagHelper "*, Microsoft

  • Asp.net后台把脚本样式输出到head标签中节省代码冗余

    最近在学习开发服务器控件,其它就少不了为控件注册js和css之类的资源文件,或者直接注册纯脚本样式.其中就遇到如下问题: 1.  注册的资源文件或纯脚本样式在生成的页面中都不在head标签中(当然这个不影响页面功能)   2. 一个页面使用多个一样的控件时,会出现重复输入(出现多余代码) 第一个问题说到底也不是什么问题,主要是看个人喜欢.在浏览器里查看页面源代码时,也许就成了问题了,源代码很不整洁,要是内容多时问题就更突出.本来想找脚本,却在head标签里找不到,只能到其它标签里找了.(不知道有

  • asp.net core新特性之TagHelper标签助手

    今天开始,我就来说说asp.net core的新特性,今天就说说TagHelper标签助手.虽然学习.net,最有帮助的就是microsoft的官方说明文档了,里面把一些使用说明都写的非常清楚,但奈何.net core放入文档微软还没来得及翻译,对于英文不好的人来说简直就是看的艰辛.所以今天就来学习学习这标签助手,和博客园大佬分享分享经验. 想看Microsoft官方文档和Git项目的可以直接点击以下传送门~~ asp.net core 官方文档 asp.net core github项目 说起

  • Visual Studio 2017下ASP.NET CORE的TagHelper智能提示解决办法

    之前在VS2017RC中就发现该问题,安装了依赖,但是前段一直点不出来asp-for,后来查了发行说明, 才知道在VS2017rc中暂时无法解决,所以一直等到VS2017正式版的发布,急冲冲的装好, 建了一个demo项目,还是无法出现TagHelper的智能提示. 不死心,我又去扒拉了一下VS2017的发行说明,找了一下已知问题: 发现有这一行: 然后我根据提示,进入到Github页面,果然找到了TagHelper为何不能使用的描述: 同样,页面给出来了解决办法,安装一个Razor服务的扩展:

  • asp.net 过滤图片标签的正则

    复制代码 代码如下: public static string replaceImgUrl(string html) { if (html == null) return ""; System.Text.RegularExpressions.Regex regex = new System.Text.RegularExpressions.Regex(@"\<img[^\>]+\>", System.Text.RegularExpressions.R

  • NET Core TagHelper实现分页标签

    这里将要和大家分享的是学习总结使用TagHelper实现分页标签,之前分享过一篇使用HtmlHelper扩展了一个分页写法地址可以点击这里http://www.jb51.net/article/89272.htm,今天分享的是net core的另外一种能写分页标签的方法具体是继承TagHelper,如下将讲述实现一个简单分页和总要注意步奏. 1.继承父类TagHelper并重写Process方法(这里还有一个异步的方法ProcessAsync各位可以自己尝试下) 2.注意:怎么在试图页面使用自定

  • ASP.NET Core MVC中的标签助手(TagHelper)用法

    1.什么是标签助手 Tag Helper 标签助手是服务端代码能够参与在 Razor 文件中创建和呈现HTML元素.例如,内置的 ImageTagHelper 可以将版本号追加到图像名称.无论何时更改图像,服务器都会为图像生成新的唯一版本,因此可以保证客户端获取当前图像(而不是过时的缓存图像).内置的标签助手多用于常见任务,例如创建表单,链接和加载资源等.标签助手是在 C# 中定义的,它们基于元素名称,属性名称或父标签来定位HTML元素.例如,当应用 LabelTagHelper 特性时,内置的

  • JSP自定义分页标签TAG全过程

    首先我们需要在WEB-INF/tld/目录下创建page.tld文件 <?xml version="1.0" encoding="ISO-8859-1"?> <taglib> <tlib-version>1.0</tlib-version> <jsp-version>1.2</jsp-version> <short-name>page</short-name> <u

  • Android入门之ActivityGroup+GridView实现Tab分页标签的方法

    在Android程序中很多客户端软件和浏览器软件都喜欢用Tab分页标签来搭建界面框架.读者也许会马上想到使用TabHost 与 TabActivity的组合,其实最常用的不是它们,而是由GridView与ActivityGroup的组合.每当用户在GridView选中一项,ActivityGroup就把该项对应的Activity的Window作为View添加到ActivityGroup所指定的容器(LinearLayout)中. 先来贴出本例运行的效果图如下: ImageAdapter是本实例的

  • Bootstrap php制作动态分页标签

    学习了下bootstrap,刚好在用分页,就自己写了一个分页,然后结合bootstrap样式展现. bootstrap的分页格式: <ul class="pagination"> <li><a href="#">«</a></li> <li class="active"><a href="#">1</a></li> &l

  • 第九章之路径分页标签与徽章组件

    Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷. 学习要点: 1.路径组件 2.分页组件 3.标签组件 4.徽章组件 本节课我们主要学习一下 Bootstrap 的四个组件功能:路径组件.分页组件.标签组件和徽章组件. 一.路径组件 路径组件也叫做面包屑导航. //面包屑导航 <ol class="breadcrumb"> <li>

  • python中Tkinter实现分页标签的示例代码

    Tkinter实现UI分页标签显示: Input页,红色部分为当前Frame的位置,下半部分为第一页的子标签:三页标签的显示内容各不相同.实现分页显示的核心组件为Radiobutton,Radiobutton只有一个选项能够生效,使用参数indicatoron=0能够将Radiobutton显示为Button的形状,通过选定的Radiobutton将原有的Frame forget掉,同时,将预定的Frame pack,实现分页的效果.使用时要将更换的组件放入一个Frame中,定义一个函数进行选定

  • Mybatis常用分页插件实现快速分页处理技巧

    在未分享整个查询分页的执行代码之前,先了解一下执行流程. 1.总体上是利用mybatis的插件拦截器,在sql执行之前拦截,为查询语句加上limit X X 2.用一个Page对象,贯穿整个执行流程,这个Page对象需要用Java编写前端分页组件 3.用一套比较完整的三层entity,dao,service支持这个分页架构 4.这个分页用到的一些辅助类 注:分享的内容较多,这边的话我就不把需要的jar一一列举,大家使用这个分页功能的时候缺少什么就去晚上找什么jar包即可,尽可能用maven包导入

  • Bootstrap和Java分页实例第二篇

    关于此文 运用第一篇分页的例子,结果以失败告终.在网上又寻找了很多例子.大多是都是这一种.着手开发的项目采用spring MVC框架.符合需求.摘下来,试了一试. 网上的例子总是少一些东西.经过一番折腾.终于搞定了.下面分享出来,供参考. 分页基本逻辑思想懂了,重点是在于怎么实现.怎么实现更好.还需要进一步思考. 配置xml-pager.tld <?xml version="1.0" encoding="UTF-8" ?> <taglib xmln

  • 新闻内页-JS分页

    '//判断内容里是不是包含这个分页标签 if instr(cinfo,"[NextPage]")>0 thenflag=1elseflag=0end if '//设置参数<script language="Javascript" >var Text,PageSize,flagText="<%=DealJsText(cinfo)%>"; PageSize=1500;flag=<%=flag%>;</s

随机推荐