首页 > 其他分享 >HTML Select Drop Down List Data Source From Web API

HTML Select Drop Down List Data Source From Web API

时间:2025-01-04 09:56:11浏览次数:1  
标签:Web Drop 选单 编辑 API Select 页面

前端,html还是mvc页面,我们想实现一个下拉选单,写<select>指定id或者name,稍后在js代码能获取到它。

 

#7~#9行,没有参数条件可传,保留为空。#19 Web API地址。#21为异步方法,看下,

#37,是为了不让代码写在一块,Insus.NET已经重构成另一个function,也是本示例中重点核心代码,


下面继续看看,下拉选单,在编辑时,需要给下拉选单一个前期已经选择好的值,并在下拉选单呈现时,它是选中状态,
编辑或是详细页面,js加载数据,并把各自绑定给页面tag,

#6行,下拉选单数据绑定,

#25行,Web API地址,具体API如何写,可以参本博客前此时间的随笔。
#27行,已经被重构成另外单独function,仔细看来,

 

#41行,看到否, selectedValue参数,它是默认的下拉选单选中的值。

 

#59行,从下拉选单的数据源中,判断键值与selectedValue相同,即在生成option时,添加selected。

基本上完成了,非编辑与编辑,Insus.NET使用不同语法动态生成下拉选单的option。

最后来个动态演示,

 

标签:Web,Drop,选单,编辑,API,Select,页面
From: https://www.cnblogs.com/insus/p/18651486

相关文章

  • Web安全基础:反序列化漏洞详解(含PHP,Python示例)
    当系统接收和处理外部输入的数据时,可能会通过反序列化过程执行恶意代码或操作。这个漏洞的根本原因在于,系统对反序列化数据的处理不够严格,导致攻击者能够将精心构造的数据注入到反序列化流程中,进而达到远程代码执行、数据篡改、权限提升等目的。序列化与反序列化序列化:将......
  • 发布blazor应用到Linux, 使用nginx作为WebSocket代理
    Blazor使用了SignalR连接,而SignalR使用的是WebSocketWebSocket协议提供了一种创建支持客户端和服务器之间实时双向通信的Web应用程序的方法。作为HTML5的一部分,WebSocket使开发此类应用程序比以前的方法容易得多。大多数现代浏览器都支持WebSocket,包括Chrome、Firefox......
  • SharePoint Online API 获取Image列
    前言最近,有个需求,想要获取Image类型的列进行展示正文使用的RESTAPI如下,img是Image列的列明,测试发现还区分大小写_api/Web/Lists/getbytitle('ListName')/Items(ItemId)?$select=img请求返回的正文,如下:{"d":{"__metadata":{"id":"......
  • GitHub Actions 自动构建和部署容器到 Azure Web App
    在当今快速发展的软件开发世界中,持续集成和持续部署(CI/CD)已成为提高效率和保证质量的关键实践。本文将详细介绍如何使用GitHubActions来自动构建Docker容器并将其部署到AzureWebApp。这个自动化流程不仅能节省大量时间,还能显著减少人为错误,让开发团队更专注于代码质......
  • 【Seed-Labs 2.0】Cross-Site Scripting (XSS) Attack Lab (Web Application: Elgg)
    Overview跨站脚本(XSS)是网络应用程序中常见的一种漏洞。攻击者可利用该漏洞向受害者的网络浏览器注入恶意代码(如JavaScript程序)。利用这些恶意代码,攻击者可以窃取受害者的凭证,如会话cookie。利用XSS漏洞可绕过浏览器为保护这些凭证而采用的访问控制策略(即同一来源......
  • 使用Vue3实现Ollama WebUI
    开始大家好呀,最近我在研究LLM,但是是本地大语言模型。其中我主要使用的软件是Ollama。Ollama可以方便的下载及运行LLMOllama提供了一套RESTApi,并且已经有了ollama-js这个库,可以方便的调用接口,所以我们可以自己写一套WebUI。那么为什么不用别人写好的呢?我找了些开源项目,但大......
  • 基于 GitHub API 的 Issue 和 PR 自动化解决方案
    文章目录摘要引言优化Issue和PR管理的方法工具选择流程优化自动化Issue和PR管理代码逻辑详解获取Issue数据为Issue添加标签将Issue分配给开发者主逻辑实际运行效果进一步扩展QA环节总结参考资料摘要在开源项目中,Issue和PullRequest(PR)的数量庞......
  • javaweb基于SSH开发车辆管理系统源码+论文+开题报告+任务书+PPT 课程设计 毕业设计
    ......
  • 24年javaWeb考试复习
    1、servlet1、servlet是运行在web服务器端的应用程序配置方式(两种):·web.xml<servlet> <servlet-name>小名</servlet-name> <servlet-class>包名</servlet-class></servlet><servlet-mapping> <servlet-name>小名</se......
  • .net9 openapi
    usingJwtAuth.Api.Services;usingMicrosoft.AspNetCore.Authentication.JwtBearer;usingMicrosoft.IdentityModel.Tokens;usingScalar.AspNetCore;usingSystem.Text;varbuilder=WebApplication.CreateBuilder(args);//Addservicestothecontainer.//......