增、删、查、改

时间  2021-07-14 标签 笔记 javascript

增、删、查、改

文献MVC 编程模式MVC 是三种 ASP.NET 编程模式中的一种。MVC 是一种使用 MVC（Model View Controller 模型-视图-控制器）设计创建 Web 应用程序的模式：· Model（模型）表示应用程序核心（比如数据库记录列表）。· View（视图）显示数据（数据库记录）。· Controller（控制器）处理输入（写入数据库记录）。MVC 模式同时提供了对 HTML、CSS 和 JavaScript 的完全控制在MVC中我们学习了很多知识点，但是主要重点的还是离不开这四步操作：增、删、查、改。 1. 增，是增加，新增的意思。往往在页面的搭建中，需要数据，所以就要增加。把需要的数据加到SQL Server数据库中去使用。或者用于添加视图、类和控制器。就比如给登录页面添加一个点击按钮（基本操作)在这里插入图片描述
然后再给按钮赋予点击事件，使登录页面完成跳转操作。
在这里插入图片描述
1新增数据，把数据新增进去。首先我们要新增一个表单。因为我们的数据是要靠form表单这些来录入数据的。 所以我们就添加一个Bootstrap的表单模态框，添加之前首先要加载一下layui的模块，初始化表格，并给表格分页： $(function () { //加载layui的模块 layui.use([‘layer’, ‘table’], function () { layer = layui.layer; layuiTable = layui.table; //初始化表格 tabCabinType = layuiTable.render({ elem: “#tabCabinType”, url: “@Url.Content(”~/SystemMaintenance/ClassMaintain/SelectCabinType")", cols: [[ { type: ‘numbers’, title: ‘序号’ }, { field: ‘cabinTypeID’, title: ‘cabinTypeID’, hide: true },//舱位等级ID { field: ‘cabinTypeCode’, title: ‘舱位编码’ },//舱位编码 { field: ‘cabinTypeName’, title: ‘舱位名称’ },//舱位名称 { field: ‘basisPrice’, title: ‘基础价格’ },//基础价格 //{ field: ‘discountRate’, title: ‘折扣率’ },//折扣率 { templet: customDiscountRate, title: ‘折扣率’ },//自定义列-折扣率 { templet: customUpdateCol, title: ‘修改’, align:‘center’,width: 70 }, { templet: customDeleteCol, title: ‘删除’, align: ‘center’, width: 70 } ]], page: true,//开启分页 limit: 10,//默认每一页的数据条数 limits:[5,10,15,20,25,30]//指定分页大小下拉框的选项 }) }); layui.form加载时，就会自动初始化HTML中的.layui-form表单元素要初始化的元素 ，值为选择器(一般为id选择器，不要使用class选择器，会导致只有第一个可以绑定上)，或DOM对象layui.form监听select选择 语法 form.on(‘select(filter)’, function(data){}) 如果你想监听所有的select，去掉过滤器(filter)即可 监听所有下拉框 - 在select元素前的input框显示所选择机场的三字码 @Bootstrap的模态框 @ @表单 模态框@

新增三字码
×
@ 隐藏域 重置按钮@
@ 使用正则表达式验证数据@
确定 取消
2然后再给按钮添加点击事件
在这里插入图片描述
这样就可以打开新增的表单了，然后再获取到数据，把判断好的数据保存到数据库，这样就新增数据进去了。 //==打开新增模态框 function openInsertModal() { //重置表单 $(’#frmAirport [type=“reset”]’).click(); //设置model标题 $("#modalTitle").text(“新增三字码”); //显示模态框 $("#modalAirport").modal(‘show’); }保存数据 //3.2-保存新增到数据库 if (myModel.SaveChanges() > 0) { msg.State = true; msg.Text = “新增成功”; } else { msg.Text = “新增失败”; }很多新增都是这样子操作的，都是基本雷同的。要搭建一个页面就要添加，或者新增，这也是需要代码来完成的。要提前设置好框架，要在页面上添加一条是数据的话，先给它一个类，再给它ID。把要用的数据放进去，先隐藏起来，要用到的时候通过按钮点击把隐藏元素移除。在页面上加个点击增加的按钮。
在这里插入图片描述
在这里插入图片描述
然后就点击+的按钮，在页面上几可以自增数据了。

  1. 当然有新增就会删除，相比之下删除的操作就简单许多。就好像你要创建一个东西，要用到很多东西，但是毁灭一个东西就一下子的事情。删除就是一串代码就可以搞定1删除一个数据

  2. 在这里插入图片描述
    //删除 function deleteCabinType(cabinTypeID) { //alert(cabinTypeID); layer.confirm(“您确认要删除该舱位等级数据吗?”, { icon: 3, title: ‘提示’ }, function (index) { layer.close(index); var layerIndex = layer.load();//打开加载层 //请求 $.post("@Url.Content("~/SystemMaintenance/ClassMaintain/DeleteCabinTypeByID")", { cabinTypeID: cabinTypeID }, function (msg) { layer.close(layerIndex);//关闭加载层 if (msg.State) { layer.alert(msg.Text, { icon: 1 }); //刷新表格 tabCabinType.reload({ page: { curr: 1 //重新从第 1 页开始 } }); } else { layer.alert(msg.Text, { icon: 2 }); } } ); //删除 function customDeleteCol(rowData) { //获取主键Id var cabinTypeID = rowData.cabinTypeID; //返回图标 return ‘’ }直接获取到那个按钮，获取它的ID，把它所在的类移除掉。然后把数据保存到数据库，再把表格刷新一下，返回上一个页面。重新从第一页开始。 //刷新表格 tabCabinType.reload({ page: { curr: 1 //重新从第 1 页开始 }

  3. 查询当然啦，查询也是必备的。不能少。有时候数据太多找不到的时候，这个时候就要用到查询了。而且查询不止一种，还有许多常用的查询：就比如：单表查询、多表查询、分页查询或者连表查询等。。当然，也是有模糊查询的，这种查询可以给客户一个更好的查询体验，可以节省时间。 就比如预定查询，不需要自己去找，只需要把你所需要的参数放进去，点击查询，就会自动帮你筛选。//=查询按钮= //单程 $("#ow-btnSearch").click(function () { //=获取参数 //起飞和降落机场的ID var airports = [];//存放选中的机场ID KaTeX parse error: Expected '}', got 'EOF' at end of input: …ort = parseInt((this).val());//获取下拉框选中的值-并转为整数 airports.push(airport); }); //起飞日期 var dates = []; dates.push($("#ow-startDate").val()); //=数据验证 //起飞机场ID不能为0 if (airports[0]==undefined || airports[0]0) { myAlert(“请选择起飞机场”, “提示”, 0); return; } //降落机场 if (airports[1] == undefined || airports[1] == 0) { myAlert(“请选择降落机场”, “提示”, 0); return; } //起飞机场 不能和降落机场相同 if (airports[0] == airports[1]) { myAlert(“起飞机场和降落机场不能相同”, “提示”, 0); return; } // 验证选择的起飞日期 if (dates[0] == undefined || !dateRegex.test(dates[0])) { myAlert(“请选择起飞日期”, “提示”, 0); return; } // 构建需要传递到航班、舱位选择页面的数据 var airportAndDate = { flightType: 1, //类型：1-单程 segmentNum: 1, //航段数 airports: airports, //机场城市id数组 dates: dates //日期,数组 }; //将需要传递的数据保存到sessionStorage sessionStorage.setItem(“airportAndDate”, JSON.stringify(airportAndDate)); //console.log(sessionStorage.getItem(“airportAndDate”)); //==跳转到 航班、舱位选择页面 window.location.replace("@Url.Content("~/PNR/PNRAppointment/SelectFlightPage")");

在这里插入图片描述

在这里插入图片描述
分页查询要整理好数据，就要用到分页，就要把数据查询出来分页查询用.skip。用skip就要加orderby:排序public ActionResult SelectCabinType(LayuiTablePage layuiTablePage) { //分页查询 舱位等级 List<S_CabinType> listData = (from tabCabinType in myModel.S_CabinType orderby tabCabinType.cabinTypeID select tabCabinType) .Skip(layuiTablePage.GetStartIndex()) .Take(layuiTablePage.limit) .ToList(); //查询总条数 int totalRows = (from tabCabinType in myModel.S_CabinType select tabCabinType).Count(); //组装layui table所需的数据格式 LayuiTableData<S_CabinType> layuiTableData = new LayuiTableData<S_CabinType>() { count=totalRows,//数据总条数 data=listData,//当前页的数据 }; return Json(layuiTableData,JsonRequestBehavior.AllowGet); }有时候只数据少，只需要用到一张表，就可以用到单表查询，只查询单挑数据linq 单表查询的写法 (from 自定义的表名 in Model对象.查询的表 【where 自定义的表名.字段1 关系运算符 值 【&& 自定义的表名.字段2 关系运算符 值】】 【orderby 自定义的表名.字段】 【select 自定义的表名】 【select new {[属性名1= ]自定义的表名.字段1, [属性名2= ]自定义的表名.字段2, [属性名3= ]自定义的表名.字段3, … }】 【select 类名{ 类的属性1=自定义的表名.字段1， 类的属性2=自定义的表名.字段2， … }】 ).Single();//查询单条数据，当没有数据或者有多条数据时会触发异常 .SingleOrDefault();//查询单条数据，当没有数据返回默认值（对象的默认值为null）；当有多条数据时触发异常 .ToList();//查询多条数据并转为List .Count();//查询有多少条数据 Single();查询单条数据，当没有数据或者有多条数据时会触发异常，这个时候就要用到 try { } catch (Exception) { throw; }这个来捕抓异常数据涉及的多了，就要用到多表连查。需要在页面声明一个变量，用来接收传回去的数据。然后再用表的名字（自定义表名），用表的外键去连接另一个表的主键。ID连接ID。

在这里插入图片描述
然后，再把数据传回页面，再输出一下
在这里插入图片描述

  1. 改首先的获取到要改的那个数据的ID，然后再把数据查询出来，再获取到页面修改的数据，然后保存到数据库，然后再数据回填。 就比如自定义修改
  2. 在这里插入图片描述
联系我们 沪ICP备13005482号-10