首页 > 其他分享 >Blazor整合layui

Blazor整合layui

时间:2024-03-24 09:34:23浏览次数:23  
标签:function form layui userlist 整合 myUserService using Blazor

复制layui文件夹到wwwroot文件夹中:
在这里插入图片描述
razor组件中引入js文件和css文件:

@page "/user"
@using BlazorApp.Service
@using BlazorApp.Entity
@inject UserService myUserService
<link href="/layui/css/layui.css" rel="stylesheet"> 
<script src="/layui/layui.js"></script>

<form class="layui-form" action="">
  <div class="layui-form-item">
    <label class="layui-form-label">输入框</label>
    <div class="layui-input-block">
      <input type="text" name="title" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">密码框</label>
    <div class="layui-input-block">
      <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">选择框</label>
    <div class="layui-input-block">
      <select name="city" lay-verify="required">
        <option value=""></option>
        <option value="0">北京</option>
        <option value="1">上海</option>
        <option value="2">广州</option>
        <option value="3">深圳</option>
        <option value="4">杭州</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">复选框</label>
    <div class="layui-input-block">
      <input type="checkbox" name="like[write]" title="写作">
      <input type="checkbox" name="like[read]" title="阅读" checked>
      <input type="checkbox" name="like[dai]" title="发呆">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">开关</label>
    <div class="layui-input-block">
      <input type="checkbox" name="switch" lay-skin="switch">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">单选框</label>
    <div class="layui-input-block">
      <input type="radio" name="sex" value="男" title="男">
      <input type="radio" name="sex" value="女" title="女" checked>
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">文本域</label>
    <div class="layui-input-block">
      <textarea name="desc" placeholder="请输入内容" class="layui-textarea"></textarea>
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
      <button type="reset" class="layui-btn layui-btn-primary">重置</button>
    </div>
  </div>
</form>

<script>
//Demo
layui.use('form', function(){
  var form = layui.form;

  //监听提交
  form.on('submit(formDemo)', function(data){
    layer.msg(JSON.stringify(data.field));
    return false;
  });
});
</script>

@code {
    private MyUser[]? userlist;

    protected override async Task OnInitializedAsync()
    {
        userlist = await myUserService.getUserList();
    }
}

在这里插入图片描述

标签:function,form,layui,userlist,整合,myUserService,using,Blazor
From: https://blog.csdn.net/zhourongxiang1/article/details/136957604

相关文章

  • [MAUI]集成高德地图组件至.NET MAUI Blazor项目
    @目录前期准备:注册高德开发者并创建key登录控制台创建key获取key和密钥创建项目创建JSAPILoader配置权限创建定义创建模型创建地图组件创建交互逻辑项目地址地图组件在手机App中常用地理相关业务,如查看线下门店,设置导航,或选取地址等。是一个较为常见的组件。在.NETMAUI......
  • 【Java - 框架 - Knife4j】(01) SpringBoot整合Knife4j - 快速上手
    “SpringBoot"整合"Knife4j”-快速上手;环境“Knife4j"版本"2.0.9”;“Java"版本"1.8.0_202”;“SpringBoot"版本"2.5.9”;“Windows11专业版_22621.2428”;“IntelliJIDEA2021.1.3(UltimateEdition)”;步骤步骤A说明创建"SpringBoot"项目;图片(1)......
  • 动态水印也能去除?ProPainter一键视频抠图整合包下载
    ProPainter是一个基于E2FGVI实现的AI视频编辑工具,它结合了增强的传播和Transformer机制,能够快速高效地进行视频修复和水印去除功能特点· 对象移除:智能地检测和移除视频中的动态物体,对于去除不需要的元素或错误的特效非常有用·对象补全:填补视频中缺失的区域,通常用于修......
  • 动态水印也能去除?ProPainter一键视频抠图整合包下载
    ProPainter是一个基于E2FGVI实现的AI视频编辑工具,它结合了增强的传播和Transformer机制,能够快速高效地进行视频修复和水印去除功能特点· 对象移除:智能地检测和移除视频中的动态物体,对于去除不需要的元素或错误的特效非常有用 ·对象补全:填补视频中缺失的区域,通常用于修......
  • 基于SpringBoot+Layui的社区物业管理系统
    项目介绍社区物业管理系统是基于java程序开发,本系统分为业主和管理员两个角色业主可以登陆系统,查看车位费用信息,查看物业费用信息,在线投诉,查看投诉,在线报修;管理员可以车位收费信息,物业收费信息,投诉信息,楼宇信息,房屋信息,业主信息,车位信息,抄表信息等进行管理。技术栈数据......
  • SpringBoot - [03] SpringBoot整合Mybatis Plus连接数据库
    原文链接:https://mp.weixin.qq.com/s/ZJTKX_gmn6ffsY7hNrspHQ 一、开发环境JDK:1.8SpringBoot:2.1.1.RELEASEMySQL:8.0.28 二、引入依赖<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId&g......
  • SpringBoot整合Redis:Redis优化解决数据一致性问题
    ......
  • 使用Spring Boot 3整合Knife4j实现API文档管理
    在开发Web应用程序时,良好的API文档管理是至关重要的。Knife4j是一款基于Swagger的强大工具,它可以帮助我们生成美观且易于理解的API文档。结合SpringBoot3,我们可以轻松地集成Knife4j,并自动生成API文档,方便团队协作和开发。添加依赖首先,在SpringBoot3项目的pom.xml文件......
  • SSM整合Jwt
    #导入jwt依赖创键Util123#4.测试......
  • Spring boot2.7整合jetcache方法缓存 处理数据发生变化时同步更新缓存 删除缓存操作
    上文Springboot2.7整合jetcache方法缓存我们做了个方法缓存的案例可以将接口内容缓存起来是能大大提高效率的但是我们接口的数据大多来自数据库如果我们调用增删查改它的数据变化了那缓存的内容就会因为没有及时更新变的不准确例如我们这样我们在上面定义了......