SQL数据网页表格化

开发工具与关键技术：SQL 2019、 Visual Studio 2019、  jQuery

撰写时间：2021年 月 日

想要把SQL的数据展现在网页上，就要先把数据引入到我们的资源管理器中，再到视图中请求数据，在控制器中建立相对应的接收方法，再把接收到的请求查找到后传回视图，接收到传回数据之后再把数据序列化后，再在网页上显示。

一：把SQL数据引入到资源管理器

打开解决“解决方案资源管理器”找到“Models”，找到“添加”，然后点击“新建项”，为了方便理解，看箭头指引

1.打开项目-->

2.转到视图-->

3.解决方案资源管理器-->

4.Modele-->

5.添加-->

6.新建项-->

7.已安装-->

8.Visual C#-->

9.Web-->数据-->

10.ADO.NET实体数据模型-->

11.把名字改成合适的名称-->

12.添加-->

13.来自数据库的EF设计器-->

14.下一步-->

15.新建链接-->

16.服务器名称到SQL中复制过来-->

17.选择自己常用的登陆方式-->

18.选择需要添加的数据库-->

最后点击确定即可

等加载完成就可以看到我们引入的数据了

二、然后我们需要在控制器中创建一个查询方法

public ActionResult SqlStudent()

        {

            //link标准查询语句

            var student = from tb in myModel.Student

                          select tb;

            return Json(student,JsonRequestBehavior.AllowGet);

            //设置返回值并允许get获取数据

        }

建立好之后再到视图中建立一个页面加载事件，当页面加载完成之后使用get提交的方法提交请求

       $(function () {

            $.get("/SQL/SqlStudent", function (jsonData) {

                strss(jsonData);

            })

        })

一定要注意控制器的名字,因为每个人创建控制器的时候名字都有可能不一样,看清楚你的控制器的名字是什么再填上去;

因为我下面还需要用到数据化后的数据,使用我又建立了一个函数,用来处理要显示的数据,再在需要用到的地方调用一下就可以了,但要记得传入一个相对应的参数;

function strss(jsonData) {

            str = ""

            for (i = 0; i < jsonData.length; i++) {

                str += '<tr><td>' + (i + 1) + '</td><td>' + jsonData[i].StudentName + '</td><td>' + jsonData[i].StudentSex + '</td><td>' + jsonData[i].StudentNum + '</td><td>' + jsonData[i].StudentClass + '</td><td><input type="radio" value="' + jsonData[i].StudentID + '" name="sel"/></td></tr>'

            }

            $("#tdStudent").empty()

            $("#tdStudent").append("<tr><th>序号</th><th>姓名</th><th>性别</th><th>电话号码</th><th>班级</th><th>编辑</th></tr >" + str)

        }

然后打开调试就可以看到下面这种效果了,在接下来的几篇文献中我会逐步讲解下面的“添加”“修改”“删除”以及“自定义查询”这些功能都是基于SQL数据库上的内容进行的，并不是直接在页面上做修改，如需完整代码请留言。