数据新增


开发工具与关键技术：vs和jquery

作者：戴怡斌 

撰写时间：2019年5月2日

下面我们来看一个数据新增的例子，数据新增会用到数据库，新增的数据就会存放在数据库里面。

所以做新增的时候还要在数据库里面创建一条数据，或者引用，附加已有数据
在这里插入图片描述
打开数据库之后，看到有数据库这个名称之后右键创建一条数据，创建完之后，就会出现一条数据库，点击图上的小点打开，找到有表这个名称右键新建表就可以了，名称随便，引用，附加就不在这里一一例举。

正式开始新增数据。创建不多说，在模型这里，也就是Models右键添加，点击新建项。

这个时候就会弹出一个窗体，找到数据这一栏，点击之后出现对应的数据文件，
在这里插入图片描述
点双击ADO.NET实体模型之后，再点击新建连接，找到自己的数据库，服务器名就是你自己数据库的登录名，之后使用SQL身份验证，填上自己有户名和密码，在点击确定，在勾选是，点击下一步之后，在勾选表，点击完成就可以了。

创建完控制器，视图之后，来到视图这边，编写css样式，写样式就要引用css和js，可以少写一些代码

<link href="~/Plugins/bootstrap-4.1.3-dist/css/bootstrap.min.css" rel="stylesheet" />

<link href="~/Plugins/layui/css/layui.css" rel="stylesheet" />

<link href="~/Content/css/SetExaminee.css" rel="stylesheet" />

css样式引用完还有js样式

<script src="~/Plugins/jquery-3.2.1.min.js"></script>

<script src="~/Plugins/layui/layui.all.js"></script>

<script src="~/Plugins/bootstrap-4.1.3-dist/js/bootstrap.min.js"></script>

<script src="~/content/js/jquery.form.js"></script>

<script src="~/content/js/customfuntion.js"></script>

定义四个变量，用来渲染表格的。

var tabGame;//layui的表格

var blInsert = true;//是否是新增操作

var layerIndex = 0;

var layer, layuiTable;//保存layui模块以便全局使用

完了之后就开始渲染表格，渲染表格就要查询数据，查询数据就要用类选择器，这里不多说，创建之后，写查询。

var listGame = (from tb in
myModel.YX_GameSKL select tb).ToList();

这是另外一种写法，意思是一样的。查询这张表的类容赋值给listGame

listGame = listGame.OrderByDescending(m => m.GameID)

OrderByDescending：这个意思降序排列，相反的是OrderBy。

后面的意思都是返回数据，返回列表。

return Json(layuiTableData, JsonRequestBehavior.AllowGet);

这一句意思就是接受返回的数据，返回的一个数据必须要有接收才可以。
在这里插入图片描述
因为只查询单表，所以没有联表，查询完数据之后表格渲染就完成了，渲染图。

图片上传有限，所以只能看到一部分，操作是自定义的话，要设置自定义属性值。

最后说新增，来到视图这边，写接受返回的数据一个代码。

一般来说添加都会有模态窗体，我也一样，先要给添加按钮设置一个点击事件。有打开模态窗体就会关闭，所以也要写一个点击关闭按钮的事件。

关闭按钮很容易，给你的关闭按钮设置一个点击事件，οnclick="
layerClose "，双引号里面的名称要跟你定义的方法名称要一致，保存按钮也一样。

function layerClose() {layer.close(layerIndex)};

layerIndex一开始就定义好了的变量。

图片里面已经写好了解释，在这里就不多解释。
在这里插入图片描述
打开添加模态窗体之后，输入你要输入的数据，然后就是重点了，圈起来，要考
保存按钮，又要去控制器里面写你要保存新增的数据到数据库里面。

因为有规定，所以图片不能太大，写新增就是判断，判断名称不能相同，不能为空啊等等，根据自己喜好判断就行。

最后就是判断保存的值大于0就新增成功，反之亦然。

if (myModel.SaveChanges() > 0){};

最后回到视图这边，写保存新增按钮的方法。

先定义变量获取美元符号里面的值，

var Type = $("#IGameType").val();

var Name = $("#IGameName").val();

var Crowd = $("#ISuitableCrowd").val();

var Time = $("#IPromulgateTime").val();

获取到之后就判断这四个值都不能为空的字符串，然后以键值对的形式，modGame：这就是我在控制写新增的方法名称。

if (Name != ""
&& Name != "" && Crowd != ""
&& Time != "") {$.get("modGame",{
GameType: Type, GameName: Name, SuitableCrowd: Crowd, PromulgateTime: Time},

function (data) {if
(data.State == true) {layer.alert(data.Text); $("#ModGameDY").modal('hide');
tabGame.reload();} });

$("#ModGameDY").modal(‘hide’)：关闭模态窗体，tabGame.reload()：意思是刷新表格。如果data传回来的数据等于true那就新增成功，

猜你喜欢