从 .cshtml 迁移到 *.razor答案

【问题标题】：Migration from .cshtml to *.razor从 .cshtml 迁移到 *.razor
【发布时间】：2022-01-14 23:11:55
【问题描述】：

可以在 DummyPage.razor 中使用 Url.Content 和脚本吗？需要将DummyPage.cshtml到DummyPage.razor的代码实现。

@page "/apidocumentation"
<div class="container-flex">
    <div class="col-lg-12 control-section">
        <div class="content-wrapper">
            <div class="row">
                <rapi-doc spec-url="@Url.Content("doc/api/dummy.json")"></rapi-doc>

                <section Scripts>
                    <script src="@Url.Content("lib/rapidoc/dummy.js")"></script>
                </section>
                
            </div>
        </div>
    </div>
</div>

@code {

}

【问题讨论】：

标签： javascript razor

【解决方案1】：

你需要为 JS 注入 IJSRuntime。它允许将 JavaScript 代码加载到您的组件中。

如果你的 JS 函数有一个特定的名字，你可以用这些函数调用：InvokeAsync/InvokeVoidAsync。

示例：

在您的 _Host.cshtml 中添加脚本标签（附注~ 等于你的wwwroot 文件夹）

...
<script src="~/js/myJS.js"></script>
<script src="_framework/blazor.server.js"></script>

myJS.js

function MyScript(name) {
    return "Hello " + name;
}

Test.razor

@page "/test"
@inject IJSRuntime JS

<p id="myId">@Text</p>
<button @onclick="OnClick">Submit</button>

@code {
    private string Text { get; set; }

    private async void OnClick()
    {
        var exampleText = "World!";
        try
        {
            Text = await JS.InvokeAsync<string>("MyScript", exampleText);
        }
        catch(JSException ex)
        {
            Text = ex.Message;
        }

        StateHasChanged();
    }
}

按下按钮后的示例：

如果您的 JS 脚本使用函数 onload（例如），您可以覆盖并使用 OnAfterRenderAsync 函数。

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        //invoke only one time, after your component is loaded
        if (firstRender)
        {
            await JS.InvokeVoidAsync("onload");
        }
        
    }

我不知道 rapi-doc，也许你可以通过带有变量的后端传递 json。

【讨论】：