View Components w ASP.NET MVC 6. DSP16 – część 18

Nową funkcją w ASP.NET MVC 6 jest View Components. View Component jest podobny do Parial View. Stworzenie własnego Viewu Componentu jest łatwiejsze niż mi się na początku wydawało. Postanowiłem zrobić prostą rzecz przy pomocy tej nowej funkcji – wyświetlić gracz.

Po pierwsze stworzyłem osobny folder w solucji: ViewComponents. Następnie klasę DisplayAllPlayersViewComponenets. Klasa to musi dziedziczyć po ViewComponenet.

using Microsoft.AspNet.Mvc;
using PokerWebsite.Core.Domain;
using System.Collections.Generic;
using System.Threading.Tasks;

namespace PokerWebsite.ViewComponents
{
 public class DisplayAllPlayersViewComponents : ViewComponent
 {
 public DisplayAllPlayersViewComponents()
 {

 }

 public async Task<IViewComponentResult> InvokeAsync(IEnumerable<Player> Player)
 { 
 return View(Player);
 }
 }
}

Klasę DisplayAllPlayersViewComponenets można mieścić się w dowolnym miejscu w całej solucji.

Następnie trzeba stworzyć odpowiedni folder oraz plik cshtml. Do wyboru są mam dwie opcje:

  • Views/Shared/Components/DisplayAllPlayersViewComponents/Default.cshtml
  • Views/Player/Components/DisplayAllPlayersViewComponents/Default.cshtml

W przypadku lokalizacji pliku Default.cshtml trzeba trzymać się sztywno podanych lokalizacji. Ja wybrałem drugą opcję.  Mój plik Default.cshtml wygląda następująco:

@model IEnumerable<PokerWebsite.Core.Domain.Player>

<h3>Players</h3>
<ul>
	@foreach (var item in Model)
	{
		<li>@item.Name</li>
	}
</ul>

Metoda  public async Task<IViewComponentResult> InvokeAsync(IEnumerable<Player> Player) jest ściśle powiązana z widokiem Views/Player/Components/DisplayAllPlayersViewComponents/Default.cshtml.

Aby wywołać ViewComponent wystarczy na przykład w pliku  Views/Player/Index.cshtml odpowiednio go wywołać:

@model IEnumerable<PokerWebsite.Core.Domain.Player>

<h1>Players</h1>

@await Component.InvokeAsync("DisplayAllPlayersViewComponents", @Model)

I gotowe!

 

Aby dowiedzieć się więcej na temat View Components polecam linki poniżej:

http://aspnetmvc.readthedocs.io/projects/mvc/en/latest/views/view-components.html

https://blog.mariusschulz.com/2015/11/26/view-components-in-asp-net-mvc-6

http://www.dotnetcurry.com/aspnet-mvc/1244/view-components-aspnetmvc-6-aspnet-core

Leave a Comment

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *