Интерактивность страницы Blazor и режим рендеринга

Обратитесь к следующему примеру кода:

1. Создайте библиотеку классов Razor (RazorClassLibrary3) и измените страницу Component1.razor, как показано ниже:

    @page "/secondpage"
    @* you can also add the following reference in the _Imports.razor page. *@
    @using static Microsoft.AspNetCore.Components.Web.RenderMode
   
    @rendermode InteractiveServer
   
    <div class = "my-component">
        This component is defined in the <strong>RazorClassLibrary3</strong> library.
    </div>
   
    <button @onclick = "UpdateMessage">Click</button>
    <div>
        @message
    </div>
    @code {
        public string message = "initial data";
        public void UpdateMessage()
        {
            message = "Hello";
        }
    }
   

2. Создайте приложение Blazor Asp.net 8 (используйте шаблон веб-приложения Blazor и выберите режим интерактивной визуализации сервера). Используйте это приложение в качестве основного приложения.

3. В главном приложении добавьте ссылку на проект RazorClassLibrary3.

4. В главном приложении добавьте сборку библиотеки классов Razor.

   в файл Program.cs добавьте следующий код (измените имя проекта на свое):

    app.MapRazorComponents<App>()
        .AddInteractiveServerRenderMode()
        .AddAdditionalAssemblies(typeof(RazorClassLibrary3.Component1).Assembly);
   

   В Главном приложении измените код, как показано ниже (измените имя проекта на свое):

    <Router AppAssembly = "typeof(Program).Assembly" 
    AdditionalAssemblies = "new[] { typeof(RazorClassLibrary3.Component1).Assembly }" >
        <Found Context = "routeData">
            <RouteView RouteData = "routeData" DefaultLayout = "typeof(Layout.MainLayout)" />
            <FocusOnNavigate RouteData = "routeData" Selector = "h1" />
        </Found>
    </Router>
   

5. Запустите основное приложение и перейдите на вторую страницу, результат будет выглядеть следующим образом:

   нажмите кнопку, вот так:

   Как мы видим, вторая страница интерактивная. Вы можете обратиться к приведенному выше образцу.