Blazor University (9)组件 — 代码生成 HTML 属性
原文链接:https://blazor-university.com/components/code-generated-html-attributes/
代码生成 HTML 属性
Razor 在条件 HTML 输出或在 for 循环中输出 HTML 时非常棒,但在元素本身内的条件代码方面,事情就有点棘手了。例如,以下代码无法编译,因为您无法在元素的 <
和 >
内添加 C# 控制块。
<img@foreach(var nameAndValue in AdditionalAttributes){@nameAndValue.Key = @nameAndValue.Value} src="https://randomuser.me/api/portraits/lego/1.jpg" />@code
{Dictionary<string, object> AdditionalAttributes;protected override void OnInitialized(){AdditionalAttributes = new Dictionary<string, object>{["id"] = "EmmetImage",["alt"] = "A photo of Emmet"};base.OnInitialized();}
}
我们可能尝试的下一个方法是编写一个返回字符串的方法,并在 <
和 >
字符内调用它。
<div @IfYouCanSeeThisTextThenTheCodeWasNotExecutedHere />
<span>@IfYouCanSeeThisTextThenTheCodeWasNotExecutedHere</span>@code
{string IfYouCanSeeThisTextThenTheCodeWasNotExecutedHere = "The code here was executed";
}
但这也不起作用。前面的示例将输出以下 HTML。
<div @ifyoucanseethistextthenthecodewasnotexecutedhere=""></div>
<span>The code here was executed</span>`
Razor 只会在以下位置执行 C# 代码:
在元素的内容区域内,例如
<span>@GetSomeHtml()</span>
。在确定要分配给元素属性的值时,例如
<img src=@GetTheImageForTheUrl() />
。在
@code
部分中。
我们需要用来为 HTML 元素生成一个或多个属性 + 值的技术称为“属性展开”。属性展开涉及将 Dictionary<string, object>
分配给具有特殊名称 @attribute
的属性。
<div @attributes=MyCodeGeneratedAttributes/>@code
{Dictionary<string, object> MyCodeGeneratedAttributes;protected override void OnInitialized(){MyCodeGeneratedAttributes = new Dictionary<string, object>();for(int index = 1; index <= 5; index++){MyCodeGeneratedAttributes["attribute_" + index] = index;}}
}
前面的代码将输出一个具有 5 个属性的 <div>
。
<div attribute_1="1" attribute_2="2" attribute_3="3" attribute_4="4" attribute_5="5"></div>
特殊情况
一些 HTML 属性,例如 readonly
和 disabled
不需要任何值——它们仅存在于元素上就足以使它们生效。事实上,即使应用诸如 false
之类的值仍然会激活它们。以下 <input>
元素将是只读和禁用的。
<input readonly="false" disbabled="false"/>
在 razor 视图中,规则略有不同。如果我们输出 readonly=@IsReadOnly
或 disabled=@IsDisabled
- 只要分配的值为 false
,razor 根本不会输出该属性;当分配的值为 true
时,razor 将在不分配值的情况下输出元素。
<input readonly=@true disabled=@false/>
将导致生成的 HTML 完全不包含 disabled 属性。
Blazor University (9)组件 — 代码生成 HTML 属性相关推荐
- Blazor University (5)组件 — 字面量、表达式和指令
原文链接:https://blazor-university.com/components/literals-expressions-and-directives/ 字面量.表达式和指令 源代码[1] ...
- Blazor 模板化组件开发指南
翻译自 Waqas Anwar 2021年4月15日的文章 <A Developer's Guide To Blazor Templated Components> [1] 在我之前的一篇 ...
- ASP.NET Core Blazor Webassembly 之 组件
关于组件 现在前端几大轮子全面组件化.组件让我们可以对常用的功能进行封装,以便复用.组件这东西对于搞.NET的同学其实并不陌生,以前ASP.NET WebForm的用户控件其实也是一种组件.它封装ht ...
- [Asp.net core 3.1] 通过一个小组件熟悉Blazor服务端组件开发
通过一个小组件,熟悉 Blazor 服务端组件开发.github:https://github.com/git-net/NBlazors 一.环境搭建 vs2019 16.4, asp.net cor ...
- 使用JQuery的Blazor日期选择器组件
目录 介绍 使用代码 _Host.cshtml site.js JQDatePicker.razor JQDatePicker.razor.cs 如何使用? DatePicker.razor 介绍 在 ...
- 将动态路由、布局和RouteViews添加到Blazor应用程序组件
目录 概述 代码和示例 Blazor应用程序 应用组件 路由视图服务 路由视图管理器 动态布局 动态路由 自定义路由数据 更新RouteViewService RouteNotFoundManager ...
- 拖拽式Vue组件代码生成平台(LCG)新版详细介绍
拖拽式Vue组件代码生成平台是一款小猴自研的Vue代码生成工具,英文全称:Low Code Generator,简称LCG.它也是一种LowCode解决方案.通过它可以快速完成Vue组件的代码骨架搭建 ...
- c# BackgroundWorker组件介绍(属性、方法、事件)
c# BackgroundWorker组件介绍(属性.方法.事件) 2008-07-03 16:28 在VS2005中添加了BackgroundWorker组件,该组件在多线程编程方面使用起来非常方便 ...
- react 不能往组件中传入属性的值为 undefined
在使用 andt design 的时候遇到个需求,需要清除 Select 组件选中后的值,让它变成什么都没选中,显示 placeholder 刚开始以为设置为 null 即可,结果发现设置为 null ...
最新文章
- P1525 关押罪犯(扩展域并查集/二分图)
- itunes未能连接到iphone_FonePaw iPhone Data Recovery mac版(iphone数据恢复工具)
- 内核:多内核操作模式
- stream 的方式遍历(亲测)
- 根目录访问php 404,nginx配置后只有根目录首页index.php能访问,其他页面404
- 郑州百知面试题 SSM试题三
- 处于计算机学科的基础地位,谈谈离散数学在计算机学科中的地位和作用(原稿)...
- vivado中交织模块_搞定Markdown中的图片,一劳永逸的方法!
- linux 中文 音乐播放器,linux下的常见音乐播放器
- docker compose dns 缓存_Docker深入浅出 | Docker Compose多容器实战
- java jama_java矩阵包jama的简单操作
- 离散数学第二版屈婉玲教材pdf_离散数学 第二版 [屈婉玲,耿素云,张立昂 编著] 2015年版...
- win10安装影子系统导致的蓝屏,终止代码:BAD_SYSTEM_CONFIG
- wdr7660虚拟服务器设置,TP-Link TL-WDR7660路由器密码设置
- RealFlow在线教程翻译(5)——Shattered Glass (破碎的玻璃杯)
- TIKTOK海外直播公会如何申
- iOS让App后台运行方法小结
- 【小白】【新手向】Hexo+Github搭建个人博客
- linux软件 mac地址,Linux MAC地址
- uos应用_统信 UOS 私有化应用商店解决方案发布,支持应用分发管理