Did you hear the news? ASP.NET 5 is dead it is now called ASP.NET Core 1.0. The name for this next generation of ASP.net(that’s the capitalization I’m using because this isn’t your grandmother typing in YAHOO.COM) has been up in the air for a while. We first heard the real details about ASP.net vNext at the MVP summit in 2014 and the first question on everybody’s mind was “what it was going to be called?”. At the time there wasn’t a decision on that.
ASP.NET Core MVC introduces a new configuration system that adds flexibility and simultaneously enables cross-platform support (in a way that makes sense on other platforms). In this post we’re going to cover the basics of configuration and what you can expect as you look at the project template from File -> New Project in Visual Studio 2015.
The ASP.NET Monsters are here to explain everything they know about ASP.NET Core and the new version of the MVC Framework, known as ASP.NET Core MVC. Once or so per week Dave, James and Simon publish a new, short video about some aspect of ASP.net in their own, monstrous, style.
Our monsterific videos are hosted on Channel 9, and you can view the entire list here, or start watching from the beginning below.
In previous versions of MVC, we used Child Actions to build reusable components / widgets that consisted of both Razor markup and some backend logic. The backend logic was implemented as a controller action and typically marked with a
[ChildActionOnly] attribute. Child actions are extremely useful but as some have pointed out, it is easy to shoot yourself in the foot.
Child Actions do not exist in MVC 6. Instead, we are encouraged to use the new View Component feature to support this use case. Conceptually, view components are a lot like child actions but they are a lighter weight and no longer involve the lifecycle and pipeline related to a controller. Before we get into the differences, let’s take a look at a simple example.
View components are made up of 2 parts: A view component class and a razor view.
To implement the view component class, inherit from the base
ViewComponent and implement an
InvokeAsync method. This class can be anywhere in your project. A common convention is to place them in a ViewComponents folder. Here is an example of a simple view component that retrieves a list of articles to display in a What’s New section.
Much like a controller action, the Invoke method of a view component simply returns a view. If no view name is explicitly specified, the default
Views\Shared\Components\ViewComponentName\Default.cshtml is used. In this case,
Views\Shared\Components\WhatsNew\Default.cshtml. Note there are a ton of conventions used in view components. I will be covering these in a future blog post.
To use this view component, simply call
@Component.Invoke from any view in your application. For example, I added this to the Home/Index view:
The first parameter to
@Component.Invoke is the name of the view component. Any additional parameters will be passed to the
Invoke method that has a matching signature. In this case, we specified a single
int, which matches the
Invoke(int numberOfItems) method of the
So far this doesn’t really look any different from what we had with Child Actions. There are however some major differences here.
With view components, parameters are passed directly to your view component when you call
@Component.InvokeAsync() in your view. There is no model binding needed here since the parameters are not coming from the HTTP request. You are calling the view component directly using C#. No model binding means you can have overloaded
Invoke methods with different parameter types. This is something you can’t do in controllers.
View components don’t take part in the controller lifecycle. This means you can’t add action filters to a view component. While this might sound like a limitation, it is actually an area that caused problems for a lot of people. Adding an action filter to a child action would sometimes have unintended consequences when the child action was called from certain locations.
A view component never directly handles an HTTP request so you can’t call directly to a view component from the client side. You will need to wrap the view component with a controller if your application requires this behaviour.
When you inherit from the base
ViewComponent class, you get access to a few properties that are very similar to controllers:
Most notably, you can access information about the current user from the
User property and information about the current request from the
Request property. Also, route information can be accessed from the
RouteData property. You also have the
ViewData. Note that the ViewBag / ViewData are shared with the controller. If you set ViewBag property in your controller action, that property will be available in any ViewComponent that is invoked by that controller action’s view.
Like controllers, view components also take part in dependency injection so any other information you need can simply be injected to the view component. In the example above, we injected the
IArticleService that allowed us to access articles form some remote source. Anything that you could inject into a controller can also be injected into a view component.
View components are a powerful new feature for creating reusable widgets in MVC 6. Consider using View Components any time you have complex rendering logic that also requires some backend logic.
Without a diverse set of folks working in the web space, I think we could all agree that web development would be a lot less interesting. We are fortunate to have some of the community’s best and brightest thinkers join us to chat here on the Monsters.
Episode 79: ASP.NET Core Code Labs Nov 17, 2016
Episode 78: Azure Functions Nov 15, 2016
Episode 61: Building APIs Aug 25, 2016
Episode 59: The Razor View Engine Aug 18, 2016
Episode 55: Moving the Business to ASP.NET Core Aug 4, 2016
Episode 53: Basics of Web API July 28, 2016
Episode 47: The State of EF Core July 8, 2016
Episode 43: Hello Bundler Minifier June 23, 2016
Episode 42: Goodbye to Gulp June 21, 2016
If you’re developing in ASP.NET Web API you are familiar with the concept of inheriting from the base ApiController class. This class is still around in ASP.NET 5, but it is likely not meant for you to use. Here’s why your cheese has moved.
Grab yourself your copy of Visual Studio 2015 and buckle up! Today we’re going to create our own dnx command with support for options and arguments.
If you are a developer on the .NET stack, you’ve now got access to a great new extension to your development environment. DNX, or the .NET Execution Environment, is a powerful new extensibility point that you can leverage to build project extensions, cross-platform utilities, build-time extensions and support for automation. In this article I’ll walk you through the process of building your own custom DNX command on top of ASP.NET 5.0.
Updated Nov 22, 2015: Updated to account for changes in ASP.NET 5 RC1
In the last few blog posts, I have spent some time covering the tag helpers that are built in to MVC 6. While the built in tag helpers cover a lot of functionality needed for many basic scenarios, you might also find it beneficial to create your own custom tag helpers from time to time.
In this post, I will show how you can easily create a simple tag helper to generate a Bootstrap progress bar. NOTE: Thank you to James Chambers for giving me the idea to look at bootstrap components for ideas for custom tag helpers.