MVC增改

最新推荐文章于 2024-09-19 23:36:27 发布

刈笙乄婺诙

最新推荐文章于 2024-09-19 23:36:27 发布

阅读量138

点赞数

文章标签： c#

本文链接：https://blog.csdn.net/IT_abmin/article/details/107899664

版权

新增·修改

在做MVC（Visual Studio）项目，SQL Server 数据库是必不可少的，很多的插件，引用都要添加到数据库里面，从而在数据库里面方便引用出来使用。
增删查改在MVC（Visual Studio）跟SQL Server 数据库里面都有用到它们，增删查改应用范围十分广泛，日常生活都能用到它们。
新增：在表格/数据库上新增一条或多条数据；
1—新增新增表单-数据表单录入
1.1据靠表单录入，模态框里面的表单：
1.2设计表格格式
①Bootstrap的模态框（modal dialog），添加网页模态框，网页模态框代码：
@表单模态框@//*** =id名称

②绑定事件 $("#cityName").on("change keyup keydown blur", function () { }//on（）:多点击事件绑定，function：回调 //将城市名称转为拼音名称 $("#cityName").on("change keyup keydown blur", function () { //获取输入的城市名称 var cityName = $(this).val(); //去除最后的"市"字 if (cityName.endsWith("市")) { cityName = cityName.substr(0, cityName.length - 1); } //中文转拼音 var pinyinName = pinyin.getFullChars(cityName); //显示拼音 $("#pinyinName").val(pinyinName);

        //避免三字码位数大于3
        $('#frmAirport [name="airportCode"]').blur(function () {
            var airportCode = $(this).val();
            if (airportCode.length > 3) {
                airportCode = airportCode.substr(0, 3);
                $(this).val(airportCode);
            }
        });

③打开新增模态框
//==打开新增模态框
function openInsertModal() {
//设置新增的标识
isInsert = true;
//重置表单
$(’#frmAirport [type = “reset”]’).click();
//设计model标题
$("#modalTitle").text(“新增三字码”);
//显示模态框
$("#modalAirport").modal(‘show’);
}
④确认点击事件，保存新增信息到数据库，并在保存数据进数据库时验证保存的数据与数据库的格式是否一致
//===确认点击事件-保存三字码信息（机场信息）
function saveAirportInfor() {
//=获取参数
var airportCode = $(’#frmAirport [name = “airportCode”]’).val();//三字码
var airportName = $(’#frmAirport [name = “airportName”]’).val();//机场名称
var cityName = $(’#frmAirport [name = “cityName”]’).val();//城市名称
var pinyinName = $(’#frmAirport [name = “pinyinName”]’).val();//城市拼音码

        //==验证数据
        if(airportCode!=undefined && airportCode!="" &&
            airportName!=undefined && airportName!="" &&
            cityName!=undefined && cityName!="" &&
            pinyinName != undefined && pinyinName != "") {
            //检查三字码的位数
            if (airportCode.length == 3) {
                //==发送请求到控制器
                if (isInsert) {
                    //===新增的保存
                    //打开加载层
                    var layerIndex = layer.load();
                    //发送请求
                    $.post("@Url.Content("~/SystemMaintenance/TCCMaintain/InserAirport")",
                        {
                            airportCode: airportCode, //三字码
                            airportName: airportName,//机场名称
                            cityName: cityName,//城市名称
                            pinyinName: pinyinName//城市拼音名称
                        },
                        function (msg) {
                            //关闭加载层
                            layer.close(layerIndex);
                            if (msg.State) {
                                //关闭模态框
                                $("#modalAirport").modal('hide');
                                //刷新table  刷新表格
                                tabAirport.reload({
                                    page: {
                                        curr: 1 //重新从第 1 页开始
                                    }
                                });
                                layer.alert(msg.Text, { icon: 1 });
                            } else {
                                layer.alert(msg.Text, { icon: 2 });
                            }
                        });

2—修改回填数据修改信息保存到数据库
①点击打开模态框并回填数据
//打开修改模态框(回填数据)
function openUpdate(airportID) {
//alert(airportID);
//设置修改标识
isInsert = false;
//重置表单
$(’#frmAirport [type = “reset”]’).click();
//设计model标题
$("#modalTitle").text(“修改三字码”);
//===回填被修改的机场数据
$.post("@Url.Content("~/SystemMaintenance/TCCMaintain/SelectAirportByID")",
{
airportID: airportID,
},
function (jsonData) {
if (jsonData != null) {
②数据回填回填到表格
//回填数据
$(’#frmAirport [name = “airportID”]’).val(jsonData.airportID);//机场ID!!!作为修改数据时的条件
$(’#frmAirport [name = “airportCode”]’).val(jsonData.airportCode.trim());//三字码
$(’#frmAirport [name = “airportName”]’).val(jsonData.airportName.trim());//机场名称
$(’#frmAirport [name = “cityName”]’).val(jsonData.cityName.trim());//城市名称
$(’#frmAirport [name = “pinyinName”]’).val(jsonData.pinyinName.trim());//城市拼音码
//显示模态框
$("#modalAirport").modal(‘show’);
} else {
layer.alert(“参数异常”)
}
//console.log(jsonData);
});
} else {
③保存修改的数据
④保存数据进数据库时进行验证验证保存的数据与数据库的格式是否一致
//修改的保存
//获取修改机场的主键ID
var airportID = $(’#frmAirport [name = “airportID”]’).val();//机场ID
if (airportID != undefined && airportID!=""&& airportID > 0) {

                    } else {
                        layer.alert("机场信息异常，请稍候再试");
                    }
                    //发送请求
                    var layerIndex = layer.load();
                    //发送请求
                    $.post("@Url.Content("~/SystemMaintenance/TCCMaintain/UpdateAirport")",
                        {
                            airportID:airportID,//机场ID
                            airportCode: airportCode, //三字码
                            airportName: airportName,//机场名称
                            cityName: cityName,//城市名称
                            pinyinName: pinyinName//城市拼音名称
                        },
                        function (msg) {
                            //关闭加载层
                            layer.close(layerIndex);
                            if (msg.State) {
                                //关闭模态框
                                $("#modalAirport").modal('hide');
                                //刷新table  刷新表格
                                tabAirport.reload();
                                layer.alert(msg.Text, { icon: 1 });
                            } else {
                                layer.alert(msg.Text, { icon: 2 });
                            }
                        });
                }
            } else {
                layer.alert("三字码位数必须为3");
            }
        }else {
            layer.alert("请填写完整信息");
        }
    }

总结：
在增加数据，修改数据中，认识到了表格的重要，无论是增加还是修改，增改的都是内容。
1·增加数据，
①创建一个表单格式，并赋予表单各种事件/点击事件
②绑定按钮点击事件，添加新增内容
③点击添加按钮，新增内容格式与数据库格式进行判断，
符合的则成功保存到数据库，否则请检查新增内容的格式

2·修改数据
①点击修改按钮，打开表单并回填表单上的数据
②把数据回填的信息，修改成自己想要的信息
③点击修改按钮，修改内容格式与数据库格式进行判断，
修改信息的内容与数据库原本的信息内容进行置换，
符合的则成功保存到数据库，否则请检查新增内容的格式

3·重点
//—on（）:绑定多个点击事件 function：回调
$("#cityName").on(“change keyup keydown blur”, function () { }
//—正则表达式：(/[^A-Z]/g, “”)
使用正则表达式验证数据

//加载层—防止项目在运行中，点击其它的事件，导致出错
打开加载层var layerIndex = layer.load();
关闭加载layer.close(layerIndex);
//隐藏域 — 隐藏不需要的按钮
重置按钮

//刷新—刷新表格
tabAirport.reload();
//回填数据—点击表单上的点击事件，
打开表单并将原表上的数据回填到
打开的表单
$(’#frmAirport [name = “airportID”]’).val(jsonData.airportID);
//发送请求到数据库
var layerIndex = layer.load();