.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>

---