ASP.NET MVC-制作可排序的表格组件-PagedList版

环境:
win10

参考:
学习ASP.NET MVC(十一)——分页 - DotNet菜园 - 博客园
https://www.cnblogs.com/chillsrc/p/6554697.html
ASP.NET MVC+EF框架实现分页_ef 异步分页-CSDN博客
https://blog.csdn.net/qq_40052237/article/details/106599528


本文略去CRUD代码,默认读者可以连接数据库实现增删改查。之前写过:

ASP.NETMVC-简单例子-数据库查询+razor使用+项目发布_mvc怎么数据库搜索-CSDN博客
https://blog.csdn.net/pxy7896/article/details/139837179

目录

  • 效果
  • 准备工作
  • 思路
  • 实现
    • ViewModel
    • 前端
    • 主页面
    • 主页面控制器
  • 彩蛋
    • 前端
    • 后端

效果

在这里插入图片描述
在这里插入图片描述

准备工作

  1. 使用NuGet安装PagedList.Mvc,安装完成后PagedList也会被安装好。
    在这里插入图片描述
  2. 可选:使用BeginForm时需要异步提交,所以使用jquery.unobtrusive-ajax.min.js。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-ajax-unobtrusive/3.2.6/jquery.unobtrusive-ajax.min.js"></script>

可以下载放到Scripts文件夹下,使用BundleConfig引入。

思路

跟上一篇文章类似,区别是ViewModel里使用IPagedList<>,连带着前端和后端都有变化。下面直接放代码了。

上一篇:
ASP.NET MVC-制作获取数据并分页的组件-原生代码版-CSDN博客
https://blog.csdn.net/pxy7896/article/details/140372682

实现

ViewModel

    public class ViewMyObject
    {
        public IPagedList<MyObject> MyObject { get; set; }
        public string Search { get; set; } // 关键词
        public string Stype { get; set; } // sur-type
        public string SortBy { get; set; } // asc or desc
        public string PageSize { get; set; } // 每页多少个对象
        public int TotalRows { get; set; } // 总共有多少条数据
    }

前端

需要注意的有两点:

  1. Ajax.BeginForm可以发送异步请求,直接更新UpdateTargetId的内容,这个直接更新整个cshtml就可以了;
  2. BeginForm下,@Html.XX中形成的元素id与name一致,并且是可以跟指定的Action中的形参一致的:
    在这里插入图片描述
  3. @Html.PagedListPager可以非常灵活地使用,通过设置AjaxOptions可以异步地更新数据。

给这个片段起名SearchIndex,内容如下:

@model xxx.ViewMyObject
@using PagedList.Mvc

@{
    ViewBag.Title = "查询";
}

<div id="resultDiv">
    @using (Ajax.BeginForm("SearchIndex", "Home", new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "resultDiv" }))
    {
        <p>
            种类: @Html.DropDownList("Category", "All")
            名称: @Html.TextBox("searchString")
            排序: @Html.DropDownList("sortBy", "不排序")
            每页显示
            @Html.DropDownList("pageSize", "10")
            条数据
            <input type="submit" value="查询" />
        </p>
    }



    @if (Model != null)
    {
        <table>
            <!-- 与上一篇完全一致,略 -->
        </table>
		<!-- 翻页 -->
        <div>
            共 @Model.TotalRows 条数据,第@(Model.MyObject.PageCount < Model.MyObject.PageNumber ? 0 : Model.MyObject.PageNumber)页,共 @Model.MyObject.PageCount 页

            @Html.PagedListPager(Model.MyObject,
                page => Url.Action("SearchIndex", new {
                    category = Model.Stype,
                    search = Model.Search,
                    sortBy = Model.SortBy,
                    page,
                    pageSize = Model.PageSize
                }),
                PagedListRenderOptions.EnableUnobtrusiveAjaxReplacing(
                    new PagedListRenderOptions {
                        Display = PagedListDisplayMode.IfNeeded,
                        DisplayLinkToFirstPage = PagedListDisplayMode.Never,
                        DisplayLinkToLastPage = PagedListDisplayMode.Never,
                        DisplayLinkToIndividualPages = true,
                        MaximumPageNumbersToDisplay = 5,
                        DisplayLinkToPreviousPage = PagedListDisplayMode.Always,
                        DisplayLinkToNextPage = PagedListDisplayMode.Always
                    },
                    new AjaxOptions {
                        HttpMethod = "GET",
                        UpdateTargetId = "resultDiv",
                        InsertionMode = InsertionMode.Replace
                    }
                )
            )

        </div>
    }

</div>

主页面

与上一篇一致:

@Html.Partial("SearchIndex", Model.ViewMyObject)

主页面控制器

首先,必须要在主页面带的对象的类定义里增加ViewMyObject类的变量,并且在初始化主页面的对象时,也初始化这个ViewMyObject类的变量。

其次,数据更新的代码如下所示,需要注意的点有:

  1. 通过ViewBag传递的变量,在初始化主页面的对象时也要初始化;
  2. 如果要带搜索功能的话,一定要先完成搜索/筛选,最后写分页。如果提前写了分页,那搜索功能会只局限在当前页面;
  3. 初始化ViewMyObject时,对于IPagedList<>类型的变量,不能直接使用来自类似这样的语句的变量var myObject = from m in db.myObject select m;,而要经过一个OrderBy操作,不然会报错:
The method 'Skip' is only supported for sorted input in LINQ to Entities. The method 'OrderBy' must be called before the method 'Skip'.

在这里插入图片描述
只要取消蓝圈部分的注释就不会报错了。

更新表格数据的代码如下:

public ActionResult SearchIndex(string Category, string searchString, string sortBy, int? page, string pageSize)
{
    MyDbContext db = new MyDbContext();
	// 构造类型选择框
    var cateLst = new List<string>();
    var cateQry = from d in db.myObject
                  orderby d.stype
                  select d.stype;
    cateLst.AddRange(cateQry.Distinct());
    ViewBag.Category = new SelectList(cateLst);

    //排序选项
    var orderbyLst = new Dictionary<string, string>
    {
        { "名称升序", "name_asc" },
        { "名称降序", "name_desc" }
    };
    ViewBag.sortBy = new SelectList(orderbyLst, "Value", "Key");
	
	// 每页放多少数据的选项
    ViewBag.pageSize = new SelectList(new List<string>() { "20", "50", "100"});
	// 获取原始数据
    var myObject = from m in db.myObject
                select m;

    // searchString匹配name
    if (!String.IsNullOrEmpty(searchString))
    {
        myObject = myObject.Where(b => b.name.Contains(searchString));
    }

    // sort by name order
    switch (sortBy)
    {
        case "name_asc":
            myObject = myObject.OrderBy(b => b.name);
            break;
        case "name_desc":
            myObject = myObject.OrderByDescending(b => b.name);
            break;
        default:
            myObject = myObject.OrderBy(b => b.id);
            break;
    }
    // sort by type
    if (!string.IsNullOrEmpty(Category)) {
        //string tmpType = Category.Replace("'", "''");
        myObject = myObject.Where(x => x.stype == Category);
    }
    
    //分页
    int pageItems = 10;// 每页放几个
    if (!string.IsNullOrEmpty(pageSize)) {
        pageItems = int.Parse(pageSize);
    }
    
    //  view model
    ViewMyObject vbp = new ViewMyObject();
    int currentPage = (page ?? 1);
    IPagedList<MyObject> pageMyObject = myObject.ToPagedList(currentPage, pageItems);
    vbp.MyObject = pageMyObject;
    vbp.Stype = Category;
    vbp.SortBy = sortBy;
    vbp.Search = searchString;
    vbp.PageSize = pageSize;
    vbp.TotalRows = myObject.Count();

    return PartialView("SearchIndex", vbp);
}

彩蛋

如果要在单独的网页上更新,不需要做成组件,就比较简单了。此时不需要考虑异步,搜索按钮的提交和页面选择都可以直接制作url。

前端

需要修改两处:

  1. 使用Html.BeginForm
  2. 翻页部分直接用Url.Action
@using (Html.BeginForm("SearchIndex", "Home", FormMethod.Get))
{}

@Html.PagedListPager(Model.MyObject, page => Url.Action("SearchIndex", new { 查询参数 }))

后端

修改SearchIndex(),将return PartialView("SearchIndex", 对象);改为return View(对象)即可。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/800148.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

嵌入式linux相机 框图

摄像头读取数据显示到LCD流程 重点&#xff1a;摄像头数据&#xff08;yuyv&#xff0c;mjpeg&#xff0c;rgb&#xff09;&#xff08;640,320&#xff09;与LCD显示数据&#xff08;RGB&#xff09;&#xff08;480&#xff0c;240&#xff09;不同&#xff1b;需要转换&…

数据结构——考研笔记(三)线性表之单链表

文章目录 2.3 单链表2.3.1 知识总览2.3.2 什么是单链表2.3.3 不带头结点的单链表2.3.4 带头结点的单链表2.3.5 不带头结点 VS 带头结点2.3.6 知识回顾与重要考点2.3.7 单链表的插入和删除2.3.7.1 按位序插入&#xff08;带头结点&#xff09;2.3.7.2 按位序插入&#xff08;不带…

如何使用 GPT?

​通过实例&#xff0c;来展示如何最好地使用 GPT。 生成文字 假设你在写一篇文章&#xff0c;需要在结尾加上这样一句&#xff1a;「California’s population is 53 times that of Alaska.」&#xff08;加州的人口是阿拉斯加州的 53 倍&#xff09;。 但现在你不知道这两个…

Git钩子Hook功能

&#x1f4be; Hook 钩子 目录 &#x1f514; 简介&#x1f514; 常见类型&#x1f514; 如何配置&#x1f514; 使用场景&#x1f514; 示例 &#x1f514; 简介 Git Hooks是Git内置的一种机制&#xff0c;允许在特定事件发生时执行自定义脚本。Git Hook可以在客户端和服务器端…

SpringBoot整合阿里云RocketMQ对接,商业版

1.需要阿里云开通商业版RocketMQ 普通消息新建普通主题,普通组,延迟消息新建延迟消息主题,延迟消息组 2.结构目录 3.引入依赖 <!--阿里云RocketMq整合--><dependency><groupId>com.aliyun.openservices</groupId><artifactId>ons-client</…

[论文笔记]构建基于RAG聊天机器人的要素

引言 今天带来一篇构建RAG的论文笔记&#xff1a;FACTS About Building Retrieval Augmented Generation-based Chatbots。 基于生成式人工智能构建企业聊天机器人迅速成为行业中最受关注的应用之一&#xff0c;旨在提高员工生产力。 然而&#xff0c;构建成功的企业聊天机器…

爬虫-requests和Selenium

1、了解requests的功能 1.1 使用post和get发送请求 HTTP中常见发送网络请求的方式有两种&#xff0c;GET和POST。GET是从指定的资源请求数据&#xff0c;POST是向指定的资源提交要被处理的数据。 GET的用法&#xff1a; import requestsr requests.get("https://www.…

随机过程基础:2.Markov (马尔可夫)过程(2)

纯生过程和纯灭过程 纯生过程&#xff1a;想象一下一个生物种群&#xff0c;比如一群兔子&#xff0c;在没有天敌的理想环境中&#xff0c;食物充足&#xff0c;疾病不存在。在这样的环境下&#xff0c;兔子的种群只会增加&#xff0c;不会减少。纯生过程模型就是用来描述这种情…

Android使用ANativeWindow更新surfaceView内容最简Demo

SurfaceView简介 SurfaceView对比View的区别 安卓的普通VIew,都依赖于当前Activity的Window的surface&#xff0c;这个surface用于承载view树从底到顶绘制出来的所有内容&#xff0c;因此任何一个view需要更新时&#xff0c;都需要把所有view中底到顶进行更新&#xff0c;即使使…

人工智能算法工程师(中级)课程12-PyTorch神经网络之LSTM和GRU网络与代码详解1

大家好,我是微学AI,今天给大家介绍一下人工智能算法工程师(中级)课程12-PyTorch神经网络之LSTM和GRU网络与代码详解。在深度学习领域,循环神经网络(RNN)因其处理序列数据的能力而备受关注。然而,传统的RNN存在梯度消失和梯度爆炸的问题,这使得它在长序列任务中的表现不尽…

【Diffusion学习】【生成式AI】淺談圖像生成模型 Diffusion Model 原理

文章目录 Diffusion Model 是如何运作的&#xff1f;吃额外的1个数字&#xff1a;stepDenoise 模组内部实际做的事情&#xff1a;预测noise如何训练 Noise Predictor Text-to-ImageDDPM 算法 from&#xff1a; https://www.youtube.com/watch?vazBugJzmz-o&listPLJV_el3uV…

深入剖析 Android 开源库 EventBus 的源码详解

文章目录 前言一、EventBus 简介EventBus 三要素EventBus 线程模型 二、EventBus 使用1.添加依赖2.EventBus 基本使用2.1 定义事件类2.2 注册 EventBus2.3 EventBus 发起通知 三、EventBus 源码详解1.Subscribe 注解2.注册事件订阅方法2.1 EventBus 实例2.2 EventBus 注册2.2.1…

无人机之电动系统篇

无人机的动能系统为无人机提供了动力&#xff0c;使无人机能够进行飞行活动。电动系统是无人机动力系统的其中一种。电力系统是将化学能转化为电能&#xff0c;再转化为机械能&#xff0c;为无人机飞行提供动力的系统。电力系统有电池、电调、电机和螺旋桨四个部分组成。 电池…

论文阅读【时间序列】TimeMixer (ICLR2024)

【时间序列】TimeMixer (ICLR2024) 原文链接&#xff1a;TIMEMIXER: DECOMPOSABLE MULTISCALE MIXING FOR TIME SERIES FORECASTING 代码仓库&#xff1a;https://github.com/kwuking/TimeMixer 符号定义 符号含义P用于预测的历史序列长度&#xff08;seq_len&#xff09;F预测…

第七天 SpringBoot与SpringCloud微服务项目交付

Spring Cloud微服务项目交付 微服务扫盲篇 微服务并没有一个官方的定义&#xff0c;想要直接描述微服务比较困难&#xff0c;我们可以通过对比传统WEB应用&#xff0c;来理解什么是微服务。 单体应用架构 如下是传统打车软件架构图&#xff1a; 这种单体应用比较适合于小项…

LVS+Keepalive高可用

1、keepalive 调度器的高可用 vip地址主备之间的切换&#xff0c;主在工作时&#xff0c;vip地址只在主上&#xff0c;vip漂移到备服务器。 在主备的优先级不变的情况下&#xff0c;主恢复工作&#xff0c;vip会飘回到住服务器 1、配优先级 2、配置vip和真实服务器 3、主…

基于hive数据库的泰坦尼克号幸存者数据分析

进入 ./beeline -u jdbc:hive2://node2:10000 -n root -p 查询 SHOW TABLES; 删除 DROP TABLE IF EXISTS tidanic; 上传数据 hdfs dfs -put train.csv /user/hive/warehouse/mytrain.db/tidanic 《泰坦尼克号幸存者数据分析》 1、原始数据介绍 泰坦尼克号是当时世界上…

PyTorch人脸识别

新书速览|PyTorch深度学习与企业级项目实战-CSDN博客 一套基本的人脸识别系统主要包含三部分&#xff1a;检测器、识别器和分类器&#xff0c;流程架构如图11-3所示&#xff1a; 图11-5 检测器负责检测图片中的人脸&#xff0c;再将检测出来的人脸感兴趣区域&#xff08;Reg…

音视频入门基础:H.264专题(13)——FFmpeg源码中通过SPS属性获取视频色彩格式的实现

一、引言 通过FFmpeg命令可以获取到H.264裸流文件的色彩格式&#xff08;又译作色度采样结构、像素格式&#xff09;&#xff1a; 在vlc中也可以获取到色彩格式&#xff08;vlc底层也使用了FFmpeg进行解码&#xff09;&#xff1a; 这个色彩格式就是之前的文章《音视频入门基础…

2024年初级注册安全工程师职业资格考试首次开考!

​2024年初级注册安全工程师考试首次开考&#xff08;注&#xff1a;该考试由各省人事考试局组织考试&#xff09;。目前未取得中级注册安全工程师证书的各位同学&#xff0c;可以关注该考试&#xff0c;毕竟初级考证相对较容易&#xff0c;先去考一个。 目前初安开考地区汇总…