zoukankan      html  css  js  c++  java
  • asp.net mvc简单实现基于Razor的分页控件

    最近在写一些web应用了解了一下asp.net mvc发现的确好用,所以直接就干上了。不过在使用asp.net mvc的Razor模板的情况并不向传统webform那样可以使用控件。但从Razor的功能上已经具备相关代替的功能,只是从Razor角度来说不是我们平常说的控件而是子模板。由于Razor可以根据自己需求把功能拆分到子模板中,然后通过RenderPage方法输出。从设计的手段上来看完全可以把分页控件封装成一个子的cshtml,在需要的时候引用上就是了。

    作为一个控件的设计其最重要的环节是隔离和独立性,在这方面Razor也考虑得比较周到,通过PageData可以简单地进行模板之间的数据偶合问题。下面通过Razor实现一个简单的分页控件,在实现过程只需要编写一个简单的cshtml的模板即可。在使用上也并不需要引用什么代码或DLL,直接在需要的地方嵌入相关cshtml则可以分页控件的功能。

    参数制定

    一个控件要输出信息必须制定相关的数据规范,一个简单的分页控件其实只需要两个参数即可以,分别当前页索引和总页数。可以在Razor模板的顶部声音一下数据规范

    @{
        int pageindex = (int)PageData["pageindex"];
        int spitindex = 0;
        int pagecount = (int)PageData["pagecount"];
    }

    这两上参数就是告诉使用者在调用RenderPage输入的时候必须带上这两个参数值.

    分页URL制定

    在一些数据查询中往往在URL上会带上一些相关参数,所以在输入分页URL的时候需要简单地处理一下。

    @functions{
        public static string GetUrl(int index)
        {
            System.Collections.Specialized.NameValueCollection querystring = HttpContext.Current.Request.QueryString;
            System.Text.StringBuilder sb = new System.Text.StringBuilder();
            sb.Append("?").AppendFormat("pageindex=" + index);
            foreach(string key in querystring.Keys)
            {
                if (key != "pageindex")
                    sb.AppendFormat("&{0}={1}", key, HttpContext.Current.Server.UrlEncode(querystring[key]));
            }
            return sb.ToString();
        }
    }

    简单地把pageindex附加到当前url querystring即可.

    分页内容输出

    有了以上信息那构建一个分页内容输出就是件简单的事情了。

    <div class="pagebar">
        <ul>
        
        <li id="pageinfo"><a>@Html.Raw(pageindex + 1) / @pagecount</a></li>
            @if (pageindex > 0)
            {
                <li><a href="@GetUrl(pageindex-1)">Previous</a> </li>
            }
            @{ spitindex = pageindex - 2;}
            @if (spitindex > 4)
            {
                
                <li><a href="@GetUrl(0)">1</a> </li>
                <li><a href="@GetUrl(spitindex - 2)">...</a> </li>
            }
            else
            {
                for (int i = 0; i < spitindex; i++)
                {
                
                <li><a href="@GetUrl(i)">@Html.Raw(i + 1)</a> </li>
    
                }
            }
            @for (int i = pageindex - 2; i < pageindex; i++)
            {
                if (i >= pageindex || i < 0)
                {
                    continue;
                }
                
                <li><a href="@GetUrl(i)">@Html.Raw(i+1)</a> </li>
                
            }
            <li><a id="selectpage"><b>@Html.Raw(pageindex+1)</b> </a></li>
            @for (int i = pageindex + 1; i < pagecount; i++)
            {
                if (i >= pageindex + 3)
                {
                    break;
                }
                     
                <li><a href="@GetUrl(i)">@Html.Raw(i+1)</a> </li>
                
            }
            @{ spitindex = pageindex + 3; }
            @if (pagecount - 4 > spitindex)
            {
                <li><a href="@GetUrl(spitindex + 2)">...</a> </li>
                <li><a href="@GetUrl(pagecount - 1)">@pagecount</a> </li>
            }
            else
            {
                for (int i = spitindex; i < pagecount; i++)
                {
                        
                <li><a href="@GetUrl(i)">@Html.Raw(i+1)</a> </li>
                }
            }
            @if (pageindex != pagecount - 1)
            {
                          
                <li><a href="@GetUrl(pageindex + 1)">Next</a> </li>
                
            }
        </ul>
    </div>

    使用控件

    控件使用非常简单只需要在Razor通过RenderPage输出即可

    @RenderPage("~/views/controls/pagebar.cshtml", new { pageindex = Model.PageIndex, pagecount = Model.PageCount })

    控件效果

     

  • 相关阅读:
    常用SQL语句大全总结
    修改 Mac 默认 PHP 运行环境
    mac下更新自带的PHP版本到5.6或7.0
    apache php 开启伪静态
    酒店迎接新技术变革:用智能手机开门
    百度地图显示多个标注点
    百度地图api简单使用方法
    Spring mvc 配置详解
    Spring MVC入门知识总结
    Bootstrap 按钮
  • 原文地址:https://www.cnblogs.com/smark/p/3385866.html
Copyright © 2011-2022 走看看