当前位置: 首页 > news >正文

Selector选择器在AspNetCore中的用法

Selector选择器在AspNetCore中的用法

背景

项目编辑过程中会选择其所属的上级项目,而上级项目在数据结构中是以ParentID的方式表达,而非Project类型,用户不会记录也不应该记录ID值,因此应提供Selector项目下拉框供用户选择。

但是MVC的Razor页面绑定数据时绑定的时单个对象或者IEnumerate集合对象,因此,如果在页面上绑定项目列表则成为完成的难题。

绑定数据思路

首先声明一个Selector对象

<select name="cmdProjects" id="cmdProjects" class="form-control">
</select>

使用Ajax进行后台加载数据,

$.getJSON("@Url.Action("GetDDL_List", "Projects")"

上述指令为调用的后台函数为GetDDL_List,控制器为Projects,相当远转换为链接为

/Projects/GetDDL_List

整体javascript代码如下

 $(document).ready(function () {$("#cmdProjects").empty();$.getJSON("@Url.Action("GetDDL_List", "Projects")",function (data) {$.each(data, function (i, item) {$("<option></option>").val(item["value"]).text(item["text"]).appendTo($("#cmdProjects"));});});

在Controller中获取数据

public async Task<JsonResult> GetDDL_List()
{List<Project>? list = await ProjectUtils.Instance.ToListAsync();List<SelectListItem> listitem = new List<SelectListItem>();foreach (var prj in list){SelectListItem item = new SelectListItem(){Text = prj.Name.ToString(),Value = prj.ID.ToString()};listitem.Add(item);}return Json(listitem);
}

指定上级节点在选择器中的位置

javascript的.each方法中i变量表示索引,因此在.each之外定义临时变量index,然后在循环体内进行判断,最后将值赋值给选择器

$(document).ready(function () {...$.each(data, function (i, item) {...if(item["value"]==@Model.ParentID){index = i;}});$("option").eq(index).prop("selected", 'selected')});});

选项选中后触发的事件

$('#cmbProjects').on('change', function(){var selectedOption = $("#cmbProjects option:selected");$("#ParentID").val(selectedOption.val());
});

相关文章:

Selector选择器在AspNetCore中的用法

Selector选择器在AspNetCore中的用法 背景 项目编辑过程中会选择其所属的上级项目&#xff0c;而上级项目在数据结构中是以ParentID的方式表达&#xff0c;而非Project类型&#xff0c;用户不会记录也不应该记录ID值&#xff0c;因此应提供Selector项目下拉框供用户选择。 但…...

anaconda3最新版安装|使用详情|Error: Please select a valid Python interpreter

Win11查看安装的Python路径及安装的库 anaconda3最新版安装|使用详情|Error: Please select a valid Python interpreter 介绍开源包管理系统和环境管理系统 &#xff0c;包括多种语言的包安装&#xff0c;运行&#xff0c;更新&#xff0c;删除&#xff0c;最重要的是可以解…...

java八股文面试[多线程]——锁的分类

1.1 可重入锁、不可重入锁 Java中提供的synchronized&#xff0c;ReentrantLock&#xff0c;ReentrantReadWriteLock都是可重入锁。 重入&#xff1a;当前线程获取到A锁&#xff0c;在获取之后尝试再次获取A锁是可以直接拿到的。 不可重入&#xff1a;当前线程获取到A锁&…...

儿童安全门和围栏,以及游戏围栏等美国站要求的合规标准是什么?

儿童安全门和围栏 儿童安全门和围栏用于在门口&#xff08;如门道&#xff09;内设置围栏&#xff0c;或用作自支撑围栏&#xff0c;将幼儿可能在其中活动的区域围起来。这些商品可能由塑料、金属、乙烯树脂或木制组件等材料制成。此政策包括但不限于可扩展围栏、伸缩安全门和…...

kafka配合ElasticStack技术栈的搭配使用

今日内容: - kafka生产环境调优; - kafka配合ElasticStack技术栈的搭配使用; - zookeeper集群部署; - zookeeper的ACL; - zookeeper的调优; - PB级别项目; - ES8集群搭建/elk; (待定...) 订阅1个的topic: 老男孩: 10 多个不同的主题…...

对极几何与三角化求3D空间坐标

一&#xff0c;使用对极几何约束求R,T 第一步&#xff1a;特征匹配。提取出有效的匹配点 void find_feature_matches(const Mat &img_1, const Mat &img_2,std::vector<KeyPoint> &keypoints_1,std::vector<KeyPoint> &keypoints_2,std::vector&l…...

英语语法笔记

1.英语五大句型 主谓&#xff08;主语动词&#xff09; 主谓宾&#xff08;主语动词宾语&#xff09; 主谓宾宾&#xff08;主语动词简接宾语直接宾语&#xff09; 主谓宾补&#xff08;主语动词宾语宾语补语&#xff09; 主系表&#xff08;主语系动词主语补语&#xff09; 1…...

ES6的面向对象编程以及ES6中的类和对象

一、面向对象 1、面向对象 &#xff08;1&#xff09;是一种开发思想&#xff0c;并不是具体的一种技术 &#xff08;2&#xff09;一切事物均为对象&#xff0c;在项目中主要是对象的分工协作 2、对象的特征 &#xff08;1&#xff09;对象是属性和行为的结合体 &#x…...

ConfigMaps in K8s

摘要 ConfigMaps是Kubernetes&#xff08;K8s&#xff09;中用于存储应用程序配置信息的一种资源对象。它将key-value对存储为Kubernetes集群中的一个资源&#xff0c;并可以在Pod中以卷或环境变量的形式使用。 ConfigMaps的设计目的是将应用程序配置与应用程序本身解耦。它可…...

《机器人学一(Robotics(1))》_台大林沛群 第 6 周 【轨迹规划_直线转折处抛物线平滑】Quiz 6

步骤&#xff1a; 1、 编程 将PPT 的例子 跑一遍&#xff0c; 确保代码无误 2、根据题目 修改 相关参数 文章目录 求解代码_Python 解决的问题&#xff1a; 线段间转折点 的 速度 不连续 解决方法&#xff1a; 将直线段 两端 修正为 二次方程式 二次项圆滑 求解代码_Python …...

关于vscode的GitLens插件里的FILE HISTORY理解

最近在用vscode的GitLens插件开发项目遇到这个疑问&#xff0c;先看图&#xff1a; 每当我点击FILE HISTORY 一个commit时&#xff0c;正常来说显示器会自动将点击的提交版本和它上一个提交版本进行比较&#xff0c;如果单纯这么理解的话就错了&#xff0c;因为GitLens的File …...

通过idea实现springboot集成mybatys

概述 使用springboot 集成 mybatys后&#xff0c;通过http请求接口&#xff0c;使得通过http请求可以直接直接操作数据库&#xff1b; 完成后端功能框架&#xff1b;前端是准备上小程序&#xff0c;调用https的请求接口用。简单实现后端框架&#xff1b; 详细 springboot 集…...

力扣(LeetCode)算法_C++——移位字符串分组

给定一个字符串&#xff0c;对该字符串可以进行 “移位” 的操作&#xff0c;也就是将字符串中每个字母都变为其在字母表中后续的字母&#xff0c;比如&#xff1a;“abc” -> “bcd”。这样&#xff0c;我们可以持续进行 “移位” 操作&#xff0c;从而生成如下移位序列&am…...

Vue2 与Vue3的区别?面试题

Vue 2和Vue 3是Vue.js框架的不同版本&#xff0c;在面试中经常涉及到它们之间的区别。以下是Vue 2和Vue 3的主要区别&#xff1a; 性能提升&#xff1a;Vue 3在性能方面进行了优化。Vue 3引入了更高效的Diff算法&#xff0c;提高了渲染性能。此外&#xff0c;Vue 3还进行了代码…...

java代码:Random和Scanner应用的小例子-猜数字小游戏

//java代码&#xff1a;Random和Scanner应用的小例子-猜数字小游戏 package com.test; import java.util.Random; import java.util.Scanner; /* * 需求&#xff1a;猜数字小游戏。 * 系统产生一个1-100之间的随机数&#xff0c;请猜出这个数据是多少? * * 分析…...

python调用git出错:ImportError: Failed to initialize: Bad git executable.

报错信息 #报错信息 Traceback (most recent call last): File “”, line 1, in File “C:\Python27\lib\site-packages\git_init_.py”, line 85, in raise ImportError(‘Failed to initialize: {0}’.format(exc)) ImportError: Failed to initialize: Bad git executab…...

【C语言】入门——指针

目录 ​编辑 1.指针是什么 2.指针类型和指针运算 2.1指针-整数 2.2指针-指针 2.3指针的关系运算 3.野指针 3.1野指针成因 &#x1f44d;指针未初始化&#xff1a; &#x1f44d;指针越界访问&#xff1a; &#x1f44d;指针指向空间释放&#xff1a; 3.2如何规避野指针 …...

C#_预处理指令

1. 预处理器指令指导编译器在实际编译开始之前对信息进行预处理。 所有的预处理器指令都是以 # 开始。且在一行上&#xff0c;只有空白字符可以出现在预处理器指令之前。预处理器指令不是语句&#xff0c;所以它们不以分号&#xff08;;&#xff09;结束。 C# 编译器没有一个单…...

容器命令(docker)

文章目录 前言一、docker容器命令0、准备工作1、新建容器并启动2、退出容器3、列出所有的运行的容器4、删除容器5、启动和停止容器的操作 总结 前言 本文主要介绍docker中与容器相关的一些命令&#xff0c;是对狂神课程的一些总结&#xff0c;作为一个手册帮助博主和使用docke…...

Vue3 ElementPlus el-cascader级联选择器动态加载数据

参考了这位的大佬的写法 element el-cascader动态加载数据 &#xff08;多级联动&#xff0c;落地实现&#xff09;_el-cascader 动态加载_林邵晨的博客-CSDN博客 <el-cascader style"width: 300px" :props"address" v-model"addressValue" …...

【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15

缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下&#xff1a; struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

IGP(Interior Gateway Protocol,内部网关协议)

IGP&#xff08;Interior Gateway Protocol&#xff0c;内部网关协议&#xff09; 是一种用于在一个自治系统&#xff08;AS&#xff09;内部传递路由信息的路由协议&#xff0c;主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

令牌桶 滑动窗口->限流 分布式信号量->限并发的原理 lua脚本分析介绍

文章目录 前言限流限制并发的实际理解限流令牌桶代码实现结果分析令牌桶lua的模拟实现原理总结&#xff1a; 滑动窗口代码实现结果分析lua脚本原理解析 限并发分布式信号量代码实现结果分析lua脚本实现原理 双注解去实现限流 并发结果分析&#xff1a; 实际业务去理解体会统一注…...

在鸿蒙HarmonyOS 5中使用DevEco Studio实现录音机应用

1. 项目配置与权限设置 1.1 配置module.json5 {"module": {"requestPermissions": [{"name": "ohos.permission.MICROPHONE","reason": "录音需要麦克风权限"},{"name": "ohos.permission.WRITE…...

如何在网页里填写 PDF 表格?

有时候&#xff0c;你可能希望用户能在你的网站上填写 PDF 表单。然而&#xff0c;这件事并不简单&#xff0c;因为 PDF 并不是一种原生的网页格式。虽然浏览器可以显示 PDF 文件&#xff0c;但原生并不支持编辑或填写它们。更糟的是&#xff0c;如果你想收集表单数据&#xff…...

九天毕昇深度学习平台 | 如何安装库?

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

代码随想录刷题day30

1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币&#xff0c;另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额&#xff0c;返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...

Go 语言并发编程基础:无缓冲与有缓冲通道

在上一章节中&#xff0c;我们了解了 Channel 的基本用法。本章将重点分析 Go 中通道的两种类型 —— 无缓冲通道与有缓冲通道&#xff0c;它们在并发编程中各具特点和应用场景。 一、通道的基本分类 类型定义形式特点无缓冲通道make(chan T)发送和接收都必须准备好&#xff0…...

Monorepo架构: Nx Cloud 扩展能力与缓存加速

借助 Nx Cloud 实现项目协同与加速构建 1 &#xff09; 缓存工作原理分析 在了解了本地缓存和远程缓存之后&#xff0c;我们来探究缓存是如何工作的。以计算文件的哈希串为例&#xff0c;若后续运行任务时文件哈希串未变&#xff0c;系统会直接使用对应的输出和制品文件。 2 …...