.NET_WebForm_layui控件使用及与webform联合使用

使用layui控件填充布局

操作流程： 

1. 创建项目。
2. 引入css以及js样式。
3. 使用栅格样式进行布局。
4. 官网查找控件元素（此处以图标和按钮为例）。
5. 将对应的元素从官网复制下来。
6. 在布局中填充。
7. 很简单的操作，其他控件也同理，不再赘述。

流程图例

4.	5.
5.	6.

步骤1-3：https://blog.csdn.net/weixin_63243357/article/details/141497406?spm=1001.2014.3001.5501

---

 使用layui内置jauery实现动态跳转

操作流程： 

1. 创建项目。
2. 引入css以及js样式。
3. 加载elementjs模块，渲染表单效果。
4. 编写layui的js代码（此处先不与webform联用，会引起服务器刷新异常）。
5. 编写控件代码及其id。
6. 完成实现。

流程图例

6.​	6.
6.

步骤3代码：

         <%-- 加载elementjs模块，渲染表单效果 --%>       <script type="text/javascript">             layui.use('form', function () {var form = layui.form;});</script>

步骤4代码：

<script>layui.use(['jquery', 'layer'], function () {var $ = layui.jquery, // 引入jQuery模块layer = layui.layer; // 引入layer模块，用于弹出提示（可选）// 给按钮绑定点击事件$('#jumpBtn').on('click', function () {// 弹出确认框layer.confirm('确定要跳转到新页面吗？', { icon: 3, title: '提示' }, function (index) {// 用户点击了确定按钮后的操作layer.close(index); // 关闭确认框window.location.href = 'https://layui.dev/'; // 动态设置跳转的URL});});});
</script>

步骤5代码：

           <div class="layui-container"><div class="layui-row"><div class="layui-col-md6 layui-col-md-offset3"><button id="jumpBtn" class="layui-btn layui-btn-normal">点击我进行跳转</button></div></div>
</div>

---

 webform控件使用layui样式

操作流程： 

1. 创建项目。
2. 引入css以及js样式。
3. 加载elementjs模块，渲染表单效果。
4. 直接在form表单渲染的控件中引用样式。
5. 可实现使用C#编写后端代码代替JS实现功能逻辑。
6. 同样很简单的操作，但只要layui-ui支持的控件，可对代码编写复杂度有很大简化。

流程图例

步骤1-2：https://blog.csdn.net/weixin_63243357/article/details/141497406?spm=1001.2014.3001.5501

步骤3代码：

         <%-- 加载elementjs模块，渲染表单效果 --%>       <script type="text/javascript">             layui.use('form', function () {var form = layui.form;});</script>

步骤4代码：

    <form id="form1" runat="server" class="layui-form"><asp:Button class="layui-btn" ID="Button1" runat="server" Text="Button" /></form>

---