基于LayUi中的弹窗功能实现对数据库中视图的编辑操作

说明：仅作学习使用，部分代码不方便展示，知道怎么用就好了。

视图层Views: Edit.cshtml

@{
    ViewBag.Title = "Product Edit";   
}
@Model MoDouPlatform.Entity.V_Products //产品视图表
//需要创建一个实体类数据模型

<form class="layui-form" action="">
    <div class="layui-form-item" style="margin-top:15px">
        <label class="layui-form-label">产品</label>
        <div class="layui-input-block">
            <input type="text" name="Product" lay-verify="required" value="@Model.Name" placeholder="请输入产品" autocomplete="off" class="layui-input">
            //需要隐藏一些数据，供后期调用
            <input type="hidden" id="Uid" value="@Model.Uid" />
            <input type="hidden" id="Id" value="@Model.Id" />
            <input type="hidden" id="Cid" value="@Model.Cid" />
            <input type="hidden" id="ColorId" value="@Model.ColorId" />
            <input type="hidden" id="ColorName" value="@Model.ColorName" />                      
        </div>
    </div>

    <div class="layui-form-item">      
        <div class="layui-inline">
            <label class="layui-form-label">颜色</label>
            <div class="layui-input-block">
                <select name="Color" id="Color" lay-verify="required">               
                </select>
            </div>
        </div>
        <div class="layui-inline">
            <button type="button" class="layui-btn" id="test">
                <i class="layui-icon">&#xe67c;</i>上传图片
            </button>
            <img style="width:100px;height:100px;" src="https://localhost:44310/@Model.imgSrc" id="img" />
            //因为图片地址比较长，数据库存不下，所以拆分后以拼接字符串的方式显示图片
        </div>
    </div>
    
	<div class="layui-form-item">
        <div class="layui-input-block">
            <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>

<script>
    layui.use(['form', 'table', 'upload', 'layer'], function () {
        var form = layui.form;
        var upload = layui.upload;

        //绑定颜色
        if ($("#Cid").val() != null) {
            $.post("/Color/GetColorsByCid?cid=" + $("#Cid").val(), function (res) {
                var colorlist = res;//res是Color表中所有的键值对          
                $.each(res, function (index, item) {
                    if ($("#ColorName").val() == item.Name) {
                        $("#Color").append("<option value='" + item.Id + "' selected='selected'>" + item.Name + "</option>");
                    }
                    else {
                        $("#Color").append("<option value='" + item.Id + "'>" + item.Name + "</option>");
                    }
                })
                layui.form.render("select");
            });   
        }

		//图片上传
        var str = "";
        var uploadInst = upload.render({
            elem: '#test' //绑定元素
            , url: '/img/UpLoad' //上传接口
            , exts: 'jpg|png|gif|jpeg'
            , done: function (res) {
                if (res.IsSuccess == true) {
                    //console.log(res.Message);
                    $("#img").attr("src", 'https://localhost:44310/' + res.Message);
                    str = res.Message;
                }
            }
            , error: function () {
                //请求异常回调
            }
        });
        
		//监听提交按钮事件
		form.on('submit(demo1)', function (data) {
            var obj = data.field;  //obj是一个键值对
            var id = $("#Id").val();  //编辑的时候要给一个Id作为唯一标识
            //alert(str);
            //提交数据给数据库            
            $.ajax({
                url: '/product/UpdateProduct',
                dataType: 'json',
                data: {  //需要从BLL中定义，前面是形参，后面是从控件中获取的的值
                        Id: id,
                        imgSrc: str,
                        Name: obj.Product,                      
                        colorid: obj.Color,                       
                    },
                    type: 'post',
                    success: function (data) {  //需要从父页面来传data,要不然刷新不了        
                        if (data.IsSuccess) {
                            alert("更新成功");
                            //添加成功后，自动渲染页面
                            table.reload('test', {   
                                url: '/Product/GetProductList'
                                , where: {}                
                                , page: { curr: 1 }
                            });
                        }
                        else {
                            layer.msg("更新失败");
                        }
                    }
                });
           
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
            return false;
        });
   });
</script>

图片上传方法：ImgController.cs

public class ImgController:BaseController
    {
        public ActionResult Upload()
        {
            if (Request.Files.Count > 0)
            {
                HttpPostedFileBase f = Request.Files["file"];//最简单的获取方法
                string file = "ProductImg";
                string fullFilename = "Content/imgs/" + file + "//" + DateTime.Now.ToString("yyyyMMdd");
                if (!Directory.Exists(AppDomain.CurrentDomain.BaseDirectory+fullFilename))
                    Directory.CreateDirectory(AppDomain.CurrentDomain.BaseDirectory+fullFilename);
                var str = fullFilename + "//" + Guid.NewGuid() + f.FileName;
                f.SaveAs(AppDomain.CurrentDomain.BaseDirectory + str);//保存图片
                //这下面是返回json给前端 
                Result result = new Result();
                result.IsSuccess = true;
                result.Message = str;//服务器储存路径
                return Json(result);//格式化为json
            }
            else
            {
                return null;
            }
        }
        public ActionResult Index()
        {
            return View();
        }
    }

Product文件夹中：Index.cshtml

<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>

if (layEvent === 'edit') {
	 layer.open({
	      type: 2,
	      area: ['700px', '600px'],
	      title: "产品编辑",
	      content: '/Product/EditProduct?Id=' + data.Id,
	      end: function () {
	          //console.log(data);
	          table.reload('test', {
	              data: data
	          });
	      },
	  });
}

ProductsBLL.cs

public Result UpdateProduct(int Id,string imgSrc, string Name, int colorid,)
{          
    Result result = new Result();
    SessionUserVM user = (SessionUserVM)SessionHelper.Get("user");
    if (user.IsRoot == 1)
    {
        var product = Dao.GetLastOne(x => x.Id == Id);
        //以下5个字段给出判断后的默认值
        product.IsDel = 0;
        product.DateTime = DateTime.Now;
        product.Cid = user.CompanyID;
        product.Uid = user.UserID;
        product.state = 1;
        //以下需要从形参中获取其值
        product.imgSrc = imgSrc;
        product.Name = Name;                                             
        product.ColorId = colorid; 
        //调用封装后的方法，更新数据库               
        Dao.Update(product);
        result.IsSuccess = true;
        result.Message = "更新成功";
    }
    else
    {
        result.IsSuccess = false;
        result.Message = "用户验证失败";
    }
    return result;
}

ProductController.cs

public ActionResult EditProduct(int Id)
{
    V_Products model = V_ProductBLL.GetEntities(x => x.Id == Id).FirstOrDefault();
    return View(model);
}

public ActionResult GetProductList(string color = "", string user = "" int page = 1)
{
   var list = V_ProductBLL.GetProductList();
   DateTime date = DateTime.Now.AddDays(-30);

   if (!string.IsNullOrEmpty(color))
   {
      list = list.Where(x => x.ColorName == color);
   }
   if (!string.IsNullOrEmpty(user))
   {
       list = list.Where(x => x.UserName == user);
   }            
   Hashtable ht = new Hashtable();
   ht["code"] = 0;
   ht["msg"] = "success";
   ht["count"] = list.Count();
   var newList = list.OrderBy(x => x.Id).Skip((page - 1) * 10).Take(10).ToList();
   ht["data"] = newList;
   return Json(ht, JsonRequestBehavior.AllowGet);
}

public ActionResult UpdateProduct(int Id, string imgSrc, string Name, string int colorid)
{
    return Json(productsBLL.UpdateProduct(Id, imgSrc, Name,colorid));
}