Wie man wiederverwendbare Komponente in ASP.NET Core mit Javascript erstellt

Question

Seit dem Umzug nach MVC habe ich mich immer gefragt (und jetzt brauche ich) eine wiederverwendbare "Komponente", die ich auf jeder Ansicht, die etwas, das üblich ist, haften kann Jede Ansicht und enthalten jQuery innerhalb dieser Komponente. Ich spreche über View Components und sie sind ordentlich, aber ich habe noch keinen brauchbaren Bedarf für sie gefunden (außer eine Adresse oder Telefonnummer anzuzeigen). Nichts wirklich interaktives.

Also, wenn ich dies mit einer View Component nicht tun kann, was mache ich? Ich habe eine View-Komponente, die JavaScript verwendet, aber nur, weil ich den Abschnitt, den ich in meinem Layout definiert habe, nicht referenzieren konnte. Ich habe Dutzende von Artikeln gelesen, in denen steht, dass dies beabsichtigt ist. Nun, meiner Meinung nach ist das ein schlechtes Design und sperrt diese Komponenten als nicht interaktiv (oder begrenzt).

Answer 1

Ich habe immer gefragt (und bin jetzt in der Notwendigkeit) eine wiederverwendbare „Komponente“, die ich auf einer beliebigen Ansicht haften können

Ich denke, was Sie suchen templates ist. Es ist wiederverwendbar, da Modelle Anzeige- und Editor-Vorlagen haben können. Es ist so ziemlich so einfach wie:

wiederverwendbar:

public class Car 
{ 
    public string Model { get; set; } 
} 

Controller-Modell:

public class IndexVM 
{ 
    public Car Car { get; set; } 
} 

index.cshtml

@model IndexVm 

@Html.DisplayFor(m => m.Car) 

shared/displaytemplates/car.cshtml

@model Car 

@Html.DisplayFor(m => m.Model) 

Wie bei Skripten ist die Idee, nur das JS zu rendern, schon vor langer Zeit gestorben. Deshalb hat Bootstrap bootstrap.min.js, bootstrap.min.css. Es gibt keinen guten Grund, nicht Bündel alles zusammen, so dass der Client es alle auf einmal cachen kann.

Komponenten anzeigen Ich fühle mich in MVC irgendwie hacky. Sie sind eine Art dieses fangen alles funktioniert in MVC und WebPages, aber war nicht wirklich durchdacht.

More Reading

Answer 2

erstellen Service:

public class MyViewContext 
{ 
    public bool IsJqueryRequired { get; set; } 
    public object MyAwesomeSharedObject { get; set; } 
} 

Dann fügen Sie es dem DI Container scoped (Scoped wird jede neue Anfrage erstellt):

services.AddScoped<MyViewContext, MyViewContext>(); 

Ihrer Ansicht nach können Sie es auf diese Weise zugreifen:

@inject MyViewContext MyViewContext 

Jeder wo sonst durch einfache Verwendung constructor injection.

Eine weitere gute Option ist die Verwendung von TagHelper und TagHelperContext. Here ist ein großartiger Artikel darüber.