web-dev-qa-db-fra.com

Acheminement et disposition du blazor à l'intérieur d'une zone

J'ai un projet MVC existant et j'essaie d'y intégrer Blazor. Pour ce faire, j'ai dû mettre à niveau de .NET Core 2.1 vers 3.1 et modifier quelques éléments dans ma classe de démarrage pour que l'application fonctionne comme avant.

Après avoir trié tous les éléments de mise à niveau, j'ai maintenant ajouté le hub à ma méthode de démarrage Configure:

...

app.UseEndpoints(endpoints =>
{
    endpoints.MapControllerRoute(
        name: "areas",
        pattern: "{area:exists}/{controller=Home}/{action=Index}/{id?}");

    endpoints.MapControllerRoute(
        name: "default",
        pattern: "{controller=Home}/{action=Index}/{id?}");

    endpoints.MapControllers();
    endpoints.MapRazorPages();
    endpoints.MapBlazorHub();
});

... et le serveur signe l'enregistrement des services Blazor:

...

services
    .AddMvc(options =>
    {
        ...
    })
    .AddRazorOptions(o =>
    {
        ...
    })
    .AddRazorPagesOptions(options =>
    {
        ...
    });

services.AddServerSideBlazor();

Enfin, j'ai ajouté le script Blazor JS à mon ~/Pages/Shared/_Layout.cshtml vue:

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

J'ai du mal à comprendre ce que le @page la valeur doit être pour un nouveau composant Razor lorsque le composant est dans une vue.

Voici ma structure de dossiers:

enter image description here

Tout dans le dossier Pages est nouveau.

Voici le contenu de Index.razor:

@page "/"

<h3>Sales Homepage</h3>

@code {

}

J'ai essayé ce qui suit pour le @page valeur de l'itinéraire:

  • "/"
  • "/Indice"
  • "/ Prix/Ventes /"
  • "/ Prix/Ventes/Index"

Aucun de ceux-ci n'a fonctionné - je reçois juste une erreur de page non trouvée.

Je ne sais pas non plus comment je suis censé utiliser ma disposition existante dans ~/Pages/Shared/_Layout.cshtml avec ces nouveaux composants.

J'ai jeté un coup d'œil au projet de modèle Blazor échafaudé dans Visual Studio et j'ai également vérifié les documents, mais je n'ai pas trouvé cela particulièrement utile car il est entièrement axé sur de nouveaux projets Blazor.

c#asp.net-coreasp.net-core-mvcblazorblazor-server-side
2
Andy Furniss

Pour ajouter la prise en charge des pages Blazor, vous devez également ajouter un appel à MapFallbackToPage (pour le projet Razor Pages) ou MapFallbackToController (pour le projet MVC) dans la configuration du point de terminaison de démarrage.

Pour le projet MVC, reportez-vous aux étapes ci-dessous:

1.Créez un App.razor Sous le dossier Views

@using Microsoft.AspNetCore.Components.Routing

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        <RouteView RouteData="routeData" />
    </Found>
    <NotFound>
        <h1>Page not found</h1>
        <p>Sorry, but there's nothing here!</p>
    </NotFound>
</Router>

2.Créez un fichier _Host.cshml Sous Views/Shared

@page "/blazor"

@{
    Layout = "_Layout";
}

<app>
    @(await Html.RenderComponentAsync<App>(RenderMode.ServerPrerendered))
</app>

MyApp

——Vues

----Partagé

—————— Host.cshtml

———— App.razor

3. Ajoutez un appel à MapFallbackToController et pointez-le vers le nouveau _Host.cshtml: 

app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllerRoute(
                name: "default",
                pattern: "{controller=Home}/{action=Index}/{id?}");
            endpoints.MapRazorPages();
            endpoints.MapBlazorHub();
            endpoints.MapFallbackToController("Host","Home");
        });

HomeController:

public class HomeController : Controller
{
    public IActionResult Host()
    {
        return View("_Host");
    }
}

4.Index.razor test avec "/"

@page "/"

<h3>Sales Homepage</h3>

Pour le projet Razor Pages, créez simplement _Host.cshtml Et App.razor Sous le dossier Pages, et utilisez endpoints.MapFallbackToPage("/_Host") dans startup.cs

Des étapes plus claires ， se réfèrent à https://mikaelkoskinen.net/post/combining-razor-blazor-pages-single-asp-net-core-3-application

4
Xing Zou