27. Blazor项目发布与IIS部署
27.1 如果是Auto模版的项目,选择两个项目中的Server项目进行发布
27.2 服务器必要的运行时安装与配置
- 1.安装运行时
可先通过命令行输入: dotnet --info 来查看本地已经安装的运行时情况。
运行时官方下载页面:
https://dotnet.microsoft.com/zh-cn/download/dotnet/8.0
IIS下载 windows-hosting-bundle-installer:
https://dotnet.microsoft.com/zh-cn/download/dotnet/thank-you/runtime-aspnetcore-8.0.3-windows-hosting-bundle-installer - 2.在IIS中添加网站并配置
a. 检测模块,进入iis【模块】确保包含模块 AspNetCoreModuleV2
b. 进入【处理程序】,确保有 AspNetCore
c. 配置应用程序池,由于IIS只是转发,所以把应用程序池.NET CLR版本改为【无托管代码】
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';
}
}