När ett stort antal sidor anropar samma vyresultat kan vi kapsla in samma innehåll i en vykomponent, naturligtvis kan vi också skicka parametrar till visningskomponenten och returnera svarsresultatet, scenarier: topplistor, formulär, tabeller etc., denna artikel använder asp.net kärna 3.1 för att förklara hur man använder ViewComponent view component-tutorialen.
Visa komponenter
View-komponenten liknar en lokal vy, men är kraftfullare. Vykomponenten använder inte modellbindningar, utan förlitar sig endast på den data som tillhandahålls när modellen anropas. Den här artikeln skrevs med hjälp av kontrollers och vyer, men visningskomponenten kan också användas med Razor Pages.
Visa komponenter:
- Rendera block istället för hela svaret.
- Inkluderar samma separation av bekymmer och testbarhetsfördelar som finns mellan kontrollanter och åsikter.
- Den kan ha parametrar och affärslogik.
- Brukar anropas från layoutsidan.
View-komponenter kan användas var som helst där det finns återanvändbar renderingslogik som är för komplex för en lokal vy, såsom:
- Dynamisk navigationsmeny
- Tag Cloud (där databasen frågas)
- Inloggningspanel
- Kundvagn
- Nyligen publicerade artiklar
- Sidofältsinnehåll på en typisk blogg
- Inloggningspanelen visas på varje sida med en länk för att logga ut eller in, beroende på användarens inloggningsstatus
Delvy
I asp.net MVC 5 kan vi använda en lokal vy med följande kod:
Anropsmetod:
ViewComponent är ett alternativ till lokala vyer.
ViewComponent för att komma igång
Visa komponentklass:
- Konstruktorberoendeinjektion stöds fullt ut
- Inte involverad i kontrollerns livscykel, vilket betyder att du inte kan använda filter i visningskomponenter
- Utan vidare dröjsmål, låt oss gå rakt på sak där vi vill sammanfatta komponentfunktionaliteten i en klassificering av urbana områden.
Först skapar du en ny "ViewComponents"-mapp under projektkatalogen och skapar en ny "RootClassification.cs"-klassfil med följande kod:
På visningssidan skapar vi en ny "Components"-mapp under "/Views/Shared"-mappen i projektet, sedan skapar vi en ny "RootClassification"-mapp (detta är objektet med den nya komponentklassen vi skapade), och skapar därefter en ny "Default.cshtml"-fil, koden är följande:
Strukturen är följande:
Den detaljerade vägen är: /Views/Shared/Components/RootClassification/Default.cshtml
Varför bygga en sådan väg? Detta har att göra med hur asp.net Core-komponenten fungerar.
Runtimen söker efter vyn i följande sökväg:
/Views/{Controller Name}/Components/{View Component Name}/{View Name}
/Views/Shared/Components/{View Component Name}/{View Name}
/Pages/Shared/Components/{View Component Name}/{View Name} Standardnamnet på vykomponenten är Default, vilket betyder att din vyfil vanligtvis heter Default.cshtml. När du skapar ett resultat av en vykomponent eller anropar en View-metod kan du ange ett annat vynamn.
Genom att anropa kan vi anropa där vi behöver använda komponenten, koden är följande:
Kör projektet igen med följande rendering:
|