首页 > 其他分享 >Bootstrap Blazor新增时带入选择的行内容

Bootstrap Blazor新增时带入选择的行内容

时间:2023-04-10 20:15:03浏览次数:53  
标签:SelectedDictionary set Bootstrap private 选中 带入 CurrentDic Blazor value

1.需求

  如上图所示,字典表中字典类型和字典类型描述是重复的,新建时需要重复录入很不方便,所以需要从新增时从选中行带入到新建的文本框中。由于没有找到选中行事件的回调,所以采用其他方式处理。

2.方案

  1.使用@bind-SelectedRows绑定选中行对象,开发中DictionaryDto替换为实际实体。

<Table TItem="DictionaryDto" PageItemsSource="@PageItemsSource" AutoGenerateColumns="true"
       IsPagination="true" IsStriped="true" IsBordered="true" IsMultipleSelect="true"
       ShowToolbar="true" ShowExtendButtons="true" ShowLoading="true" ShowSearch="true" 
       OnAddAsync="@OnAddAsync" OnEditAsync="@OnEditAsync" OnSaveAsync="@OnSaveAsync" OnDeleteAsync="@OnDeleteAsync" @bind-SelectedRows="MySelectedItems"
       OnQueryAsync="@OnQueryAsync" ShowExportButton="true">
    <TableColumns>

    </TableColumns>
</Table>

  2.创建SelectedDictionary 对象和 MySelectedItems 对象 使用 set 访问器给对象赋值。

  //选中对象
  private List<DictionaryDto>? SelectedDictionary { get; set; } = new List<DictionaryDto>();
  //选中的第一行值
  private DictionaryDto CurrentDic { get; set; } = new DictionaryDto();
    
  private List<DictionaryDto>? MySelectedItems
    {
        get { return SelectedDictionary; }
        set
        {
            SelectedDictionary = value;
            if(value.Count > 0)
            {
                CurrentDic.DictionaryType = value[0].DictionaryType;
                CurrentDic.DictionaryTypeName = value[0].DictionaryTypeName;
            }
            else
            {
                CurrentDic.DictionaryType = "";
                CurrentDic.DictionaryTypeName = "";
            }

        }
    }

 

  3.在OnAddAsync方法中返回字典对象,将set访问器赋值的对象带入新建页面。

    private async Task<DictionaryDto> OnAddAsync()
    {
        return CurrentDic;
    }

 

标签:SelectedDictionary,set,Bootstrap,private,选中,带入,CurrentDic,Blazor,value
From: https://www.cnblogs.com/zspwf/p/17304128.html

相关文章

  • Mybatis-Plus详解(一篇带入了解底层原理)
    一.MP简介我们知道,Mybatis属于一个半自动的ORM框架。之所以说Mybatis是一个半自动的ORM框架,原因是它还需要我们自己在注解或是映射文件中编写SQL语句,并没有实现完全的自动化。SQL语句的编写,虽然增加了项目和业务需求实现的灵活性,但对一些基本表的操作而言,无疑增加了数据库操作的......
  • 前端开发-BootStrap
    Bootstrapv3中文文档·Bootstrap是最受欢迎的HTML、CSS和JavaScript框架,用于开发响应式布局、移动设备优先的WEB项目。|Bootstrap中文网(bootcss.com) 创建引入  ......
  • 了解一下Bootstrap
    在制作页面的过程中,我发现了一些更有效率的方法。Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JAVASCRIPT的。基本结构:Bootstrap提供了一个带有网格系统、链接样式、背景的基本结构。这将在Bootstrap基本结构部分详细讲解。......
  • 在Blazor中使用Chart.js
    1.在Blazor中使用Chart.js首先,从Chart.js官方网站下载Chart.js库文件。推荐下载这个构建好的版本https://cdnjs.com/libraries/Chart.js,最新版是v4.2.1在Blazor项目中把刚刚下载好的Chart.js放到wwwroot目录下。将下载的Chart.js文件复制到该文件夹中。在Blazor项目......
  • Python 工程动画:将数学和数据带入生活
    Python工程动画:将数学和数据带入生活像电影一样呈现工程数据:在Matplotlib+数学+控制系统中为Python动画创建代码课程英文名:PythonengineeringanimationsBringmath&datatolife此视频教程共8.53GB,中英双语字幕,画质清晰无水印,源码附件全课程地址:https://xueshu.......
  • bootstrap实现弹出窗口
    bootstrap实现弹出窗口 bootstrap使用modal-dialog实现弹对话框。一个对话框包含3部分:对话框头部 modal-header对话框内容体 modal-body对话框底部 modal-footer如下html可以放入<body>标签的任何位置,我习惯紧随<body>标签之后。html代码片段:<divclass="modalfad......
  • bootstrap5 .jqurey报错Cannot read properties of null (reading 'show')
    //toenabletooltipswiththedefaultconfiguration$('[data-bs-toggle="tooltip"]').tooltip()//toinitializetooltipswithgivenconfiguration$('[data-bs-toggle="tooltip"]').tooltip({boundary:'clipping......
  • Failed to start bean 'documentationPluginsBootstrapper';nested exception is jav
    报错:Failedtostartbean‘documentationPluginsBootstrapper’;nestedexceptionisjava.lang.NullPointerException错误项目版本:springboot最新版本<parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-sta......
  • Blazor assembly 独立部署
    一、新建Blazorassembly客户端程序  assembly部署分为独立部署和托管部署方式     二、发布发布以后生成web.config和wwwroot     三、安装重写模块下载地址,安装后重启网址   https://www.iis.net/downloads/microsoft/url-rewrite#ad......
  • 解决:Failed to start bean 'documentationPluginsBootstrapper'
    原因:在springboot2.6.0以后将SpringMVC默认路径匹配策略从AntPathMatcher更改为PathPatternParser,导致出错,解决办法是切换会原先的AntPathMatcher。解决:配置文件中加上spring:mvc:pathmatch:matching-strategy:ant_path_matcher ......