Getting started with ASP.NET MVC 5 – part 1

The ride at Retro is an adventurous ride and this comes with many surprises. Stuck to the hype of JavaScript and its incredible unending frameworks, the ride took an early turn. First, by jumping to Kotlin and now MVC 5.

The latest will be the center of our attention as we dive deeper.

As suggested by Rouan(one of the senior rabbits), any project should begin with a “Why” in mind.

Why Kotlin? Why JavaScript? Why … Why … And Why.

Though that seems like a food for thought, it is indispensable for the problems lying ahead.

Without “Why”, the “How” becomes a challenging puzzle. We’ll answer this as we go on this journey.

 

What is MVC?

MVC stands for Model – View – Controller. It might tell you more and just stick to it.

Widely adopted for web development, the MVC we are talking about is ASP.NET MVC.


Model: This represents the application data and behavior.

Don’t be intimidated if you hear it being called domain model. It’s the same.

 

View: This represents what the user sees or what the screen displays to the user.

Views in Asp.net MVC are tied to the name of the controller.

BlogController will expect a view named blog to match its controller to it.

ASP.Net views are a mixture of HTML and c# codes prefixed with an @ sign.

Controller: This represents the handler of HTTP requests. Requests made to the browser by typing in the URL or clicking events that translate into selecting specific HTTP addresses.

The Model-View-Controller would not be complete without the inclusion of the router.

Router: Responsible for the selection of the right controller to handle the request.

But, Laurent, what did you say?

Bear with me.

Here is an illustrated version to support your visual learning:

Within the BlogController class, the routing is accurately handled by one of the methods within the class. The methods are referred as actions.
Interestingly enough, the controller handles the routing in two ways:
If it happens to be that the comments within our blog controller are handled by the “comment” function, it will look like this:

Tools required

 

Microsoft Visual Studio [https://www.visualstudio.com/downloads/ ] – Compulsory

ReSharper [https://www.jetbrains.com/resharper/download/ ] – Optional

 

Where to start?

 

Open up Visual Studio
Click on “File” (tabs at the top), from the drop-down menu select “new” by clicking on it.
Furthermore, select on “project”.

It’s important to give your project a meaningful name, and in this case, name your project based on your team or client request.

Selecting the “web” and “ASP.NET Web Application(.NET framework) will set you on the right path.

Depending on your intention, these templates will be provided to give you a head start.
Before jumping with your selection, we will have to ensure whether you want to add the default authentication that comes handy at a later stage.

Different options are available but the “Individual User Account”’ option will provide controllers that authentication for you.
Here is what comes next:

This might be scary as it doesn’t show any of your project files. Yes. It “might” be scary.
To avoid redoing the recently said process, you will have to search for “solution explorer” under the “view” tab.

Where is it, Laurent?

Here it is:

And here it is:

If you have come this far, you’re on the road to mastering MVC 5. The journey is still long but it all starts here.

 

The pleasure of jumping straight to the code might be tempting but let us understand first what all the files entail before fully diving in.

 

App_Start: Contains a few classes that are called when the application is started. Among them stands the RouteConfig file responsible for the router.

Content: Contains all the CSS files and images

Controllers: Contains all the controllers needed to handle the requests. Having selected “individual user account” while creating the project, we will see three files listed. They will be named as AccountController, HomeController, and ManagerController.

    AccountController: Handles default actions for signup, sign in and log out

    HomeController: Represents the home page

    ManageController: Handles actions that handle requests around the user’s profile like changing passwords and social login.

 

Fonts: Just as you read it, it contains the font needed for your application.

 

Models: Contains all the model classes.

 

Scripts: Contains all the JavaScript files.

 

Views: Contains folders named after the controller. This is done so to all the controller to render data on the view with the same name as the controller.

Shared: Contains views that are or can be used across all the controllers.

Favicon .ico: Is the icon of the application displayed in the browser.

Global .asax: Class that provides hooks for different events in the life cycle of the application.

Packages.config: Used by nugget package manager. Nugget is similar to npm in node and handles the download of dependencies in different places without giving you the impression that it does so. Therefore making your development process less painful.

Web.config: XML file that includes the configuration of the application.

Laying the foundation is substantial and before going further, it is important to remember words written above.

Being practical developers, we’ll continue on to create value by working on a small project up on the second part. Stay connected.