zoukankan      html  css  js  c++  java
  • MVC分页

    朋友炒股两个月赚了10万,我帮他推广一下公众号,把钱用来投资总比放银行连通货膨胀都跑不过里强硬核离职,在家炒股 ,这是他每天的日志,有些经验是花钱也买不到的。

    前言

    前几天在博客上挂了个群链接,就是上面的链接,从博客上进群不少网友,从上一段教程来看,mvc入门问题集中在了以下两个部分“Contrl与View数据传递(多表数据)”和数据分页。因此,今天晚上熬夜写了个小Demo以帮助更多的初学者快速入门,由于时间仓促,有不明白的地方请加群咨询,甭管会不会,有问必答。觉得有帮助别忘了点个赞哈

    目录

    一、Contrl与View数据传递(多表数据)

    二、分页控件介绍

    三、MVC源码说明

    四、源码下载

    五、mvc入门教程目录

    一、Contrl与View数据传递(多表数据)

    园子也是用mvc来写的,我们用园子的首页举个例子。

    上图我只切了园子首页的一部分,如图所示,共分为4块内容。而这4块内容可能来自于不同的数据表,假设:第一、二块内容来自Blog表、第三、四块内容来自AD表。此时MVC一般有两种方式进行Control与View的交互。

    1)ViewBag变量方式

    使用4个ViewBag变量进行数据传递,Data1、Data2、Data3、Data4的数据直接从数据库里调。

    Control中伪代码如下所示:

    1         public ActionResult CnBlogIndex()
    2         {
    3             ViewBag.Data1 = Data1;
    4             ViewBag.Data2 = Data2;
    5             ViewBag.Data3 = Data3;
    6             ViewBag.Data4 = Data4;
    7             return View();
    8         }

    View中伪代码如下所示:

     1 //第一块内容
     2 @foreach (Data1 data in (ViewBag.Data1 as IEnumerable<Data1>))
     3 {
     4     <tr>
     5         <td>@Html.DisplayFor(model => data.ID)</td>
     6     </tr>
     7 }
     8 //第二块内容
     9 @foreach (Data2 dat1 in (ViewBag.Data2 as IEnumerable<Data2>))
    10 {
    11     <tr>
    12         <td>@Html.DisplayFor(model => data.ID)</td>
    13     </tr>
    14 }
    15 //第三块内容
    16 @foreach (Data3 data in (ViewBag.Data3 as IEnumerable<Data3>))
    17 {
    18     <tr>
    19         <td>@Html.DisplayFor(model => data.ID)</td>
    20     </tr>
    21 }
    22 //第四块内容
    23 @foreach (Data4 data in (ViewBag.Data4 as IEnumerable<Data4>))
    24 {
    25     <tr>
    26         <td>@Html.DisplayFor(model => data.ID)</td>
    27     </tr>
    28 }

    2)ViewModel方式(推荐)

    什么是ViewModel?ViewModel就是针对视图做的Model,让Model更加适合于View。Data1、Data2、Data3、Data4的数据直接从数据库里取出,然后组装给ViewModel,ViewModel做为整个页面的数据载体进行数据传递:

    ViewModel中的伪代码如下所示:

    1     public class CnBlogIndex {
    2         List<Data> Data1 { get; set; }
    3         List<Data> Data2 { get; set; }
    4         List<Data> Data3 { get; set; }
    5         List<Data> Data4 { get; set; }
    6     }

    Control中伪代码如下所示:

             public ActionResult CnBlogIndex()
             {
                 ViewModel.CnBlogIndex CnBlogIndex = new ViewModel.CnBlogIndex();
                 CnBlogIndex.Data1 = Data1;
                 CnBlogIndex.Data2 = Data2;
                 CnBlogIndex.Data3 = Data3;
                 CnBlogIndex.Data4 = Data4;
                 return View(CnBlogIndex);
             }

    View中伪代码如下所示:

     1 @model CnBlogIndex
     2 @foreach (var info in Model.Data1)
     3     {
     4         <tr>
     5             <td>info.**</td>
     6         </tr>
     7     }
     8 @foreach (var info in Model.Data2)
     9     {
    10         <tr>
    11             <td>info.**</td>
    12         </tr>
    13     }
    14 @foreach (var info in Model.Data3)
    15     {
    16         <tr>
    17             <td>info.**</td>
    18         </tr>
    19     }
    20 @foreach (var info in Model.Data4)
    21     {
    22         <tr>
    23             <td>info.**</td>
    24         </tr>
    25     }

    两种传递数据的方式都可以完成我们的正常工作,但个人更推荐使用ViewModel将一个页面的信息进行聚合,这样虽然多了一些工作量,但可以使整体结构更清晰,同进也更易于维护。

    二、分页控件介绍

    很多朋友在刚接触mvc的时候都喜欢自己写分页,此处推荐使用开源分页控件“MvcPager”,相信大家在使用webform的时候大多使用的分页控件都是aspnetpager(Webdiyer出品),这个mvc分页控件也是Webdiyer出品(很好很强大),官方博客:http://www.webdiyer.com/,我在前面的教程中也提到过这个分页控件,但群友们反应我前面的教程分页控件带有查询条件时,翻页后条件消失。因此,在些我对分页控件再次进行讲解,并加上查询条件。

    效果如下图所示:

    查询条件使用文本框,并且使用参数的形式在view与control中进行传输。这里只是使用了mvcpager的一种方式(get查询方式),mvcpager有各种分页的方式,如ajax分页等。有兴趣的可以下载代码研究下,官方地址如下:http://www.webdiyer.com/mvcpager/

    ViewModel中的代码如下:

     1 using System;
     2 using System.Collections.Generic;
     3 using System.Linq;
     4 using System.Web;
     5 using Webdiyer.WebControls.Mvc;
     6 
     7 namespace MvcApplication.Models.Home
     8 {
     9     public class Index
    10     {
    11         public string BlogURL { get; set; }
    12         //当前用户
    13         public Model.User User { get; set; }
    14         //信息列表
    15         public PagedList<Model.Info> Infos { get; set; }
    16     }
    17 }

    Control中的代码如下:

     1         public ActionResult Index(int? id = 1, string title = null)
     2         {
     3             //用户
     4             Model.User User = new Model.User();
     5             User.UserID = 1;
     6             User.UserName = "mvc技术交流(群号:384185065)";
     7             //信息列表(此处使用分页控件提出数据)
     8             int totalCount = 0;
     9             int pageIndex = id ?? 1;
    10             int pageSize = 2;
    11             PagedList<Model.Info> InfoPager = DAL.Info.GetInfos(title, pageSize, (pageIndex - 1) * 2, out totalCount).AsQueryable().ToPagedList(pageIndex, pageSize);
    12             InfoPager.TotalItemCount = totalCount;
    13             InfoPager.CurrentPageIndex = (int)(id ?? 1);
    14             //数据组装到viewModel
    15             Models.Home.Index index = new Models.Home.Index();
    16             index.BlogURL = "http://www.cnblogs.com/iamlilinfeng/archive/2013/04/01/2992432.html";
    17             index.User = User;
    18             index.Infos = InfoPager;
    19             //------------------使用ViewBig变量传递数据---------------//
    20             //ViewBag.PagerData = InfoPager;
    21             return View(index);
    22         }

    View中的代码如下:

     1 @model MvcApplication.Models.Home.Index
     2 @using Webdiyer.WebControls.Mvc;
     3 <title>MVC入门教程</title>
     4 
     5 @*----------------------------------ViewModel中的博客地址,mvc入门教程博客地址:http://www.cnblogs.com/iamlilinfeng/archive/2013/04/01/2992432.html-----------------------*@
     6 @Html.Label("博客地址:") @Model.BlogURL
     7 <br />
     8 @Html.Raw("--------------------------------------------------------------------------------------------------------------------------------------------------------------------")
     9 <br />
    10 
    11 @*----------------------------------ViewModel用户实体信息-----------------------*@
    12 @Html.LabelFor(model => model.User.UserID) @Html.Raw("") @Model.User.UserID
    13 <br />
    14 @Html.LabelFor(model => model.User.UserName) @Html.Raw("") @Model.User.UserName
    15 <br />
    16 
    17 @*----------------------------------ViewModel数据信息分页-----------------------*@
    18 @Html.Raw("--------------------------------------------------------------------------------------------------------------------------------------------------------------------")
    19 <br />
    20 @using (Html.BeginForm("Index", "Home", new RouteValueDictionary { { "id", "" } }, FormMethod.Get))
    21 {
    22     @Html.Label("查询条件(标题):") <input name="title" value="@Request.QueryString["title"]" /><input type="submit" value="查询" />
    23 }
    24 <table>
    25     <tr>
    26         <th>编号</th>
    27         <th>标题</th>
    28         <th>内容</th>
    29     </tr>
    30     @foreach (var info in Model.Infos)
    31     {
    32         <tr>
    33             <td>@Html.DisplayFor(model => info.InfoID)</td>
    34             <td>@Html.DisplayFor(model => info.Title)</td>
    35             <td>@Html.DisplayFor(model => info.Content)</td>
    36         </tr>
    37     }
    38     @*----------------------------------使用ViewBig变量传递数据-----------------------*@
    39     @*@foreach (Model.Info info in (ViewBag.PagerData as IEnumerable<Model.Info>))
    40         {
    41             <tr>
    42                 <td>@Html.DisplayFor(model => info.InfoID)</td>
    43                 <td>@Html.DisplayFor(model => info.Title)</td>
    44                 <td>@Html.DisplayFor(model => info.Content)</td>
    45             </tr>
    46         }*@
    47 </table>
    48 @Html.Pager(Model.Infos, new PagerOptions
    49         {
    50             PageIndexParameterName = "id",
    51             ShowPageIndexBox = true,
    52             FirstPageText = "首页",
    53             PrevPageText = "上一页",
    54             NextPageText = "下一页",
    55             LastPageText = "末页",
    56             PageIndexBoxType = PageIndexBoxType.TextBox,
    57             PageIndexBoxWrapperFormatString = "请输入页数{0}",
    58             GoButtonText = "转到"
    59         })
    60 @Html.Raw("共:") @Model.Infos.TotalItemCount @Html.Raw("页,")
    61 @Model.Infos.CurrentPageIndex @Html.Raw("/") @Model.Infos.TotalPageCount @Html.Raw("")

    三、MVC源码说明

    开发环境:vs2013,mvc4。解决方案共分为3个项目。MvcApplication为mvc展示层,Model为数据实体与数据库一一对应,DAL链接数据进行数据的存取。

    1,MvcApplication--Models--Index,为针对View中的Index的ViewModel,用于组装Index所需要的所有数据

    2,Model--Info,为信息实体,对应信息表。用于讲解分页数据

    3,DAL--Sqlcommon,调用分页存储过程的类。

    View中展示的数据是由:User、List<Info>共同来提供的,有了这个示例后,再多的数据都可以通过该方式进行组装。

    四、源码下载

    点击我下载源码

    五、mvc入门教程目录

    0.无废话MVC入门教程目录页

    1.无废话MVC入门教程一[概述、环境安装、创建项目]

    2.无废话MVC入门教程二[第一个小Demo]

    3.无废话MVC入门教程三[路由设置及视图入门]

    4.无废话MVC入门教程四[视图中的Layout使用]

    5.无废话MVC入门教程五[Control与View交互]

    6.无废话MVC入门教程六[Model中的验证规则]

    7.无废话MVC入门教程七[Control中使用AOP]

    8.无废话MVC入门教程八[MvcPager分页控件的使用]

    9.无废话MVC入门教程九[实战一:用户注册与登陆]

    10.无废话MVC入门教程十[实战二:用户管理]

    版权:http://www.cnblogs.com/iamlilinfeng

  • 相关阅读:
    matplotlib笔记(subplot)
    matplotlib笔记(plot)
    [时间序列处理]python中计算日期差
    Ubuntu 16.04 apt-get更换为国内阿里云源
    居然忘了range()的用法
    elasticsearch+kibana使用中踩的坑,持续更新中。
    Elasticsearch+Logstash+Kibana教程
    ubuntu下anaconda从清华镜像的下载安装及配置
    ubuntu 解决node 修改代码不能同步刷新的问题
    ubuntu18.04 解决sublimie不能使用中文
  • 原文地址:https://www.cnblogs.com/iamlilinfeng/p/4075292.html
Copyright © 2011-2022 走看看