ASP.NET Core Blazor页面传递参数

最新推荐文章于 2025-09-22 05:03:48 发布

原创最新推荐文章于 2025-09-22 05:03:48 发布 · 4.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#c# #javascript #开发语言

ASP.NET Core Blazor 专栏收录该内容

32 篇文章

订阅专栏

本文展示了一个Razor页面组件的例子，其中包含一个输入框和两个按钮，用于演示C#与JavaScript之间的交互。用户可以修改用户名，点击按钮后，会触发JS调用C#方法或反之。同时，组件实现了状态更新以反映用户界面的变化。

对页面的除了常用的组件参数外，还可以用如下方式：

Index.razor

@page "/"

<PageTitle>@UserName</PageTitle>

<div id="divUserName">
    <input type="text" id="txtUserName" value="@UserName"/>
    <a href="/counter/@UserId">计数页面</a>
</div>

 <button class="btn btn-primary" onclick="InvokeCSharp()">JS调用C#</button>
 <button class="btn btn-primary" @onclick="InvokeJS">C#调用JS</button>

Index.razor.cs

using System.Diagnostics;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components;
using Microsoft.JSInterop;

namespace MyProject.Pages;

public partial class Index
{
    private static Func<string,Task> TestAsync;

    private string UserName{set;get;} = "小明";

    private string UserId{set;get;} = "2";

    [Inject]
    private IJSRuntime JS{set;get;}

    private async void InvokeJS()
    {
        await JS.InvokeVoidAsync("showInfo", "小红");
    }

    protected override void OnInitialized()
    {
        base.OnInitialized();
        TestAsync = LocalTestAsync;
    }

    [JSInvokable]
    public static async Task Test(string value)
    {
        await TestAsync.Invoke(value);
    }

    private async Task LocalTestAsync(string value)
    {
        if (UserName == "小明")
        {
            UserName = value;
        }
        else 
        {
            UserName = "小明";
        }

        Console.WriteLine("UserName=" + UserName);

        StateHasChanged();
    }
}

结果：