ASP.NET MVC Series: Article 3

Hello all lovely people out there, this is the 3rd article in the series.

Over here, we will create a new MVC project via Visual Studio, and will see what VS brings for us in the project, what kind of files, extensions, markups etc are formed for us on the fly.

Let's jump in. Oh yeah, there are few pre-requisites to start with, most of you would be knowing them pretty much, but let me re-iterate them to be on the same page.

Pre-Requisites:

• Presence of Visual Studio on the machine.In this series, we are going to concentrate on MVC5, hence presence of VS 2015, VS 2013, VS 2012 should be pretty okay.

• Presence of SQL Server for database interactions. This article won't cover any thing related to databases at the moment, but the future articles will. Hence its better to have SQL server installed. I have plain old SQL Server 2008 R2 installed on my local machine.

The below snapshot shows the version of VS on my local machine. I have VS 2015 Community Edition.

Let's dive in, open your VS instance, click on File>New Project. Let's choose the .NET Framework version as 4.5 (although in VS 2015 currently there are versions greater than 4.5 as well), we will see that we have only one template as ASP.NET Web Application, because Microsoft is moving towards One ASP.NET. Click on that very template, give a project name, the directory details and click OK.

Select MVC template in the next screen from the ASP.NET 4.5 templates list, as shown below and click OK.

Change the authentication to "No Authentication" for the time being, click on OK, and voila your solution has been created by VS.:)

We can see that there are 2 projects in the solution, 1) Main MVC Project 2) Tests Project.

Let's have a look at the structure of the solution, the structure should look something as below:

SportsApp, the main MVC project has the following entities:

• App_Data: Contains the application data files, may be Localdb, xml files, .mdf files etc.
• App_Start: Contains the class files which are going to be executed once the application boots and starts. Will have BundleConfig.cs, FilterConfig.cs, RouteConfig.cs etc
• Content: As the name implies, it contains the .css files for styles and stuffs 
• Controllers: Contains class files for the controllers.
• fonts: Contains files for fonts and stuffs, .svg, .woff files
• Models: Class files for models
• Scripts: Has multiple JavaScript files, jQuery, Bootstrap.js etc
• Views: Contains different folders for different views as per the controller name, Views are files with .cshtml or .vbhtml extension
• Global.asax: Has application level events
• packages.config: List of all the Nuget packages available in the main MVC project
• web.config: Application level configuration

SportsApp.Tests, the unit test project has:

• Controllers: class files for test controllers
• app.config: Configuration Settings for the Test project
• packages.config: List of all the Nuget packages available in the test project

Let's try to run the project as it is. Click on the play icon on the menu bar, and let VS do its magic.

We will see that IIS Express gets started, the application runs on a random port, and we see the below page as the output on the browser.

Now, how does the above page appear as the output, where did all the beautiful content come from. These are the questions to be answered.

Well, MVC works on a concept called Routing. In the RouteConfig.cs class, we have a default route configured by VS, when we created the whole solution structure, something as below:

public class RouteConfig

    {

        public static void RegisterRoutes(RouteCollection routes)

        {

            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(

                name: "Default",

                url: "{controller}/{action}/{id}",

                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }

            );

        }

    }

The url pattern is : {controller}/{action}/{id}, but when we see the url of the output page, it is http://localhost:1686/, where there is no controller/action name, nor is there any id. Then how does it work?

The answer is, default values for the controller/action/id.

We can see in the above route that the default value for controller is "Home", for action it is "Index", where as id is an optional parameter, can be given or can be omitted.

As the application starts, the search for Index action method of the Home controller starts, the default application created in this scenario has that Index method in the Home Controller, as below:

public class HomeController : Controller

    {

        public ActionResult Index()

        {

            return View();

        }

   }

We can see that this very action method returns a View, so which view to return?

The search goes on for the Index view of the Home controller, we can see that in the Views folder, we have a folder named as Home, and we do have a view named as Index.cshtml.

When we open the Index.cshtml file, we can see that there's some html written, which gets rendered onto the browser.

This concludes the article, over here we have seen the basic skeleton of a MVC application, the default route of the application. We have also seen roughly, as to how the Index view was rendered.

The concept behind a view getting selected and rendered on the browser is little technical, we will see that in the next article in great detail. Till then see ya and stay tuned.