通过jQuery把数据库里面的数据进行增删查改

之前我们在数据库里面做过简单的增删查改，这次我们在jQuery里面把数据库映射过来，在jQuery里面做增删查改

数据库映射过来之后，我们则去到我们刚刚新建的LinqSelect的控制器当中去写一个查询语句

定义一个方法。返回一个json，json里面有两个参数，一个参数是你要返回的数据，一个参数是jsonRequestBehavior.AlloowGet允许get请求

去查刚刚通过映射过来的表，怎么查？

现在所有方法的最上边，写图表1上面的这句代码

图表 1

这个实体模型里面就有很多个实体类，等会就要调用这里面的实体类和我的数据库进行一个查询操作

接下来，我们要在控制器定义方法里面写一个linq标准查询语句

之前我们要查什么数据是一个int类型或具体什么什么类型，现在通过一个var代替他在去一个名称接下来写语句

在数据库里面查询语句的写法（见图表2）

图表 2

所以我们这里写的是在var 名称后面先是一个from，后面跟你一个自己定义的变量，再是一个in；然后是myModel下面的学生表

然后select查询，如果直接把自己定义的那个变量放来，它查询的就是整个表的数据，然后在的数据进行返回（见图表3）

图表 3

语句查询完了之后，我请求是在地址栏上面请求的，如何在地址栏上面请求？

在地址栏上面输入控制器的名称以及控制器里面的一个方法，然后回车即可

如果我想要在视图那边发送请求了，怎么做？

先添加一个视图，把相对应的插件引入

页面一加载就去发送这个请求，就有一个ready事件，之前我们学了通过get和post去请求数据。

我们这里通过get去请求数据（见图表4）

图表 4

在控制台中输出的则是一组数组，数组里面则是一个一个对象，数据已经请求出来了，但是我想要通过表格的形式把数据显示出来，怎么做？

我们先添加一个静态表格，这里需要用到Bootstrap里面插件，先把对应的插件引入

先引入一个container容器，里面放一个表格（见图表5）仅供参考，具体见自己引入数据里面的那张表格

图表 5

以上表格是静态的，已经写死的表格，现在我先想要动态的添加表格，把表格内容先注释掉，保留表头的内容，把数据库里面提取的数据动态的生成表格数据

我们要先把jsondata的数据取出来，把取出来的数据对应的添加到td标签里面

第一种方法：通过循环从数组里面取数据（见图表6）

图表 6

第二种方法：通过each（）方法（见图表7）

图表 7

新增

先找到我们之前写的那个代码，在表格上面添加一个新增按钮，给它添加一个类，调整一下布局

你点击一下新增按钮，他就出现一个模态窗体，你在模态窗体里面去添加你想要增加的数据，然后保存，一个新增操作就完成了。所以这里需要用到Bootstrap组件中的一个模态窗体，找到跟你想要的模态窗体把它复制到代码中来，然后对他进行修改，修改成我们想要的模态窗体。具体代码我就不展示了（具体效果看图表8）主要是修改了模态窗体内容的部分，给它添加了from表单，然后修改了一下标题以及下面保存和关闭按钮。给模态窗体添加一个id

图表 8

模态窗体修改完了，我点击新增然后弹出模态窗体这么一个效果

想要实现这么一个效果，就要把Bootstrap里面js插件引入进去

定义一个方法，给新增按钮绑定点击事件

通过模态窗体的id，有一个modal的方法()，这个方法有两个参数，一个是show：显示；一个是hide：隐藏

模态窗体弹出之后，我们填完数据之后，将页面上的数据提交到控制器中，完成一个新增的操作

先定义一个方法，在模态窗体里面的保存中给它绑定一个点击事件

保存就是获取表单里面的数据，获取的方法有两种方式：可以一个个获取，也可以通过序列化表单序列化成一个数组

第一种方式：将表单序列成一个数组

通过id选择器找到你需要序列化的一个from表单，后面跟一个serializeArray（）

序列化成数组之后，通过post进行一个提交操作

我们去控制器写对应的方法（见图表9）

注意：图表9里面化框的是数据库映射过来的类，使用数据库映射过来的类，必须一定要引入它的命名空间

怎么引入命名空间？

如果你引入数据库里面的类，类下面会出现红色波浪线，你把鼠标放到代码上面会出现一个未找到命名空间之类的提示，他下方就有一个显示可能的修补程序，你就点击显示可能的修补程序，他就会出现一些修补的代码，你点击using这句代码即可，下面的代码不要去点，你点了下面的代码它会帮你重新去定义命名空间和类名。你点using在控制台最上面就会出现一句代码，他就是把Models下面的命名空间引入进来了，就可以使用它下面的实体类了

图表 9

通过这种方式去接收新增的数据

控制器中的方法写完了，我们就知道把数据提交到哪里了

数据新增成功了，模态窗体就该关闭，关闭模态窗体就和打开模态窗体一样，只是显示属性变成了隐藏属性

模态窗体是关闭了，但是他整个页面没有进行刷新，刷新还是要手动去刷新，

Window.location.reload（）；这句代码是模态窗体关闭之后，整体进行刷新

就算你不填写你要新增的数据，直接保存它也新增成功，但是他返回的值全为null值，所以要去做一个判断，判断它的值是否为空

图表 10

图表10是通过for循环去判断他。只能判断他是不是为空，不能具体判断是哪个数据为空

图表11是通过id元素获取input值，使用if去判断他，这种判断方式可以准确的知道那个数据为空，但是比较麻烦，需要一个一个的去获取元素的value值，一个一个的进行判断

 

 

 

 

 图表 11

修改

修改分为3个步骤：

1. 选择需要修改的数据，弹出修改的模态窗体
2. 在模态窗体中显示需要修改的数据
3. 修改模态窗体中的保存功能（修改功能）

在页面上双击显示一个模态窗体，就先要准备一个模态窗体，修改模态窗体和我们新增的模态窗体的页面布局是一样的，只需给它修改一下模态窗体的id和标题，在from表单里面在给它添加一个隐藏域（见图表12）

图表 12

模态窗体写好了之后，定义一个方法，给行绑定一个双击事件

注意：给行绑定点击事件是在表格数据的绑定上面绑定（见图表13）

双击行的时候打开模态窗体和新增打开模态窗体的方法一样，

在打开模态窗体之前要把你想要修改的数据填到模态窗体里面。前端发送一个请求到控制器中。控制器把我们想要的数据查询出来然后进行返回

发送请求之前你要知道你发送请求的是那条。则是要通过id去查询

在给元素绑定双击事件的时候，传一个参数（见图表13下划线）

去控制器里面写一个方法

就可以知道post这个方法把数据传到哪里去了，传入的数据则是通过键值对的形式

在控制器的方法里面则通过json返回，接下来就是数据的一个查询

Var是根据后面查询推断出来的一个结果（见图表14）

图表 14

把数据全部获取到了之后，通过id元素input值，然后给他绑定数据

图表 15

如果你不给val()里面传参数，就是值的获取，给val()里面传参数，就是赋值

数据全部赋值上去了，接下来就是修改模态窗体里面的保存

先在控制器里面定义一个方法，还是通过json返回数据

方法定义了，接下来就是修改的代码（见图表16）

图表 16

接下来就是去视图里面的一个请求，定义一个方法，这个方法修改模态窗体中的保存调用（见图表17）

图表 17

删除

删除是要选中数据，再把他删除，把前面的序号变成复选框，在前面表格数据的绑定里面替换，在value值里面附一个值（见图表18）

在新增按钮旁边添加一个删除的按钮，给他绑定一个点击事件

可以一次性删除多条数据，也可以删除一条数据，我们先学删除一条数据的操作

我们这里要做一个判断，判断是否删除一条数据，谨防删除多条数据（见图表19）

图表 19

注意：在这里要加上checked这个属性，如果不加这个属性选择的则是全部的元素，而不是单条元素

删除数据的时候，要询问一下你的用户，是否确定删除数据（见图表20）

图表 20

控制器里面删除学生数据的方法（见图表21）

图表 21