文章的整个思路将是从头到尾，若想清楚地了解整个过程就不要跳着看，因为里面包含了编写视图与控制器代码的整个思路，是一路写下去的。
下面说一下保存按钮的新增操作，既然是保存按钮，那肯定需要获取页面上的值，所以进行保存HTML表单上面按钮的新增操作，所以就必须获取input标签上面的值。
var userType = $("#UserType").val();
var describe = $("#Describe").val();再做数据验证，设置不等于空并且不等于null值。然后在页面上选中的按钮设置高亮效果，那我们就要获取到页面上全部的按钮。
首先获取全部的按钮，获取到页面元素的方式有很多种，这里我使用直接获取整个页面的div然后再找到里面那个div进行获取。
接下来根据 判断是否被选中，下面if else 判断有没有这个类，所以在这里给一个字符串用于提取这个模块明细表的ID。
然后在substring 方法分割提取字符串 ，然后回到之前拼接那个类的id，然后从索引为11开始提取到结束（为什么是11，将这个id从第一个字母空格开始数到最后一个字母空格刚好是11） 。
btns += `<button type="button" class="layui-btn layui-btn-xs layui-btn-primary"
id = "btnOperates${ModularDetailVos[i].ModularDetailID}" onclick="changeSelect(this)">
${ModularDetailVos[i].OpType}</button > `;结束的位置为btnid，既然是分割，那就得在后面加上一个逗号。
input标签里面的id是为了得到刚创建的字符串，然后传到这个id里面，进而使控制器那边进行分割。
<input type="text" id="ModularDetailIds" name="modularDetailIds" hidden />
?
所以我们要把得到的结果传到表单里面。 substring 提取字符串，索引为0.结束是idstr，lenngth-1因为要去掉最后一个嘛。
我们将模块明细表的ID放入表单里面，然后提交表单ajaxSubmit方法提交表单，再使用回调函数。
视图这块先到这里，接下来去到控制器写保存新增。
下面有三张表，分别是权限表和模块明细表还有用户类型表。
需要将模块明细表的ID与用户类型表的ID给到权限表。
这里涉及到权限表与用户类型表的新增。
多张表的新增可以使用事务回滚 ，用try catch可以捕捉到运行过程中出现的错误。
因为我们需要接收到input标签里面字符串的内容，所以需要使用string接收视图传过来的id。
接下来，使用if else判断用户类型是否为空，所以设置用户类型不为空并且描述不为空，还有tapeclass不为空。 还有进行数据不能重复的操作。然后新增用户类型并且获取刚新增的用户类型ID，为下面遍历数组做铺垫，然后使用Split分割字符串，分割的依据是逗号
接下来去遍历数组里面的每一项，在这里我使用for循环去遍历它。
遍历数组里面将是权限表的新增。
这个新增里面会使用到new对象，还有数据类型的转换。
下面是在控制器保存新增的代码。
public ActionResult InsertUserType(SYS_UserType modUserType, string modularDetailIds)
{
ReturnJson returnJson = new ReturnJson();
//事务回滚
using (var scope = new TransactionScope())//需要添加引用 System.Transactions
{
try
{
//数据验证
if (!string.IsNullOrEmpty(modUserType.UserType) && !string.IsNullOrEmpty(modUserType.Describe)
&& !string.IsNullOrEmpty(modUserType.typeClass))
{
//去重复
int oldCount = myModel.SYS_UserType.Count(m=>m.UserType== modUserType.UserType);
if (oldCount == 0)
{
//新增用户类型
modUserType.FoundTime = DateTime.Now.ToString();
modUserType.ToVoidNo = false;
myModel.SYS_UserType.Add(modUserType);
myModel.SaveChanges();
//用户类型ID
int userTypeId = modUserType.UserTypeID;
//分割字符串
string[] arrModularDetailId = modularDetailIds.Split(',');
for (int i = 0; i < arrModularDetailId.Length; i++)
{
//新增权限表
PW_Jurisdiction jurisdiction = new PW_Jurisdiction();
jurisdiction.UserTypeID = userTypeId;
jurisdiction.ModularDetailID = Convert.ToInt32(arrModularDetailId[i]);
myModel.PW_Jurisdiction.Add(jurisdiction);
myModel.SaveChanges();
}
//提交事务(设定交易完成)
//作用：可以让我们在处理交易的時候，可以确保交易的完整性。
scope.Complete();
returnJson.State = true;
returnJson.Text = "保存成功";
}
else
{
returnJson.Text = "该用户类型已经存在";
}
}
else
{
returnJson.Text = "数据不完整";
}
}
catch (Exception e)
{
returnJson.Text = "数据异常";
}
}
return Json(returnJson,JsonRequestBehavior.AllowGet);
}这个回调里面有一个提示与设置一个定时器，设置定时器是因为副窗口打开后将在一秒钟内关闭，所以需要在下面写一个方法，关闭弹窗。
在layui里面有这个关闭指定层的详细讲解。
? 首先需要知道怎么获取到父窗口的弹窗， 先得到当前iframe层（父窗口打开的弹窗）的索引在执行关闭。
//关闭父窗口的弹窗
function closeThis()
{
var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
parent.layer.close(index); //再执行关闭
}如果在当前页面打开了很多弹窗，想要全部把它关掉就可以调用父窗口关闭。
//关闭父窗口的弹窗
function closeThis()
{
调用父窗体的关闭。
parent.layer.closeAll();
}
视图代码：
function submitForm()
{
var idstr = "";
var userType = $("#UserType").val();
var describe = $("#Describe").val();
var typeClass = $("#typeClass").val();
//数据验证
if (userType != "" && userType != null && describe != "" && describe != null)
{
//获取全部按钮
var btns = $("#tableModular div[lay-id='tabModular'] button");
//console.log(btns);
for (var i = 0; i < btns.length; i++)
{
//根据layui-btn-primary判断是否被选中
if (!$(btns[i]).hasClass("layui-btn-primary"))
{
//提取模块明细ID
var btnId = $(btns[i]).attr("id");
btnId = btnId.substring(11, btnId.length) + ",";
idstr += btnId;
}
}
idstr = idstr.substring(0, idstr.length - 1);
//将模块明细ID字符串放入表单
$("#ModularDetailIds").val(idstr);
//提交表单
$("#formUserType").ajaxSubmit(function (msg) {
提示
layer.msg(msg.Text, { icon: 0, skin: "layui-layer-molv" });
if (message.State) {
//设置计时器
setTimeout(closeThis(), 1000);
}
});
}
else {
layer.msg("请填写完整", { icon: 0, skin: "layui-layer-molv" });
}