[转] asp.net core Introducing View Components

本文转自：http://www.c-sharpcorner.com/uploadfile/8c19e8/asp-net-5-getting-started-with-asp-net-mvc-6/

Introducing View Components Another cool feature in MVC 6 is the “View Components”. If you remember, in previous versions of ASP.NET MVC, the Html.Action() helper is typically used to invoke a sub-controller. A sub-controller may display stuff like tag clouds, dynamic links, side bars or whatever. ASP.NET MVC 6 introduced the new View Component to replace widgets that use Html.Action().
View Components also supports fully async allowing you to make a view component asynchronous.
Now let's try to create a very simple view component and let's see how they are used in MVC. To start, create a new folder at the root of your application and name it “ViewComponents”. Within that folder create a new class and name it “HeroListViewComponent” and copy the following code:

1. using Microsoft.AspNet.Mvc;
2. using System.Threading.Tasks;
3. using MVC6Demo.Models;
4. using System.Collections.Generic;
5. namespace MVC6Demo.ViewComponents
6. {
7. public class HeroListViewComponent: ViewComponent
8. {
9. public async Task < IViewComponentResult > InvokeAsync(string type)
10. {
11. var heroes = await GetHeroesAsync(type);
12. return View(heroes);
13. }
14. private Task < IEnumerable < DOTAHero >> GetHeroesAsync(string type)
15. {
16. return Task.FromResult(GetHeroes(type));
17. }
18. private IEnumerable < DOTAHero > GetHeroes(string type)
19. {
20. HeroManager HM = new HeroManager();
21. return HM.GetHeroesByType(type);
22. }
23. }
24. }

Just like the controllers, view components also follow a convention for naming classes. This means that you can create a view component by adding the suffix “ViewComponent” to your class. Adding to that VCs must be public, non-nested and non-abstract classes.
Notes You can also use the [ViewComponent] attribute in your class when referencing a ViewComponent.
You can use the overload method of the View() to specify a view to render from your InvokeAsync method. For example return View(“YourViewName”,model).
The InvokeAsync exposes a method that can be called from a view and it can take an arbitrary number of arguments. As you have seen from the code above, we passed in the parameter “type” in the method to filter the data.
Now let's add the view for the View Component that we just have created. Keep in mind that VC follows a convention too when referencing views. So the first thing to do is to create a new folder within the Home folder. The folder name must be “Components”. Now since we followed the convention in our example, the next thing to do is to create another new folder within the Components folder, this time the folder name must match your class name minus the “ViewComponents” suffix. In this case name the folder “HeroList”. Finally add a new view within the HeroList folder and name it “Default” since we didn't specify the view to render in our InvokeAsync code. Your project structure should now look like the following:

Figure 11: Solution Explorer    In your Default.cshtml file, add the following markup for your View Component's view:

1. @model IEnumerable<MVC6Demo.Models.DOTAHero>
2. <h3>Strength Heroes</h3>
3. <ul>
4. @foreach (var p in Model)
5. {
6. <li>@p.Name</li>
7. }
8. </ul>

And here's how we call the View Component from the main view (Index.cshmtl):

1. <div>
2. @await Component.InvokeAsync("HeroList", "strength")
3. </div>

Running the page will display the following output:

Figure 12: Final Output
That's simple! I hope you will find this article useful. Stay tuned for more!