![]() _ratingControlOptions = new RatingControlOptions Public RatingControlViewComponent(IConfiguration config) Private readonly RatingControlOptions _ratingControlOptions = Component.InvokeAsync("RatingControl", new Here is the full RatingDemoInvokeAsync.cshtml. The sign switches the Razor view page to C#, then what follows is just C# code. Basically, we are just using the capabilities of Razor here. The file itself uses the Component method InvokeAsync, which references the View Component name with its first parameter, and to get parameters into that method expects an anonymous class as it's second parameter. I've created a new Razor view page called RatingDemoInvokeAsync shown here in the solution explorer. To have that View Component do anything for us, we can put it on a Razor page. Using Our View Component on a Razor Page with InvokeAsyncĪt this point, we have a full View Component. The first line says that the model type passed in is just a string, and the second line renders that string wrapped in an h2. The Razor View file, Default.cshtml is just two lines. Return View("Default", ratingControlType) Public IViewComponentResult Invoke(string ratingControlType) Public class RatingControlViewComponent : ViewComponent You can think of these values as the model.īelow is our simple View Component that simply passes a single parameter when invoked (ratingControlType), then passes that parameter as the model to a default.cshtml Razor View. Unlike typical Razor pages that are invoked from a controller and take model parameters as input, View Components are invoked directly by calling the class method Invoke or InvokeAsync, with values. In our case, I'm going to just explicitly create mine, which derives from the class ViewComponent, it has an empty constructor and an Invoke method with just one parameter. There are several ways you can create a view control based on attributes and naming conventions. ![]() Because a View Component typically has both a C# file and a Razor View Page, let's create a new directory in our Components directory called RatingControl, and in that directory, create two files: RatingControlViewComponent.cs and Default.cshtml. In this article, we are going to develop a very useful View Component that can be used over and over in a page for doing ratings. The directory structure scaffolded for us contains a directory called "Pages" and in that, we'll create a new folder in which we will create a new View Component (that's really the point of this article). The first step is to create a new ASP.NET Core 2.1 website.įor the type of Web App, we'll choose "Web Application," which will create a nice simple site using the new ASP.NET Core Razor Pages. I could just as easily use the command line tools (dotnet) to create the app on either Windows or Mac, but I've chosen to use Visual Studio. If you would like to follow along, all the source code used in this article is hosted on GitHub at:įor those more visually inclined, an eight minute video is also available that shows the steps outlined in this article.įor this article, I'm going to use Visual Studio 2017 to create an ASP.NET Core 2.1 website. Just like ASP.NET MVC Controllers, View Components are easily testable, as they can be written to have no side effects, which means less bugs. ![]() They are generated from a C# class derived from the base class ViewComponent and are typically associated with a Razor file to generate markup.īecause of this, View Components nicely separate and encapsulate server-side logic necessary to render output. View Components are completely self-contained objects that consistently render html from a Razor view. View Components are new to ASP.NET Core and are designed to do everything that a Partial View in previous versions of ASP.NET did and more. With View Components, you control what gets shared to your View Components. This means that a Partial View may behave very differently on one Razor page than on another. ![]() Why use View Components and not Partial Views? The biggest reason is that when inserting a Partial View into a Razor page, all the ViewData associated with the calling View is automatically associated with the Partial View. Learn why you should use View Components - and not Partial Views - in your ASP.NET Core projects with this hands-on example.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |