惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

腾讯CDC
N
Netflix TechBlog - Medium
aimingoo的专栏
aimingoo的专栏
P
Proofpoint News Feed
F
Fortinet All Blogs
大猫的无限游戏
大猫的无限游戏
I
InfoQ
V
V2EX
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
有赞技术团队
有赞技术团队
G
Google Developers Blog
L
LangChain Blog
博客园_首页
M
MIT News - Artificial intelligence
H
Hackread – Cybersecurity News, Data Breaches, AI and More
月光博客
月光博客
IT之家
IT之家
量子位
宝玉的分享
宝玉的分享
S
SegmentFault 最新的问题
Stack Overflow Blog
Stack Overflow Blog
V
Visual Studio Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
雷峰网
雷峰网

博客园 - hrx521

微信公众号H5开发踩坑记:为什么POST返回的页面会显示HTML源码 SQL NOT IN 子查询存在 NULL 的经典行为陷阱--NULL 三值逻辑(TRUE / FALSE / UNKNOWN) SQL用窗口函数做逐行累计的实用用例 我的蝶翼斑马鱼繁殖要领总结 如何从操作系统的角度,理解C#语言的Async Await 异步机制内部状态机的运行原理? C#扩展方法对软件工程构建的促进示例和总结 基于原数据库新创建一个带部分数据做为初始数据的数据库的思路 sql调优记录,不要在join on 条件中使用过多的条件 发布和更新自己的nuget包 Rust的枚举类型Enum Rust语言特色语法记录 Rustup-init.exe安装后执行cargo run 报错:`link.exe` returned an unexpected error的解决办法 FastReport.OpenSource .Net下开源免费报表打印组件 SQL使用Merge在一个语句中完成插入、更新和删除操作 IIS应用程序回收导致应用中Hangfire等后台任务无法正常启动工作的解决方法 Microsoft.AspNetCore.Identity 的使用记录 C# xml文档反序列化记事 债券与债券基金 Linq补充学习 Blazor学习记录_11.身份认证与授权 Blazor学习记录_10.C#和JS互操作_访问WEB API Blazor学习记录_9.预呈现_渲染树
Blazor学习记录_12._IIS部署_组件的引用_HTML元素的引用
hrx521 · 2024-04-08 · via 博客园 - hrx521

27. Blazor项目发布与IIS部署

27.1 如果是Auto模版的项目,选择两个项目中的Server项目进行发布

27.2 服务器必要的运行时安装与配置

28.组件的引用

如果想在引用Blazor组件的同一个页面上的其他代码部分中再次甚至多次使用这个组件的引用,该怎么做呢?

28.1 组件引用的实现方法

在引用组件的地方,给组件增加一个属性:@ref="_refComponent",其中 _refComponent 是用被引用的组件类型声明的一个C#变量。然后就可以在引用组件的页面上的其他地方多次使用该变量来调用组件。
如代码:
引用组件的页面:

@Page "/ref-Component"
<button class="btn btn-warning" @onclick="@(e=>_refComponent!.Toggle())">
@if(_refComponent is not null && _refComponent.Expand)
{
    @("外部按钮控制展开")
}
else
{
    @("外部按钮控制折叠")
}
</button>
</br>
<Collapse @ref="_refComponent">
    这里是伸缩的内容
</Collapse>
@code
{
    Collapse? _refComponent;
}

Collapse.razor 组件的页面:


所有组件的事件都是延迟类的,其他则为非延迟类也可以说是渲染类的。做这样的概念区分的目的在于:如果有一个组件的引用、或组件的成员的引用,那么对于它们来说只有组件渲染完成后(即OnAfterRender生命周期及之后)这些引用才不为空,在引用到这些可能还没有完成渲染的组件的地方一定要做非空判断和处理。而对于延迟类的则不需要过分关注这一点,因为它们只能在组件渲染完成后才会被调用到。

29.HTML元素的引用

在js中,我们要引用一个html元素,就可以使用元素的id属性值等方法,如js代码:

function changeToRed(id){
const el = document.getElementById(id);
el.style.backgroundColor = 'red';
}

29.1使用ElementReference类型来创建html元素引用

@Page "/html-ref"
<div> @onclick = "ChangeColor" @ref="_refDiv">
    我是一个div
</div>
@inject IJSRuntime JS
@code
{
    ElementRefrence? _refDiv;
    async Task ChangeColor()
    {
        await JS.InvokeVoidAsync("changeColor",_refDiv);
    }
}

app.js文件中的js代码

window.changeColor = function(element){
    if(!element){
        throw 'el is null';
    el.style.backgroundColor='red';
    }
}