将数据库中的表单信息返回到页面上显示出来，查询数据库表单信息通过控制器查询,再将数据返回到MVC视图。
数据库创建表单信息
就是在数据库中创建一个表单信息，在到vs中去调用数据库里的数据。
在里面教程中尽量跟我的命名一样，这样可以防止在vs代码中调用不会出现数据库名称错误。已经创建了表单信息可以不用看（注意设置主键ID以及给主键ID设置标识规范）
https://blog.csdn.net/TBDBTUO/article/details/119331879
VS新建web项目
这里我用的是VS2015，在新建项中C#语言下web,ASP.NET Web应用程序（有些同学可能没有应该是没有下载该拓展）。
新建后会弹出一下图片的模态框体，模板选择MVC,为一下项添加文件夹和核心引用哪里一样选择MVC.
有些同学可能会弹出下面这个模态窗体没有登陆账号，可以直接取消跳过。最后创建好了。
web项连接数据库
首先要连接MOdels也就是数据库，连接完后通过控制器获取连接到的数据库中的数据，接着返回到视图页面的表格，接着就是显示出来。
https://blog.csdn.net/TBDBTUO/article/details/116518489
控制器代码
以下是查询数据库表单信息功能的控制器代码。
using BMS_MVC.EntityClass;
using BMS_MVC.Models;
using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;
using System.Text.RegularExpressions;
using System.Web;
using System.Web.Mvc;
namespace BMS_MVC.Areas.BooksManagement.Controllers
{
public class LibraryInformationController : Controller
{
// GET: BooksManagement/LibraryInformation
// 图书管理/图书馆信息
//实例化实体模型
BMS_MVCEntities1 myModel = new BMS_MVCEntities1();
/// <summary>
/// 图书馆信息页面
/// </summary>
/// <returns></returns>
public ActionResult Index()
{
return View();
}
/// <summary>
/// 1.0 查询图书馆信息
/// </summary>
/// <returns></returns>
public ActionResult SelectUser(LayuiTablePage layuiTablePage, string libraryName, string telephone, string address)
{
var query = (from tbLibrary in myModel.S_library select tbLibrary);
//数据的总条数
int count = query.Count();
List<S_library> listUser = query
.OrderBy(m => m.libraryId)
.Skip(layuiTablePage.GetStartIndex())
.Take(layuiTablePage.limit)
.ToList();
LayuiTableData<S_library> layuiTableData = new LayuiTableData<S_library>();
layuiTableData.count = count;
layuiTableData.data = listUser;
//返回数据
return Json(layuiTableData, JsonRequestBehavior.AllowGet);
}
BMS_MVCEntities1 myModel = new BMS_MVCEntities1();
这条代码实例化数据模型，myModel是自己设置的一个变量，方便下面代码要获取数据库信息是可以通过变量myModel来获取。数据库连接 BMS_MVCEntities1这是我的数据库名称需要改成你的，可以在解决方案资源管理器中——>Models文件夹下一路点开最后一个就是。
var query = (from tbLibrary in myModel.S_library select tbLibrary);
这是一条Layui查询语句，创建tbLibrary变量到myModel(实体数据模型)中查询S_library数据库表单全部数据。
可以加几条查询判断，比如下面这行代码查询到libraryName(图书馆名称)数据判断是否不等于0，IsNullOrEmpty 表示空字符串，如果是则输出已查询到的此条数据，否就表示没有此条数据页面显示无数据。
if (!string.IsNullOrEmpty(libraryName))
{
query = query.Where(m => m.libraryName.Contains(libraryName));
}
创建listuer用来接收表单数据，Skip()跳过序列中指定数量的元素，然后返回剩余的元素，比如有15条数据一页显示10条数据，跳过前面的数据从最后面开始显示十条数据。Take()从序列的开头返回指定数量的连续元素。
下面行代码获取总共有多少条数据，及查询到数据库的表单信息。用LayuiTableData的类来统一接收这些信息，再用return Json(layuiTableData, JsonRequestBehavior.AllowGet);返回到到页面上。
MVC视图代码
首先新建一个MVC的视图在以下代码中右键——>添加视图。
public ActionResult Index()
{
return View();
}
MVC下选择视图，MVC 5视图点击添加。
弹出此添加视图模态窗，使用布局页是默认勾引选的，把勾去掉然后添加。
这里面的表格我用到的是layui框架，这个需要自行导入。
下面MVC视图代码
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<link href="~/Plugins/layui/css/layui.css" rel="stylesheet" />
<!--封装样式表-->
<link href="~/Content/css/User.css" rel="stylesheet" />
</head>
<body>
<div class="col-12">
<table id="tabUser" class="layui-hide" layui-filter="tabUser"></table>
</div>
//里面elem中是一个ID，这个的作用相当于把这个表格给放到上面HTML里面，绑定容器，是存放并显示该数据表格。
<script src="~/Plugins/jquery-3.2.1.min.js"></script>
<script src="~/Plugins/layui/layui.all.js"></script>
<!--自定义JS-->
<script src="~/Content/js/customfunction.js"></script>
<script>
var tabUser, layer, layuiTable, laydate;
//1、==============页面加载==============
$(document).ready(function () {
layui.use(['layer', 'table', 'laydate'], function () {
layer = layui.layer;
layuiTable = layui.table;
laydate = layui.laydate;
laydate.render({
elem: '#foundTime',
type: "date",
range: true,
trigger: 'click'//解决Laydate绑定input元素一闪而过的问题
});
//渲染表格
tabUser = layuiTable.render({
elem: "#tabUser",//table的ID HTML元素的ID
data: [],//多条件查询，先初始化空数据
cols: [[
{ title: '序号', type: 'numbers' },//numbers 序号列，title设定标题名称,width: 160 指定宽度，align 指定对其方式
{ title: '图书馆名称', field: 'libraryName', width: 250, align: 'center' },
{ title: '联系电话', field: 'telephone', width: 150, align: 'center' },
{ title: '住址', field: 'address', width: 250, align: 'center' },
{ title: '操作', templet: setOperate, align: 'center' }
]],
page: {
limit: 10, //指定每页显示的条数
limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50], //每页条数的选择项
}, //开启分页
});
//调用查询方法
tabUserSearch();
});
});
function tabUserSearch() {
//获取页面输入数据
//图书馆名称
var libraryName = $("#libraryName").val();
if (libraryName == undefined) {
libraryName = "";
}
//联系电话
var telephone = $("#telephone").val();
if (telephone == undefined) {
telephone = "";
}
//地址
var address = $("#address").val();
if (address == undefined) {
address = "";
}
//表格重载
tabUser.reload({
url: '/LibraryInformation/SelectUser',
//这里需要改成你的控制其中的引用类
where: {
libraryName: libraryName,
telephone: telephone,
address: address,
},
page: {
curr: 1//重新从第一页开始
}
});
}
这几行代码会得到一个基础表格里面有五列数据分别是：序号、图书馆名称、联系电话、住址、操作，右边width:px表示这一列数据显示的宽度可以自行调节，下面有两行代码指定显示每页的代码数量，以及下面自己可选的想要一页代码显示几行的选择项。