ASP.NET Core Blazor页面传递参数

最新推荐文章于 2024-05-02 20:30:37 发布

[email protected]

最新推荐文章于 2024-05-02 20:30:37 发布

阅读量3.5k

点赞数

分类专栏： ASP.NET Core Blazor 文章标签： c# javascript 开发语言 Powered by 金山文档

本文链接：https://blog.csdn.net/bdbox/article/details/129371651

版权

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

32 篇文章 0 订阅

订阅专栏

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

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();
    }
}

结果：