Gdzie powinienem napisać JavaScript dla View Components?

Question

Przyzwyczajam się do view components w MVC 6, a kilka lat temu zapytałem o similar question o widoki częściowe. Jeśli zbuduję komponent widoku obejmujący zwykły przypadek użycia, który wymaga własnego skryptu JavaScript, gdzie umieścić ten skrypt JavaScript? Wiem, że jest to dangerous at best, aby mieć JavaScript w widokach częściowych, ale znacznie łatwiej byłoby zawrzeć go w komponencie widoku, niż w widoku zawierającym lub osobnym pliku, do którego ma się odwoływać widok zawierający.

Załóżmy na przykład, że mam komponent widoku z dwoma listami rozwijanymi. Wybór w pierwszym menu określa, które elementy pojawiają się w drugim menu rozwijanym. Oczywiście jest to obsługiwane w JavaScript, ale gdzie mogę to umieścić?

Answer 1

Z mojego doświadczenia z komponentami ASP.NET 5 View Components, powiedziałbym, że najlepszą rzeczą do zrobienia z nimi jest utrzymanie ich w izolacji i w jednym miejscu, aby można było łatwo zarządzać w długoterminowych projektach.

W jednym z moich projektów ASP.NET, mam rozwinięte struktury Zobacz Komponenty takie jak ten:

Zobacz, kod Backend i model są w jednym miejscu, dzięki czemu podczas poruszania się folder, jesteś pewien, że przenosisz cały komponent. Ponadto, gdy modyfikujesz je, masz szybki dostęp do wszystkich swoich części.

Będzie wygodnie umieścić JavaScript, który jest silnie sprzężony ze składnikiem również w takiej strukturze. Możesz to zrobić, po prostu tworząc plik w folderze komponentu, a następnie wpisując plik , który skopiuje plik JS do wwwroot. Od tego momentu będzie można powiązać że kod JavaScript w .cshtml komponentu przy użyciu standardowej składni:

<script src="~/Components/yourcomponent.js"></script> 

Aby uzyskać taką strukturę w moim projekcie, mam przedłużony Razor, aby móc sprawdzić mój CSHTML komponentu we właściwym miejscu. Aby to zrobić, dodałem ten kod w Startup.cs:

public partial class Startup 
{ 
    public void ConfigureServices(IServiceCollection services) 
    { 
     //non relevant code skipped 
     services.AddMvc().AddRazorOptions(ConfigureRazor); 

    } 

    public void ConfigureRazor(RazorViewEngineOptions razor) 
    { 
     razor.ViewLocationExpanders.Add(new ViewLocationExpander()); 
    } 
} 

a klasa ViewLocationExpander jest:

public class ViewLocationExpander : IViewLocationExpander 
{ 
    protected static IEnumerable<string> ExtendedLocations = new[] 
    { 
     "/{0}.cshtml" 
    }; 

    public void PopulateValues(ViewLocationExpanderContext context) 
    { 
     //nothing here 
    } 

    public IEnumerable<string> ExpandViewLocations(ViewLocationExpanderContext context, IEnumerable<string> viewLocations) 
    { 
     //extend current view locations 
     return viewLocations.Concat(ExtendedLocations); 
    } 
} 

Następnie należy wywołać składnik tak (z dowolnego .cshtml widzenia):

@await Component.InvokeAsync("NavigationComponent",new NavigationComponentModel()) 

Ostatnie pytanie

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 Powiązane problemy

• Brak powiązanych problemów^_^