In this blog post I am going to show a concrete example of an ASP.NET MVC project using the MVC pattern. In my last blog post I introduced the concept of the MVC pattern. Click here to refer back to that post.

The Controller

We’re going to start with the controller. In this example here we have a home controller. Now very typical in an asp.net application, your controllers will end with this name controller. In this case, the home controller, and they will always inherit from the controller. And inside of this controller, we have one action method called index and it returns an action result. Now an action result returns some sort of view to the application and then displays that content. So the controller is just going to get data for us. In this example, we are getting a list of products, and then we’re taking that list of products and returning it to the view. So here we see the controller going out to the model to get data, and then we see the controller going out and pushing that data to the view.

The Model

So now let’s look at how the data is retrieved from the model. Our model class is just getting data for us. In fact, we don’t care how the data is retrieved for our model. We just know that the model class is going to get that. So in this case, I’m using a static repository class here called product repository. It has a method called get products. This will return a list of products for us. In this case, it’s just an in-memory list of products using this product class that has a name, price, and stock to it. It will new up some new products for us and return that to the products variable here in the controller.

The View

Now the product data is pushed into the view. You might be wondering where does this view exist and what view does it pull up?

Well, asp.net has this convention. In this case, here we are using the home controller with the index action. If you look at the views folder within an asp.net application, you’ll see that there is a home folder for the controller and then an index.cs HTML view. This view is what is rendered.

There are several different layouts that can be used in different folder configurations that asp.net will check, but by convention, this is the simplest setup, a views folder that contains the home folder for the home controller and an index CS HTML file that will be used for the index action. This index CS HTML file contains the template that is used to display the data. In this case, we’re setting the model at the top of the CS HTML file, our list of products.

We’re then setting up some HTML here, a simple table using some bootstrap and displaying this model data. This syntax is using something called Razor. This Razor syntax allows us to quickly display simple data onto a template like this.

The Layout Template

Now you might be thinking where is the rest of the page at? And that is actually determined over here in the layout.cshtml file. If we look at that, this contains our main layout and this render body is actually where our template data will be displayed. So think of this as, this is the main template and then our index data will be injected where that render body section is at.

Now, what determines that this _layout.cshtml file is used? If you go back to the underscore view start, the layout is actually set at this level here. And because it’s set at this higher level, it basically overrides the layout for this section.

Routing

So at this point, we now have a layout displaying our data. But the question is, how did the home controller know to get called when I went to a website URL? The answer to this question is routing. So routing is this piece that sits in the background of asp.net MVC and it is determined by this routeconfig.cs file. The route CS config file can be found in this app_start folder routeconfig.cs. And this is all registered here within this map route function. Here we’re setting the default route.

And if you notice here, the controller action and the ID make up a URL for the route. By default, if no controller is specified in the URL or no action is specified in the URL or no ID is specified, well we are going to use the home controller, which if you will remember, the home controller was the name of our controller and we’ll use the index action to start with. And if you’ll remember, our index action was our default one. There is a reason why we’ve named this home controller in index action because this will be the default index action method that is called to display the product data. So now if we actually run the site, you can see our application renders the model data here.

Now if we look at the URL, you can see that I’m running on localhost on port 62081. Now if I were to type in, home/index, you’ll see that I get the same page. And that’s because home for the home controller and index for the index action method are implied because of that default routing. So I can remove these and still get this home page.

Conclusion

That is a complete example of how the model view controller is used within asp.net. You have the controller, the model, which is this product repository, the view, and routing, which helps us kind of glue all this together and create a complete example of an asp.net MVC website.

Thanks for reading and stay craig on coded.