.net layui mvc ef 多选下拉框 动态赋值 取值 回显 功能完整实现

 前台html放一个这个 

 <input type="hidden" id="huchi">
<div class="layui-inline">
           
            <div class="layui-form-item">
                <label class="layui-form-label">互斥方案</label>
                <div class="layui-input-block" id="tag_ids">

                </div>
            </div>
            <div class="layui-form-item" style="text-align:center;">
                <div class="layui-input-block">
                    <button type="button" class="layui-btn" lay-submit="" lay-filter="demo">console.log</button>
                </div>
            </div>
          

        </div>
  <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="sub">立即提交</button>
                    <button onclick="parent.layer.closeAll()" class="layui-btn layui-btn-primary">关闭</button>
                </div>
            </div>

js里这样

 <script type="text/javascript">
        var flag = '@Html.Raw(ViewBag.flag)';//用于修改回显
        layui.config({
            base: './'
        }).extend({
            selectN: '../../Scripts/layui_extends/selectN',
			selectM: '../../Scripts/layui_extends/selectM',
        }).use(['layer', 'form', 'jquery', 'selectN', 'selectM'], function () {

			$ = layui.jquery;
			var form = layui.form,
				selectN = layui.selectN,
                selectM = layui.selectM;
            var tagIns;


          var huchiid = '@Html.Raw(ViewBag.huchiid)';
           var arr = huchiid.split(',');

            $.ajax({
                url: "/PlanPZ/GetPlan",
                dataType: 'json',
                type: 'post',
                success: function (result) {
                    if (flag = 1) {
                        tagIns = createSelectM("#tag_ids", result, "tag2", arr);
                    } else {
                        tagIns = createSelectM("#tag_ids", result, "tag2", []);
                    }

                  


                }
            });


//这里是提交时所能取到的值，根据自己的需要取值
  //form.on('submit(demo)', function(data) {
			//	console.log('tagIns 当前选中的值名：', tagIns.selected);
			//	console.log('tagIns 当前选中的值：', tagIns.values);
			//	console.log('tagIns 当前选中的名：', tagIns.names);
   //             console.log('');

   //             var formData = data.field.tag2;//我需要的时这样的值，所以这样取并且存储到前台隐藏文本框中
   //             $("#huchi").val(formData);

   //             console.log('表单对象：', formData);

			//})


//这是提交到后台的方法
form.on("submit(sub)", function (obj) {

            var user = obj.field;

            var formData = obj.field.tag2;
            $("#huchi").val(formData);//这里存了一下，其实也可以不存

         
            var huchiID = $("#huchi").val();//这里是之前存到隐藏文本框的值,例:1,2,3
           
          
            $.ajax({
                type: "POST",
                data: {
                    user: user,
                 
                    huchiID: huchiID//这里要传到后台


                },
                url: "/PlanPZ/SubUserDetail",//这是mvc 的 controller
                success: function (result) {
                    layer.closeAll("loadiing");
                    if (result.Success) {
                        layer.msg(result.Message, { icon: 1 });
                        parent.layer.closeAll();
                    }
                    else {
                        layer.msg(result.Message, { icon: 5 });
                    }
                }
            })
            })








//这才是真正实现功能的方法
 function createSelectM(domId, data, inputName, selected = [], isRequired = true) {
                var options = {
                    //元素容器【必填】
                    elem: domId
                    //候选数据【必填】
                    , data: data
                    //默认选中的值
                    , selected: selected
                    //最多选中个数，默认5
                    , max: data.length
                    //input的name 不设置与选择器相同(去#.)
                    , name: inputName
                    //值的分隔符
                    , delimiter: ','
                    //候选项数据的键名
                    , field: { idName: 'id', titleName: 'name' }
                };
                if (isRequired == true) {
                    // options = Object.assign({verify: 'required'}, options);
                    options.verify = 'required';
                }
                return selectM(options);
            }

        });








 </script>

后台的方法

这是用于动态给多选下拉框赋值的

 [HttpPost]

        public JsonResult GetPlan()

        {
            using (ModelsContainer1 db = new ModelsContainer1())

            {
                db.Configuration.ProxyCreationEnabled = false;//关闭EF的默认加载

                var Deplist = db.XH_PlanInfo.Where(r => r.IsDel == 0 && r.PId != 0 && r.PId != 1).ToList();

                List<huchi> HuChiList = new List<huchi>();

               StringBuilder str = new StringBuilder();
                //将数据Json化并传到前台视图
                foreach (var item in Deplist)
                {
                    huchi aaa = new huchi();
                    aaa.id = item.PlanId;
                    aaa.name = item.PlanName;
                    
                    HuChiList.Add(aaa);

                  
                    
                }

                var json1 = Json(HuChiList, JsonRequestBehavior.AllowGet);
                return json1;
              
            }

        }

        public class huchi
        {
            public int id { get; set; }
            public string name { get; set; }

         
        }
        public List<huchi> HuChiList { get; set; }

这是修改时传值的

  public ActionResult PlanPeiZhi_Detail(int? userGuid)
        {

            if (userGuid == null)
            {
                return View();
            }
            using (ModelsContainer1 context = new ModelsContainer1())
            {
                XH_PlanRCorp PlanRCorp = context.XH_PlanRCorp.FirstOrDefault(u => u.RId == (int)userGuid);

                ViewBag.flag = 1;
                ViewBag.huchiid = PlanRCorp.HuChiPlan;

               
                ViewBag.PlanRCorp = Newtonsoft.Json.JsonConvert.SerializeObject(PlanRCorp);


                return View();
            }
        }

这是真正 往数据库里存的

  [HttpPost]
  [ValidateInput(false)]
        public ActionResult SubUserDetail(XH_PlanRCorp user,string huchiID)
        {


            using (ModelsContainer1 context = new ModelsContainer1())
            {
               
                int flg = 0;
                XH_PlanRCorp editUser = context.XH_PlanRCorp.FirstOrDefault(u => u.RId == user.RId);
                if (editUser == null)
                {

                    XH_PlanRCorp adduser = new XH_PlanRCorp()
                    {
                       
                        HuChiPlan = huchiID,
                        IsDel = 0,
                        CreateTime = DateTime.Now
                    };
                    context.XH_PlanRCorp.Add(adduser);
                    flg = context.SaveChanges();

                    if (flg > 0)
                    {

                        return Json(new
                        {
                            Success = true,
                            Message = "操作成功"
                        });
                    }
                    return Json(new
                    {
                        Success = false,
                        Message = "操作失败"
                    });

                }
                else
                {
                   
                    editUser.HuChiPlan = huchiID;
                  

                    flg = context.SaveChanges();

                    try
                    {


                        return Json(new
                        {
                            Success = true,
                            Message = "操作成功"
                        });


                    }
                    catch (Exception)
                    {

                        return Json(new
                        {
                            Success = false,
                            Message = "操作失败"
                        });
                    }



                }


            }
        }

最后实现的效果图

添加

 修改回传