表单数据回填

表单数据回填

开发工具与关键技术：Visual Studio 2015
作者：徐晶旗
撰写时间：2019年7月27日 

在做修改的时候，经常会用到数据回填，修改和新增的操作差不多，只是因为新增是新增数据库中没有的数据，要把一条新的数据保存到数据库中，而修改是对数据库中已有的数据进行修改，所以修改需要获取主键ID找到需要修改的数据，然后通过条件查询去寻找数据。一般我们知道，用户输入的数据是通过from表单提交的，所以修改数据库中的信息是要查询到该数据再回填到表单中进行修改操作。
先来查询出所需要的数据，int CommodityDetailID是要接收的参数， Single()是返回唯一的一条数据。

public ActionResult selectStockDetail(int CommodityDetailID)
        {
            try
            {             
                var Commodity = (from tbCommoditydetail in myModels.B_CommodityDetail
                                 join tbCommodity in myModels.B_Commodity on tbCommoditydetail.CommodityID equals tbCommodity.CommodityID
                                 join tbCommodityType in myModels.D_CommodityType on tbCommodity.CommodityTypeID equals tbCommodityType.CommodityTypeID
                                 where tbCommoditydetail.CommodityDetailID == CommodityDetailID
                                 select new CommodityTo
                                 {
                                     CommodityDetailID = tbCommoditydetail.CommodityDetailID,
                                     CommodityCode = tbCommoditydetail.CommodityCode,
                                     CommodityStyleNumber = tbCommodity.CommodityStyleNumber,                                   
                                     CommodityName = tbCommodity.CommodityName,
                                     ColorID = tbCommoditydetail.ColorID,
                                     SizeID = tbCommoditydetail.SizeID, 
                                     CommodityTypeID=tbCommodity.CommodityTypeID,                                                                    
                                     CommodityTypeName = tbCommodityType.CommodityTypeName,
                                     BrandID = tbCommodity.BrandID,
                                     SeasonID = tbCommodity.SeasonID,
                                     UnitID = tbCommodity.UnitID,                                   
                                     TagPrice = tbCommodity.TagPrice,
                                     Discount = tbCommodity.Discount,
                                 }).Single();
           
                return Json(Commodity, JsonRequestBehavior.AllowGet);

            }
            catch (Exception e)
            {
                Console.WriteLine(e);
                return Json(null, JsonRequestBehavior.AllowGet);
            }
 }

查询完了需要的数据，然后就要从页面获取到控制器查询到的数据，所以要用到异步提交操作，就要通过键值对的格式传输数据，通过post(a,b,c) a=url,就是控制器查询方法的路径，b=键：值，键等于控制器接收值的参数名，值等于要传递到控制器的数据，c=回调方法，当请求提交后才执行的方法。
回填的方法有两种，第一种是是通过jQuery中的val回调函数，使用方法是$(“#ID”).val(date.name),name是在form表单中要回填的数据名称，回调几次就要写几次这样的格式获取数据，如果回调的次数少可以用这种方法，但是如果要回调多条就建议用一种封装的方法，也就是我要说的第二种方法，把这种方法封装在插件中，用的时候直接调出来使用就可以了。具体代码如下：

function loadDatatoForm(fromId, jsonDate) {
    var obj = jsonDate;
    var key, value, tagName, type, arr;
    for (x in obj) {//循环json对象
        key = x;
        value = obj[x];
        //$("[name='"+key+"'],[name='"+key+"[]']").each(function(){
        //更加form表单id 和 json对象中的key查找 表单控件
        $("#" + fromId + " [name='" + key + "'],#" + fromId + " [name='" + key + "[]']").each(function () {
            tagName = $(this)[0].tagName;
            type = $(this).attr('type');
            if (tagName == 'INPUT') {
                if (type == 'radio') {
                    $(this).attr('checked', $(this).val() == value);
                } else if (type == 'checkbox') {
                    try {
                        //数组
                        arr = value.split(',');
                        for (var i = 0; i < arr.length; i++) {
                            if ($(this).val() == arr[i]) {
                                $(this).attr('checked', true);
                                break;
                            }
                        }
                    } catch (e) {
                        //单个
                        $(this).attr('checked', value);
                    }
                } else {
                    $(this).val(value);
                }
            } else if (tagName == 'TEXTAREA') {
                $(this).val(value);
            } else if (tagName == 'SELECT') {
                //console.log($(this).hasClass("select2"));
                if ($(this).hasClass("select2")) {
                    //select2 插件的赋值方法
                    $(this).val(value).trigger("change");
                } else {
                    $(this).val(value);
                }

            }

        });

注：这个方法是老师封装好的哦，我们用的时候可以直接拿出来用即可。
因为我这里要回填的数据较多，所以就采用了老师封装好的方法，这样代码就减少了好多,下面中的“beauty1”是form表单中的ID哦！就是要回填表单中的数据。

$.post("selectStockDetail", { CommodityDetailID: record.CommodityDetailID }, function (data) {
                                if (data != null) {
                                    //回填表单，方法二：调用封装方法
                                    loadDatatoForm("beauty1", data);