代码之家 › 专栏 › 技术社区 › TitanSloth

交互式渲染或更新On Control

blazor-server-side .net c#

TitanSloth · 技术社区 · 1 年前

我有一个问题,有些东西更新了,而另一些则没有。

当我按下Settings.rarzor页面中的“Set MOTD”按钮时,它做将“inputMOTD”更新为您键入的内容,但MainLayout.razor用于显示motd的“motd”变量不会更新,除非我刷新页面。

我的项目全局设置为InteractiveServer。

我已经强调了对我所说内容的引用。。

Image of the Settings Page and seeing the MainLayout at the same time.

这是我在组件/页面中的Settings.rarzor页面:

@page "/settings"

<PageTitle>Settings</PageTitle>

@*This is the HTML setup of the page*@
<h1 class="text-center">Site Settings Page</h1>
<hr />

<div class="d-grid justify-content-center m-5">
    <label class="text-primary">Please enter the message of the day:</label>
    <input @bind="inputMOTD" placeholder="ie.. Today's message of the day..." type="text" />
    <button class="btn btn-primary" @onclick="SetMotd">Set MOTD</button>
</div>


<div class="d-flex justify-content-center">
    <h2 class="text-danger">Reload page to take effect!</h2>
</div>

@code
{
    public static string inputMOTD { get; set; }

    public static string motd { get; set; } = "Hello there, this is a sample MOTD!";

    public void SetMotd()
    {
        motd = inputMOTD;
        StateHasChanged();
    }
}

这是Components/layout中的MainLayout.razor布局:

@using MistoSite.Components.Pages
@inherits LayoutComponentBase

@* Ultimately the UI *@
<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>

    <main>
        @* This is the entire top row *@
        <div id="container" class="top-row px-4 d-flex flex-row align-items-end justify-content-between">
            @* This is the message of the day *@

            <p id="box" class="text-white text-decoration-underline">@Settings.motd</p>

            @* This is the displayed username *@
            <p class="text-white">
                <a class="text-white" href="/settings">
                    <svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 18 18">
                        <path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0"/>
                        <path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8m8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1"/>
                    </svg>
                    Logged in: User1
                </a>
                | Date: @DateTime.Now
            </p>
        </div>

        <article class="content px-4">
            @Body
        </article>
    </main>
</div>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">ð</a>
</div>

我的应用程序.razor:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <base href="/" />
    <link rel="stylesheet" href="bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="app.css" />
    <link rel="stylesheet" href="MistoSite.styles.css" />
    <link rel="icon" type="image/png" href="favicon.png" />
    <HeadOutlet @rendermode="InteractiveServer"/>
</head>

<body>
    <Routes @rendermode="InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
</body>

</html>

我曾尝试将MainLayout.razor布局组件本身设置为具有渲染模式:InteractiveServer,但没有成功,所以我将项目设置为全局InteractiveServer。我试图在MainLayout的代码块中引用Settings.rarzor页面代码,但没有成功。我所做的是将MainLayout.razor中的MOTD设置为Settings.MOTD,因为它是在Settings.rarchor页面代码中静态初始化的。

我需要设置页面中的“Set Motd”按钮来设置MainLayout.razor布局中的显示Motd,以便在我按下它时更新,而不是在页面刷新后更新。

0 回复 | 直到 1 年前

SMSTJ 1 年前

我不太清楚这是否是问题所在,但StateHasChanged通常必须异步调用

public async void SetMotd()
{
    motd = inputMOTD;
    await InvokeAsync(StateHasChanged);
}

所以这可能会解决问题