How to pop up the form and submit it using the layui front-end framework

Step one: Reference two files

Step two: Click the delete button to pop up a prompt box

/*删除开始*/
$(".del").click(function () {
var id = $(this).attr("id");
layer.alert('您确定要删除操作吗?', {
skin: 'layui-layer-molv' //样式类名 自定义样式
, closeBtn: 1 // 是否显示关闭按钮
, anim: 1 //动画类型
, btn: ['确定', '取消'] //按钮
, icon: 6 // icon
, yes: function () {
//layer.msg('确定')
$.ajax({
type: "POST",
url: "@Url.Action("Delete", "UserInfo")",
data: { id: id },
success: function (Data) {
if (Data == "ok") {
location.reload();
}
else {
layer.msg('删除失败')
}
},
error: function () {
alert("出现错误");
return false;
}
}) //ajax结束
}
, btn2: function () {
layer.msg('取消')
}
});
})
/*删除结束*/

Step 3: Put an add button

<div class="layui-form">
<a onclick="func7();" class="layui-btn layui-inline fl w130">添加</a>
<table class="layui-table" style="text-align:center">
<tr>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>住址</th>
<th>电话</th>
<th colspan="3">操作</th>
</tr>@foreach (var item in ViewData["UserList"] as List<UserInfo>)
{<tr>
<td>@item.uID</td>
<td>@item.uName</td>
<td>@item.uSex</td>
<td>@item.uAge</td>
<td>@item.uAdress</td>
<td>@item.uPhone</td>
<td><a id="@item.uID" class="del" style="color:blue">删除</a></td>
<td><a href="@Url.Action("Edit", "UserInfo")" ?id="@item.uID" style="color:blue">编辑</a></td>
<td><a id="@item.uID" class="xq" style="color:blue">详情</a></td>
</tr>}</table>
</div>

Step 4: Click the add button to pop up the form to fill in the information

function func7() {
//页面层
layer.open({
type: 1,
skin: 'layui-layer-rim', //加上边框
area: ['350px', '360px'], //宽高

content: "@Url.Action("AddUser", "UserInfo")"  //调到新增页面
});
}

Note: The value of content is the form information to be displayed or a certain page URL. If you want to verify that a certain value is not empty, add the lay-verify="required" attribute. If it is a mobile phone number, then lay-verify="phone", a number lay-verify="number", etc.

For more layui knowledge, please pay attention to the layui usage tutorial column.

The above is the detailed content of How to pop up the form and submit it using the layui front-end framework. For more information, please follow other related articles on the PHP Chinese website!