在ASP.NET MVC（Razor Pages）中如何将模型数据传递给TypeScript并调用对应函数？

嘿，我来帮你搞定这个问题！在Razor Pages里把后端PageModel的数据传给TypeScript并调用你的postData函数，其实有几种很实用的方式，我给你详细拆解一下：

方法一：通过全局变量传递（最直接的方式） #

这种方式适合简单场景，把后端数据暴露给全局作用域，让TypeScript直接读取。

步骤1：在PageModel中定义并赋值属性 #

首先在你的Razor Page对应的PageModel类里，声明需要传递的三个属性，然后在OnGetAsync（或者OnPostAsync，根据你的页面触发逻辑）里给它们赋值：

public class YourPageModel : PageModel
{
    public string Token { get; set; }
    public string ApiUrl { get; set; }
    public string RedirectUrl { get; set; }

    public async Task OnGetAsync()
    {
        // 这里替换成你的实际业务逻辑，比如从配置、数据库获取值
        Token = "user-specific-token-123";
        ApiUrl = "https://your-api-domain.com/endpoint";
        RedirectUrl = Url.Page("/Success"); // 用Url.Page生成正确的页面路由
    }
}

步骤2：在Razor页面中注入全局变量 #

在你的Razor页面（.cshtml文件）里，用Json.Serialize把PageModel的属性序列化成JSON，然后赋值给一个全局的window变量。注意要用Html.Raw确保JSON不会被HTML编码：

@{
    ViewData["Title"] = "Link Page";
}

<!-- 你的页面HTML内容 -->

<!-- 把后端数据暴露给全局作用域 -->
<script>
    window.linkConfig = @Html.Raw(Json.Serialize(new {
        token = Model.Token,
        url = Model.ApiUrl,
        redirectUrl = Model.RedirectUrl
    }));
</script>

<!-- 引入编译后的TypeScript文件（假设你已经把Link.ts编译成了Link.js） -->
<script src="~/js/Link.js"></script>

步骤3：在TypeScript中读取全局变量并调用函数 #

在你的Link.ts里，先扩展Window接口让TypeScript识别这个全局变量，然后读取数据创建LinkConfig对象，最后调用postData函数：

interface LinkConfig { 
    token: string; 
    url: string; 
    redirectUrl: string; 
}

// 扩展Window接口，避免TypeScript报错
interface Window {
    linkConfig: LinkConfig;
}

async function postData(config: LinkConfig): Promise<void> {
    // 你的原函数逻辑不变
    const postObject = { deviceToken: config.token, isLink: true };
    try {
        const result: any = await callRestEndpoint(config.url, 'POST', postObject);
        console.log("Post success:", result);
        const resultElement = document.getElementById("result");
        if (resultElement) {
            resultElement.appendChild(document.createTextNode(JSON.stringify(result)));
        }
        if (result.success) {
            window.location.href = config.redirectUrl;
        }
    } catch (error) {
        console.error("Post failed:", error);
        const resultElement = document.getElementById("result");
        if (resultElement) {
            resultElement.appendChild(document.createTextNode(JSON.stringify(error)));
        }
    }
}

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', () => {
    const config = window.linkConfig as LinkConfig;
    postData(config).catch(err => console.error("函数调用出错:", err));
});

方法二：通过HTML元素的data属性传递（更符合DOM规范的方式） #

如果你不想用全局变量，也可以把数据存在HTML元素的data-*属性里，然后在TypeScript中读取。

步骤1：PageModel部分和方法一完全一致 #

还是在YourPageModel里定义并赋值三个属性。

步骤2：在Razor页面中添加带data属性的元素 #

在页面里加一个隐藏的元素（比如div），把PageModel的属性赋值给对应的data属性：

<div id="link-config-container"
     data-token="@Model.Token"
     data-api-url="@Model.ApiUrl"
     data-redirect-url="@Model.RedirectUrl"
     style="display: none;"></div>

<script src="~/js/Link.js"></script>

步骤3：在TypeScript中读取data属性并调用函数 #

在Link.ts里，通过元素ID找到这个容器，然后读取data属性创建LinkConfig对象：

interface LinkConfig { 
    token: string; 
    url: string; 
    redirectUrl: string; 
}

async function postData(config: LinkConfig): Promise<void> {
    // 你的原函数逻辑不变
    const postObject = { deviceToken: config.token, isLink: true };
    try {
        const result: any = await callRestEndpoint(config.url, 'POST', postObject);
        console.log("Post success:", result);
        const resultElement = document.getElementById("result");
        if (resultElement) {
            resultElement.appendChild(document.createTextNode(JSON.stringify(result)));
        }
        if (result.success) {
            window.location.href = config.redirectUrl;
        }
    } catch (error) {
        console.error("Post failed:", error);
        const resultElement = document.getElementById("result");
        if (resultElement) {
            resultElement.appendChild(document.createTextNode(JSON.stringify(error)));
        }
    }
}

document.addEventListener('DOMContentLoaded', () => {
    const configElement = document.getElementById('link-config-container');
    if (configElement) {
        const config: LinkConfig = {
            token: configElement.dataset.token || '',
            url: configElement.dataset.apiUrl || '',
            redirectUrl: configElement.dataset.redirectUrl || ''
        };
        postData(config).catch(err => console.error("函数调用出错:", err));
    }
});

一些需要注意的小细节 #

• XSS防护：两种方式都自带安全防护，Json.Serialize会自动转义特殊字符，Razor给data属性赋值时也会自动做HTML编码，不用担心注入问题。
• TypeScript编译：确保你的TypeScript配置正确，能编译成浏览器可识别的JavaScript，并且路径引用正确。
• 函数触发时机：一定要用DOMContentLoaded事件或者把script标签放在body底部，确保DOM元素和TypeScript函数都加载完成后再执行调用。

内容来源于stack exchange