# NetPageDemo

**Repository Path**: selftech/NetPageDemo

## Basic Information

- **Project Name**: NetPageDemo
- **Description**: 使用.Net8.0 (netcore8.0)开发的一个使用mvc的web demo,里边实现了简单的列表查询,分页操作.
OMR用的是SqlSugar,方便强大,易用;
前端用的是bootstrap,也是简单易用;
本项目中主要是自定义了一个ViewComponent部分试图,实现了分页的操作,从此不用自己再去写分页的代码,只需要后端绑定列表,前端只需要一句话引入翻页代码即可.
- **Primary Language**: C#
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-01-10
- **Last Updated**: 2025-01-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<<<<<<< develop
# NetPageDemo(Net8.0)
=======

#### 介绍
使用.Net8.0 (netcore8.0)开发的一个使用mvc的web demo,里边实现了简单的列表查询,分页操作.
OMR用的是SqlSugar,方便强大,易用;
前端用的是bootstrap,也是简单易用;
本项目中主要是自定义了一个ViewComponent部分试图,实现了分页的操作,从此不用自己再去写分页的代码,只需要后端绑定列表,前端只需要一句话引入翻页代码即可.

#### 软件架构
后端 .Net 8.0 MVC
前端样式 bootstrap



#### 运行项目

第一步.  创建MySql数据库 初始化一个名称是demo的数据库，如果您有数据库，并且表中有数据，可直接跳到第四步。


```
-- 创建数据库脚本
create database demo default character set utf8mb4 collate utf8mb4_unicode_ci;
```
第二步.  在数据库中创建notice表. 


```
-- demo.notice definition
CREATE TABLE `notice` (
  `id` varchar(100) NOT NULL COMMENT '主键id',
  `title` varchar(200) DEFAULT '' COMMENT '新闻标题',
  `content` varchar(100) DEFAULT '' COMMENT '新闻内容',
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_0900_ai_ci;
```
第三步.  在表中插入查询的数据，可多次执行


```
    在notice表中插入查询的记录；
    INSERT INTO demo.notice(id, title, content)VALUES(uuid(), '通知名称', '通知内容');
```

第四步.  在appsettings.json 文件中修改自己的数据库链接字符串,确保能链接到自己的数据库,本示例用的是Mysql数据库. 


```
{
        "Logging": {
            "LogLevel": {
                "Default": "Information",
                "Microsoft.AspNetCore": "Warning"
            }
        },
        "DBProvider": "MySql",
        //注意不要换行
        "DBConnectionString": "server=localhost;database=数据库名;user=用户;password=数据库密码;port=端口;
                                pooling=true;max pool size=20;persist security info=True;charset=utf8mb4;",
        "AllowedHosts": "*"
    }
```

第五步.  在项目目录下创建Component文件夹，并在文件夹下创建部分试图Pagination.cs，目录结构如下
![输入图片说明](NetPageDemo/wwwroot/images/component.png)

Pagination.cs代码如下：

```
using NetPageCommon;
using Microsoft.AspNetCore.Mvc;

namespace WebDemo.Component 
{
    public class Pagination: ViewComponent
    {
        public IViewComponentResult Invoke(PageModelSample page)
        {
            // 这里是获取数据和处理逻辑的地方

            return View(page);
        }

    }
}
```
第六步.  中Shared试图目录中创建Components文件夹，创建部分试图的文件夹Pagination，默认文件名是Default.cshtml，目录结构如下
![输入图片说明](NetPageDemo/wwwroot/images/view.png)

Default.cshtml代码如下：

```
@model NetPageCommon.PageModelSample;


<nav aria-label="...">
    <ul class="pagination">

        @{
            int page = Model.page;
            int size = Model.size;
            int total = Model.total;
            int count = total / size;
            int yushu = total % size;
            string url = Model.url;
            if (yushu > 0)
            {
                count += 1;
            }

            if (page == 1)
            {
                <li class="page-item disabled" title="已经是第一页">
                    <span class="page-link">首页</span>
                </li>
                <li class="page-item disabled" title="已经是第一页">
                    <span class="page-link">上一页</span>
                </li>
                // <li class="page-item active" aria-current="page">
                //     <span class="page-link">1</span>
                // </li>
            }
            else
            {
                int pagePrev = page - 1;
                <li class="page-item"><a class="page-link" href="@url?page=1&size=@size">首页</a></li>
                <li class="page-item">
                    <a class="page-link" href="@url?page=@pagePrev&size=@size">上一页</a>
                </li>
               
            }


            if (count <= 10 || page <= 5)
            {

                for (int i = 1; i <= (count<=10?count:10); i++)
                {
                    <li class="page-item @(page==i?"active":"")"><a class="page-link" href="@url?page=@i&size=@size">@i</a></li>
                }
            }
            else if ((count - 5) > page)
            {
                int start = page - 4;
                int end = (page + 5) > count ? count : page + 5;
                for (int i = start; i <= end; i++)
                {
                    <li class="page-item @(page==i?"active":"")"><a class="page-link" href="@url?page=@i&size=@size">@i</a></li>
                }
            }
            else
            {
                int start = count - 10;
                int end = count;
                for (int i = start; i <= end; i++)
                {
                    <li class="page-item @(page==i?"active":"")"><a class="page-link" href="@url?page=@i&size=@size">@i</a></li>
                }
            }



            // <li class="page-item"><a class="page-link" href="@url?page=3&size=@size">3</a></li>

            if (page == count)
            {
                <li class="page-item disabled" title="已经是最后一页">
                    <a class="page-link" href="#">下一页</a>
                </li>
                <li class="page-item disabled" title="已经是最后一页">
                    <a class="page-link" href="#">末页</a>
                </li>
            }
            else
            {
                int pageNext = page + 1;
                <li class="page-item">
                    <a class="page-link" href="@url?page=@pageNext&size=@size">下一页</a>
                </li>
                <li class="page-item">
                    <a class="page-link" href="@url?page=@count&size=@size">末页</a>
                </li>
            }

            // <li class="page-item">
            //     <input type="text" placeholder="输入页码"  width="60" />
            // </li>
            // <li class="page-item">
            //     <a class="page-link" href="@url?page=@count&size=@size">跳转</a>
            // </li>
        }
    </ul>
</nav>
```

第七步.  在自己的controller中定义action,按PageModel实体的格式,返回实体


```
public IActionResult Index(int page=1, int size=2)
    {
        int total = 0;
        SqlSugarClient db = DbHelper.GetNewDb();
        List notices = db.Queryable().ToPageList(page,size,ref total);
        ViewBag.dbconnstring = Common.SystemConfig.DBConnectionString;
        PageModel pageModel = new PageModel();
        pageModel.url =  "/Notice/Index";
        pageModel.list = notices;
        pageModel.page = page;
        pageModel.size = size;
        pageModel.total = total; 
        return View(pageModel);
    }
```

 
第八步.  自己中页面绑定好数据列表,中列表的下方加上如下分页代码

```
@{
        PageModelSample page = new PageModelSample();
        page.total = Model.total;
        page.page = Model.page;
        page.size = Model.size;
        page.url = Model.url;
        
    } 
    @await Component.InvokeAsync("Pagination", new { page = page });
```



第九步.  运行自己的代码,看到结果.



#### 参与贡献

1.  Fork 本仓库
2.  新建 Feat_xxx 分支
3.  提交代码
4.  新建 Pull Request


#### 特技

1.  使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2.  Gitee 官方博客 [blog.gitee.com](https://blog.gitee.com)
3.  你可以 [https://gitee.com/explore](https://gitee.com/explore) 这个地址来了解 Gitee 上的优秀开源项目
4.  [GVP](https://gitee.com/gvp) 全称是 Gitee 最有价值开源项目，是综合评定出的优秀开源项目
5.  Gitee 官方提供的使用手册 [https://gitee.com/help](https://gitee.com/help)
6.  Gitee 封面人物是一档用来展示 Gitee 会员风采的栏目 [https://gitee.com/gitee-stars/](https://gitee.com/gitee-stars/)