如何在Blazor静态SSR增强导航JS函数中访问Razor属性？

针对静态SSR场景下的Blazor增强导航JS函数（onLoad/onUpdate/onDispose），可以通过以下两种方式传递或访问Razor页面的属性值：

方法一：通过PageScript组件的Args参数传递 #

直接利用PageScript的Args属性将Razor页面的属性封装为对象传递给JS模块，JS函数可直接接收该参数。

修改后的Razor页面代码 #

@page "/page-with-script"
@using BlazorPageScript

<PageTitle>Enhanced Load Script Example</PageTitle>

<!-- 通过Args传递SomeProp属性 -->
<PageScript Src="./Components/Pages/PageWithScript.razor.js" Args="@new { SomeProp = SomeProp }" />

Welcome to my page.

@code {
    public string SomeProp { get; set; } = "Hello, World!";
}

修改后的JS函数代码 #

// 在onLoad/onUpdate中接收传递的参数
export function onLoad(args) {
  console.log('Loaded, SomeProp:', args.someProp);
}

export function onUpdate(args) {
  console.log('Updated, SomeProp:', args.someProp);
}

export function onDispose() {
  console.log('Disposed');
}

方法二：通过DOM元素存储属性并读取 #

将Razor属性值渲染到页面的隐藏DOM元素中，JS函数通过DOM选择器读取该元素的属性值。

修改后的Razor页面代码 #

@page "/page-with-script"
@using BlazorPageScript

<PageTitle>Enhanced Load Script Example</PageTitle>

<PageScript Src="./Components/Pages/PageWithScript.razor.js" />

<!-- 用隐藏元素存储SomeProp的值 -->
<div id="page-data" data-some-prop="@SomeProp" style="display: none;"></div>

Welcome to my page.

@code {
    public string SomeProp { get; set; } = "Hello, World!";
}

修改后的JS函数代码 #

export function onLoad() {
  const pageDataEl = document.getElementById('page-data');
  const someProp = pageDataEl.dataset.someProp;
  console.log('Loaded, SomeProp:', someProp);
}

export function onUpdate() {
  const pageDataEl = document.getElementById('page-data');
  const someProp = pageDataEl.dataset.someProp;
  console.log('Updated, SomeProp:', someProp);
}

export function onDispose() {
  console.log('Disposed');
}

内容的提问来源于stack exchange，提问作者gmeister_99