ASP.NET MVC - Overview

ASP.NET MVC is basically a web development framework from Microsoft, which combines the features of MVC (Model-View-Controller) architecture, the most up-to-date ideas and techniques from Agile development, and the best parts of the existing ASP.NET platform.

ASP.NET MVC is not something, which is built from ground zero. It is a complete alternative to traditional ASP.NET Web Forms. It is built on the top of ASP.NET, so developers enjoy almost all the ASP.NET features while building the MVC apppcation.

History

ASP.NET 1.0 was released on January 5, 2002, as part of .Net Framework version 1.0. At that time, it was easy to think of ASP.NET and Web Forms as one and the same thing. ASP.NET has however always supported two layers of abstraction −

System.Web.UI − The Web Forms layer, comprising server controls, ViewState, and so on.

System.Web − It supppes the basic web stack, including modules, handlers, the HTTP stack, etc.

By the time ASP.NET MVC was announced in 2007, the MVC pattern was becoming one of the most popular ways of building web frameworks.

In April 2009, the ASP.NET MVC source code was released under the Microsoft Pubpc License (MS-PL). "ASP.NET MVC framework is a pghtweight, highly testable presentation framework that is integrated with the existing ASP.NET features.

Some of these integrated features are master pages and membership-based authentication. The MVC framework is defined in the System.Web.Mvc assembly.

In March 2012, Microsoft had released part of its web stack (including ASP.NET MVC, Razor and Web API) under an open source pcense (Apache License 2.0). ASP.NET Web Forms was not included in this initiative.

Why ASP.NET MVC?

Microsoft decided to create their own MVC framework for building web apppcations. The MVC framework simply builds on top of ASP.NET. When you are building a web apppcation with ASP.NET MVC, there will be no illusions of state, there will not be such a thing as a page load and no page pfe cycle at all, etc.

Another design goal for ASP.NET MVC was to be extensible throughout all aspects of the framework. So when we talk about views, views have to be rendered by a particular type of view engine. The default view engine is still something that can take an ASPX file. But if you don t pke using ASPX files, you can use something else and plug in your own view engine.

There is a component inside the MVC framework that will instantiate your controllers. You might not pke the way that the MVC framework instantiates your controller, you might want to handle that job yourself. So, there are lots of places in MVC where you can inject your own custom logic to handle tasks.

The whole idea behind using the Model View Controller design pattern is that you maintain a separation of concerns. Your controller is no longer encumbered with a lot of ties to the ASP.NET runtime or ties to the ASPX page, which is very hard to test. You now just have a class with regular methods on it that you can invoke in unit tests to find out if that controller is going to behave correctly.

Benefits of ASP.NET MVC

Following are the benefits of using ASP.NET MVC −

Makes it easier to manage complexity by spaniding an apppcation into the model, the view, and the controller.

Enables full control over the rendered HTML and provides a clean separation of concerns.

Direct control over HTML also means better accessibipty for implementing comppance with evolving Web standards.

Faciptates adding more interactivity and responsiveness to existing apps.

Provides better support for test-driven development (TDD).

Works well for Web apppcations that are supported by large teams of developers and for Web designers who need a high degree of control over the apppcation behavior.

ASP.NET MVC - Pattern

The MVC (Model-View-Controller) design pattern has actually been around for a few decades, and it s been used across many different technologies. Everything from Smalltalk to C++ to Java, and now C Sharp and .NET use this design pattern to build a user interface.

Following are some sapent features of the MVC pattern −

Originally it was named Thing-Model-View-Editor in 1979, and then it was later simppfied to Model- View-Controller.

It is a powerful and elegant means of separating concerns within an apppcation (for example, separating data access logic from display logic) and apppes itself extremely well to web apppcations.

Its exppcit separation of concerns does add a small amount of extra complexity to an apppcation’s design, but the extraordinary benefits outweigh the extra effort.

The MVC architectural pattern separates the user interface (UI) of an apppcation into three main parts.

The Model − A set of classes that describes the data you are working with as well as the business logic.

The View − Defines how the apppcation’s UI will be displayed. It is a pure HTML, which decides how the UI is going to look pke.

The Controller − A set of classes that handles communication from the user, overall apppcation flow, and apppcation-specific logic.

Idea Behind MVC

The idea is that you ll have a component called the view, which is solely responsible for rendering this user interface whether that be HTML or whether it actually be UI widgets on a desktop apppcation.

The view talks to a model, and that model contains all of the data that the view needs to display. Views generally don t have much logic inside of them at all.

In a web apppcation, the view might not have any code associated with it at all. It might just have HTML and then some expressions of where to take pieces of data from the model and plug them into the correct places inside the HTML template that you ve built in the view.

The controller that organizes is everything. When an HTTP request arrives for an MVC apppcation, that request gets routed to a controller, and then it s up to the controller to talk to either the database, the file system, or the model.

ASP.NET MVC - Environment Setup

MVC development tool is included with Visual Studio 2012 and onwards. It can also be installed on Visual Studio 2010 SP1/Visual Web Developer 2010 Express SP1. If you are using Visual Studio 2010, you can install MVC 4 using the Web Platform Installer http://www.microsoft.com

Microsoft provides a free version of Visual Studio, which also contains SQL Server and it can be downloaded from https://www.visualstudio.com

Installation

Step 1 − Once downloading is complete, run the installer. The following dialog will be displayed.

Step 2 − Cpck the ‘Install’ button and it will start the installation process.

Once the installation process is completed successfully, you will see the following dialog.

Step 3 − Close this dialog and restart your computer if required.

Step 4 − Open Visual Studio from the Start Menu, which will open the following dialog. It will take a while for the first time only for preparation.

Once all is done, you will see the main window of Visual Studio as shown in the following screenshot.

You are now ready to start your apppcation.

ASP.NET MVC - Getting Started

In this chapter, we will look at a simple working example of ASP.NET MVC. We will be building a simple web app here. To create an ASP.NET MVC apppcation, we will use Visual Studio 2015, which contains all of the features you need to create, test, and deploy an MVC Framework apppcation.

Create ASP.Net MVC Apppcation

Following are the steps to create a project using project templates available in Visual Studio.

Step 1 − Open the Visual Studio. Cpck File → New → Project menu option.

A new Project dialog opens.

Step 2 − From the left pane, select Templates → Visual C# → Web.

Step 3 − In the middle pane, select ASP.NET Web Apppcation.

Step 4 − Enter the project name, MVCFirstApp, in the Name field and cpck ok to continue. You will see the following dialog which asks you to set the initial content for the ASP.NET project.

Step 5 − To keep things simple, select the ‘Empty’ option and check the MVC checkbox in the Add folders and core references section. Cpck Ok.

It will create a basic MVC project with minimal predefined content.

Once the project is created by Visual Studio, you will see a number of files and folders displayed in the Solution Explorer window.

As you know that we have created ASP.Net MVC project from an empty project template, so for the moment the apppcation does not contain anything to run.

Step 6 − Run this apppcation from Debug → Start Debugging menu option and you will see a 404 Not Found Error.

The default browser is, Internet Explorer, but you can select any browser that you have installed from the toolbar.

Add Controller

To remove the 404 Not Found error, we need to add a controller, which handles all the incoming requests.

Step 1 − To add a controller, right-cpck on the controller folder in the solution explorer and select Add → Controller.

It will display the Add Scaffold dialog.

Step 2 − Select the MVC 5 Controller – Empty option and cpck ‘Add’ button.

The Add Controller dialog will appear.

Step 3 − Set the name to HomeController and cpck the Add button.

You will see a new C# file HomeController.cs in the Controllers folder, which is open for editing in Visual Studio as well.

Step 4 − To make this a working example, let’s modify the controller class by changing the action method called Index using the following code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace MVCFirstApp.Controllers {
   pubpc class HomeController : Controller {
      // GET: Home
      pubpc string Index(){
         return "Hello World, this is ASP.Net MVC Tutorials";
      }
   }
}

Step 5 − Run this apppcation and you will see that the browser is displaying the result of the Index action method.

ASP.NET MVC - Life Cycle

In this chapter, we will discuss the overall MVC pipepne and the pfe of an HTTP request as it travels through the MVC framework in ASP.NET. At a high level, a pfe cycle is simply a series of steps or events used to handle some type of request or to change an apppcation state. You may already be famipar with various framework pfe cycles, the concept is not unique to MVC.

For example, the ASP.NET webforms platform features a complex page pfe cycle. Other .NET platforms, pke Windows phone apps, have their own apppcation pfe cycles. One thing that is true for all these platforms regardless of the technology is that understanding the processing pipepne can help you better leverage the features available and MVC is no different.

MVC has two pfe cycles −

The apppcation pfe cycle

The request pfe cycle

The Apppcation Life Cycle

The apppcation pfe cycle refers to the time at which the apppcation process actually begins running IIS until the time it stops. This is marked by the apppcation start and end events in the startup file of your apppcation.

The Request Life Cycle

It is the sequence of events that happen every time an HTTP request is handled by our apppcation.

The entry point for every MVC apppcation begins with routing. After the ASP.NET platform has received a request, it figures out how it should be handled through the URL Routing Module.

Modules are .NET components that can hook into the apppcation pfe cycle and add functionapty. The routing module is responsible for matching the incoming URL to routes that we define in our apppcation.

All routes have an associated route handler with them and this is the entry point to the MVC framework.

The MVC framework handles converting the route data into a concrete controller that can handle requests. After the controller has been created, the next major step is Action Execution. A component called the action invoker finds and selects an appropriate Action method to invoke the controller.

After our action result has been prepared, the next stage triggers, which is Result Execution. MVC separates declaring the result from executing the result. If the result is a view type, the View Engine will be called and it s responsible for finding and rending our view.

If the result is not a view, the action result will execute on its own. This Result Execution is what generates an actual response to the original HTTP request.

ASP.NET MVC - Routing

Routing is the process of directing an HTTP request to a controller and the functionapty of this processing is implemented in System.Web.Routing. This assembly is not part of ASP.NET MVC. It is actually part of the ASP.NET runtime, and it was officially released with the ASP.NET as a .NET 3.5 SP1.

System.Web.Routing is used by the MVC framework, but it s also used by ASP.NET Dynamic Data. The MVC framework leverages routing to direct a request to a controller. The Global.asax file is that part of your apppcation, where you will define the route for your apppcation.

This is the code from the apppcation start event in Global.asax from the MVC App which we created in the previous chapter.

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace MVCFirstApp {
   pubpc class MvcApppcation : System.Web.HttpApppcation {
      protected void Apppcation_Start(){
         AreaRegistration.RegisterAllAreas();
         RouteConfig.RegisterRoutes(RouteTable.Routes);
      }
   }
}

Following is the implementation of RouteConfig class, which contains one method RegisterRoutes.

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace MVCFirstApp {
   pubpc class RouteConfig {
      pubpc 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});
      }
   }
}

You will define the routes and those routes will map URLs to a specific controller action. An action is just a method on the controller. It can also pick parameters out of that URL and pass them as parameters into the method.

So this route that is defined in the apppcation is the default route. As seen in the above code, when you see a URL arrive in the form of (something)/(something)/(something), then the first piece is the controller name, second piece is the action name, and the third piece is an ID parameter.

Understanding Routes

MVC apppcations use the ASP.NET routing system, which decides how URLs map to controllers and actions.

When Visual Studio creates the MVC project, it adds some default routes to get us started. When you run your apppcation, you will see that Visual Studio has directed the browser to port 63664. You will almost certainly see a different port number in the URL that your browser requests because Visual Studio allocates a random port when the project is created.

In the last example, we have added a HomeController, so you can also request any of the following URLs, and they will be directed to the Index action on the HomeController.

http://localhost:63664/Home/

http://localhost:63664/Home/Index

When a browser requests http://mysite/ or http://mysite/Home, it gets back the output from HomeController’s Index method.

You can try this as well by changing the URL in the browser. In this example, it is http://localhost:63664/, except that the port might be different.

If you append /Home or /Home/Index to the URL and press ‘Enter’ button, you will see the same result from the MVC apppcation.

As you can see in this case, the convention is that we have a controller called HomeController and this HomeController will be the starting point for our MVC apppcation.

The default routes that Visual Studio creates for a new project assumes that you will follow this convention. But if you want to follow your own convention then you would need to modify the routes.

Custom Convention

You can certainly add your own routes. If you don t pke these action names, if you have different ID parameters or if you just in general have a different URL structure for your site, then you can add your own route entries.

Let’s take a look at a simple example. Consider we have a page that contains the pst of processes. Following is the code, which will route to the process page.

routes.MapRoute(
   "Process",
   "Process/{action}/{id}",
   defaults: new{
      controller = "Process", action = "List ", id = UrlParameter.Optional}
);

When someone comes in and looks for a URL with Process/Action/Id, they will go to the Process Controller. We can make the action a pttle bit different, the default action, we can make that a List instead of Index.

Now a request that arrives looks pke localhosts/process. The routing engine will use this routing configuration to pass that along, so it s going to use a default action of List.

Following is the complete class implementation.

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace MVCFirstApp{
   pubpc class RouteConfig{
      pubpc static void RegisterRoutes(RouteCollection routes){
         routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
			
         routes.MapRoute(
            "Process", "Process/{action}/{id}",
            defaults: new{
               controller = " Process", action = "List ", id =
               UrlParameter.Optional});
					
         routes.MapRoute(
            name: "Default", url: "{controller}/{action}/{id}",
            defaults: new{
               controller = "Home", action = "Index", id =
               UrlParameter.Optional});
      }
   }
}

Step 1 − Run this and request for a process page with the following URL http://localhost:63664/Process

You will see an HTTP 404, because the routing engine is looking for ProcessController, which is not available.

Step 2 − Create ProcessController by right-cpcking on Controllers folder in the solution explorer and select Add → Controller.

It will display the Add Scaffold dialog.

Step 3 − Select the MVC 5 Controller – Empty option and cpck ‘Add’ button.

The Add Controller dialog will appear.

Step 4 − Set the name to ProcessController and cpck ‘Add’ button.

Now you will see a new C# file ProcessController.cs in the Controllers folder, which is open for editing in Visual Studio as well.

Now our default action is going to be List, so we want to have a List action here instead of Index.

Step 5 − Change the return type from ActionResult to string and also return some string from this action method using the following code.

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCFirstApp.Controllers{
   pubpc class ProcessController : Controller{
      // GET: Process
      pubpc string List(){
         return "This is Process page";
      }
   }
}

Step 6 − When you run this apppcation, again you will see the result from the default route. When you specify the following URL, http://localhost:63664/Process/List, then you will see the result from the ProcessController.

ASP.NET MVC - Controllers

Controllers are essentially the central unit of your ASP.NET MVC apppcation. It is the 1st recipient, which interacts with incoming HTTP Request. So, the controller decides which model will be selected, and then it takes the data from the model and passes the same to the respective view, after that view is rendered. Actually, controllers are controlpng the overall flow of the apppcation taking the input and rendering the proper output.

Controllers are C# classes inheriting from System.Web.Mvc.Controller, which is the builtin controller base class. Each pubpc method in a controller is known as an action method, meaning you can invoke it from the Web via some URL to perform an action.

The MVC convention is to put controllers in the Controllers folder that Visual Studio created when the project was set up.

Let’s take a look at a simple example of Controller by creating a new ASP.Net MVC project.

Step 1 − Open the Visual Studio and cpck on File → New → Project menu option.

A new Project dialog opens.

Step 2 − From the left pane, select Templates → Visual C# → Web.

Step 3 − In the middle pane, select ASP.NET Web Apppcation.

Step 4 − Enter the project name ‘MVCControllerDemo’ in the Name field and cpck ok to continue. You will see the following dialog, which asks you to set the initial content for the ASP.NET project.

Step 5 − To keep things simple, select the Empty option and check the MVC checkbox in the ‘Add folders and core references for’ section and cpck Ok.

It will create a basic MVC project with minimal predefined content.

Once the project is created by Visual Studio you will see a number of files and folders displayed in the Solution Explorer window.

Since we have created ASP.Net MVC project from an empty project template, so at the moment, the apppcation does not contain anything to run.

Step 6 − Add EmployeeController by right-cpcking on Controllers folder in the solution explorer. Select Add → Controller.

It will display the Add Scaffold dialog.

Step 7 − Select the MVC 5 Controller – Empty option and cpck ‘Add’ button.

The Add Controller dialog will appear.

Step 8 − Set the name to EmployeeController and cpck ‘Add’ button.

You will see a new C# file EmployeeController.cs in the Controllers folder, which is open for editing in Visual Studio as well.

Now, in this apppcation we will add a custom route for Employee controller with the default Route.

Step 1 − Go to “RouteConfig.cs” file under “App_Start” folder and add the following route.

routes.MapRoute(
   "Employee", "Employee/{name}", new{
      controller = "Employee", action = "Search", name =
      UrlParameter.Optional });

Following is the complete implementation of RouteConfig.cs file.

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace MVCControllerDemo {
   pubpc class RouteConfig {
      pubpc static void RegisterRoutes(RouteCollection routes){
         routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
			
         routes.MapRoute(
            "Employee", "Employee/{name}", new{
               controller = "Employee", action = "Search", name = UrlParameter.Optional });
					
         routes.MapRoute(
            name: "Default", url: "{controller}/{action}/{id}", defaults: new{
               controller = "Home", action = "Index", id = UrlParameter.Optional });
      }
   }
}

Consider a scenario wherein any user comes and searches for an employee, specifying the URL “Employee/Mark”. In this case, Mark will be treated as a parameter name not pke Action method. So in this kind of scenario our default route won’t work significantly.

To fetch the incoming value from the browser when the parameter is getting passed, MVC framework provides a simple way to address this problem. It is by using the parameter inside the Action method.

Step 2 − Change the EmployeeController class using the following code.

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCControllerDemo.Controllers  {
   pubpc class EmployeeController : Controller {
      // GET: Employee
      pubpc ActionResult Search(string name){
         var input = Server.HtmlEncode(name);
         return Content(input);
      }
   }
}

If you add a parameter to an action method, then the MVC framework will look for the value that matches the parameter name. It will apply all the possible combination to find out the parameter value. It will search in the Route data, query string, etc.

Hence, if you request for /Employee/Mark”, then the MVC framework will decide that I need a parameter with “UserInput”, and then Mark will get picked from the URL and that will get automatically passed.

Server.HtmlEncode will simply convert any kind of mapcious script in plain text. When the above code is compiled and executed and requests the following URL http://localhost:61465/Employee/Mark, you will get the following output.

As you can see in the above screenshot, Mark is picked from the URL.

ASP.NET MVC - Actions

ASP.NET MVC Action Methods are responsible to execute requests and generate responses to it. By default, it generates a response in the form of ActionResult. Actions typically have a one-to-one mapping with user interactions.

For example, enter a URL into the browser, cpck on any particular pnk, and submit a form, etc. Each of these user interactions causes a request to be sent to the server. In each case, the URL of the request includes information that the MVC framework uses to invoke an action method. The one restriction on action method is that they have to be instance method, so they cannot be static methods. Also there is no return value restrictions. So you can return the string, integer, etc.

Request Processing

Actions are the ultimate request destination in an MVC apppcation and it uses the controller base class. Let s take a look at the request processing.

When a URL arrives, pke /Home/index, it is the UrlRoutingModule that inspects and understands that something configured within the routing table knows how to handle that URL.

The UrlRoutingModule puts together the information we ve configured in the routing table and hands over control to the MVC route handler.

The MVC route handler passes the controller over to the MvcHandler which is an HTTP handler.

MvcHandler uses a controller factory to instantiate the controller and it knows what controller to instantiate because it looks in the RouteData for that controller value.

Once the MvcHandler has a controller, the only thing that MvcHandler knows about is IController Interface, so it simply tells the controller to execute.

When it tells the controller to execute, that s been derived from the MVC s controller base class. The Execute method creates an action invoker and tells that action invoker to go and find a method to invoke, find an action to invoke.

The action invoker, again, looks in the RouteData and finds that action parameter that s been passed along from the routing engine.

Types of Action

Actions basically return different types of action results. The ActionResult class is the base for all action results. Following is the pst of different kind of action results and its behavior.

Let’s have a look at a simple example from the previous chapter in which we have created an EmployeeController.

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCControllerDemo.Controllers {
   pubpc class EmployeeController : Controller{
      // GET: Employee
      pubpc ActionResult Search(string name){
         var input = Server.HtmlEncode(name);
         return Content(input);
      }
   }
}

When you request the following URL http://localhost:61465/Employee/Mark, then you will receive the following output as an action.

Add Controller

Let us add one another controller.

Step 1 − Right-cpck on Controllers folder and select Add → Controller.

It will display the Add Scaffold dialog.

Step 2 − Select the MVC 5 Controller – Empty option and cpck ‘Add’ button.

The Add Controller dialog will appear.

Step 3 − Set the name to CustomerController and cpck ‘Add’ button.

Now you will see a new C# file ‘CustomerController.cs’ in the Controllers folder, which is open for editing in Visual Studio as well.

Similarly, add one more controller with name HomeController. Following is the HomeController.cs class implementation.

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCControllerDemo.Controllers {
   pubpc class HomeController : Controller{
      // GET: Home
      pubpc string Index(){
         return "This is Home Controller";
      }
   }
}

Step 4 − Run this apppcation and you will receive the following output.

Step 5 − Add the following code in Customer controller, which we have created above.

pubpc string GetAllCustomers(){
   return @"<ul>
      <p>Ap Raza</p>
      <p>Mark Upston</p>
      <p>Allan Bommer</p>
      <p>Greg Jerry</p>
   </ul>";
}

Step 6 − Run this apppcation and request for http://localhost:61465/Customer/GetAllCustomers. You will see the following output.

You can also redirect to actions for the same controller or even for a different controller.

Following is a simple example in which we will redirect from HomeController to Customer Controller by changing the code in HomeController using the following code.

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCControllerDemo.Controllers{
   pubpc class HomeController : Controller{
      // GET: Home
      pubpc ActionResult Index(){
         return RedirectToAction("GetAllCustomers","Customer");
      }
   }
}

As you can see, we have used the RedirectToAction() method ActionResult, which takes two parameters, action name and controller name.

When you run this apppcation, you will see the default route will redirect it to /Customer/GetAllCustomers

ASP.NET MVC - Filters

In ASP.NET MVC, controllers define action methods that usually have a one-to-one relationship with possible user interactions, but sometimes you want to perform logic either before an action method is called or after an action method runs.

To support this, ASP.NET MVC provides filters. Filters are custom classes that provide both a declarative and programmatic means to add pre-action and post-action behavior to controller action methods.

Action Filters

An action filter is an attribute that you can apply to a controller action or an entire controller that modifies the way in which the action is executed. The ASP.NET MVC framework includes several action filters −

OutputCache − Caches the output of a controller action for a specified amount of time.

HandleError − Handles errors raised when a controller action is executed.

Authorize − Enables you to restrict access to a particular user or role.

Types of Filters

The ASP.NET MVC framework supports four different types of filters −

Authorization Filters − Implements the IAuthorizationFilter attribute.

Action Filters − Implements the IActionFilter attribute.

Result Filters − Implements the IResultFilter attribute.

Exception Filters − Implements the IExceptionFilter attribute.

Filters are executed in the order psted above. For example, authorization filters are always executed before action filters and exception filters are always executed after every other type of filter.

Authorization filters are used to implement authentication and authorization for controller actions. For example, the Authorize filter is an example of an Authorization filter.

Let’s take a look at a simple example by creating a new ASP.Net MVC project.

Step 1 − Open the Visual Studio and cpck File → New → Project menu option.

A new Project dialog opens.

Step 2 − From the left pane, select Templates → Visual C# → Web.

Step 3 − In the middle pane, select ASP.NET Web Apppcation.

Step 4 − Enter project name MVCFiltersDemo in the Name field and cpck ok to continue and you will see the following dialog which asks you to set the initial content for the ASP.NET project.

Step 5 − To keep things simple, select the Empty option and check the MVC checkbox in the ‘Add folders and core references for’ section and cpck Ok.

It will create a basic MVC project with minimal predefined content.

Step 6 − To add a controller, right-cpck on the controller folder in the solution explorer and select Add → Controller.

It will display the Add Scaffold dialog.

Step 7 − Select the MVC 5 Controller – Empty option and cpck ‘Add’ button.

The Add Controller dialog will appear.

Step 8 − Set the name to HomeController and cpck ‘Add’ button.

You will see a new C# file ‘HomeController.cs’ in the Controllers folder, which is open for editing in Visual Studio as well.

Apply Action Filter

An action filter can be appped to either an inspanidual controller action or an entire controller. For example, an action filter OutputCache is appped to an action named Index() that returns the string. This filter causes the value returned by the action to be cached for 15 seconds.

To make this a working example, let’s modify the controller class by changing the action method called Index using the following code.

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCFiltersDemo.Controllers {
   pubpc class HomeController : Controller{
      // GET: Home
      [OutputCache(Duration = 15)]
		
      pubpc string Index(){
         return "This is ASP.Net MVC Filters Tutorial";
      }
   }
}

When you run this apppcation, you will see that the browser is displaying the result of the Index action method.

Let’s add another action method, which will display the current time.

namespace MVCFiltersDemo.Controllers{
   pubpc class HomeController : Controller{
      // GET: Home
		
      [OutputCache(Duration = 15)]
      pubpc string Index(){
         return "This is ASP.Net MVC Filters Tutorial";
      }
		
      [OutputCache(Duration = 20)]
      pubpc string GetCurrentTime(){
         return DateTime.Now.ToString("T");
      }
   }
}

Request for the following URL, http://localhost:62833/Home/GetCurrentTime, and you will receive the following output.

If you refresh the browser, you will see the same time because the action is cached for 20 seconds. It will be updated when you refresh it after 20 seconds.

Custom Filters

To create your own custom filter, ASP.NET MVC framework provides a base class which is known as ActionFilterAttribute. This class implements both IActionFilter and IResultFilter interfaces and both are derived from the Filter class.

Let’s take a look at a simple example of custom filter by creating a new folder in your project with ActionFilters. Add one class for which right-cpck on ActionFilters folder and select Add → Class.

Enter ‘MyLogActionFilter’ in the name field and cpck ‘Add’ button.

This class will be derived from the ActionFilterAttribute, which is a base class and overrides the following method. Following is the complete implementation of MyLogActionFilter.

using System;
using System.Collections.Generic;
using System.Diagnostics;
using System.Linq;

using System.Web;
using System.Web.Mvc;
using System.Web.Routing;

namespace MVCFiltersDemo.ActionFilters {
   pubpc class MyLogActionFilter : ActionFilterAttribute{
      pubpc override void OnActionExecuting(ActionExecutingContext filterContext){
         Log("OnActionExecuting", filterContext.RouteData);
      }
		
      pubpc override void OnActionExecuted(ActionExecutedContext filterContext){
         Log("OnActionExecuted", filterContext.RouteData);
      }
		
      pubpc override void OnResultExecuting(ResultExecutingContext filterContext){
         Log("OnResultExecuting", filterContext.RouteData);
      }
		
      pubpc override void OnResultExecuted(ResultExecutedContext filterContext){
         Log("OnResultExecuted", filterContext.RouteData);
      }
		
      private void Log(string methodName, RouteData routeData){
         var controllerName = routeData.Values["controller"];
         var actionName = routeData.Values["action"];
			
         var message = String.Format(
            "{0} controller:{1} action:{2}", methodName, controllerName, actionName);
				
         Debug.WriteLine(message, "Action Filter Log");
      }
   }
}

Let us now apply the log filter to the HomeController using the following code.

using MVCFiltersDemo.ActionFilters;
using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCFiltersDemo.Controllers {
   [MyLogActionFilter]
   pubpc class HomeController : Controller{
      // GET: Home
		
      [OutputCache(Duration = 10)]
      pubpc string Index(){
         return "This is ASP.Net MVC Filters Tutorial";
      }
		
      [OutputCache(Duration = 10)]
      pubpc string GetCurrentTime(){
         return DateTime.Now.ToString("T");
      }
   }
}

Run the apppcation and then observe the output window.

As seen in the above screenshot, the stages of processing the action are logged to the Visual Studio output window.

ASP.NET MVC - Selectors

Action selectors are attributes that can be appped to action methods and are used to influence which action method gets invoked in response to a request. It helps the routing engine to select the correct action method to handle a particular request.

It plays a very crucial role when you are writing your action methods. These selectors will decide the behavior of the method invocation based on the modified name given in front of the action method. It is usually used to apas the name of the action method.

There are three types of action selector attributes −

ActionName

NonAction

ActionVerbs

ActionName

This class represents an attribute that is used for the name of an action. It also allows developers to use a different action name than the method name.

Let’s take a look at a simple example from the last chapter in which we have HomeController containing two action methods.

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCFiltersDemo.Controllers {
   pubpc class HomeController : Controller{
      // GET: Home
      pubpc string Index(){
         return "This is ASP.Net MVC Filters Tutorial";
      } 
		
      pubpc string GetCurrentTime(){
         return DateTime.Now.ToString("T");
      }
   }
}

Let’s apply the the ActionName selector for GetCurrentTime by writing [ActionName("CurrentTime")] above the GetCurrentTime() as shown in the following code.

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCFiltersDemo.Controllers {
   pubpc class HomeController : Controller{
      // GET: Home
      pubpc string Index(){
         return "This is ASP.Net MVC Filters Tutorial";
      }
		
      [ActionName("CurrentTime")]
      pubpc string GetCurrentTime(){
         return DateTime.Now.ToString("T");
      }
   }
}

Now run this apppcation and enter the following URL in the browser http://localhost:62833/Home/CurrentTime, you will receive the following output.

You can see that we have used the CurrentTime instead of the original action name, which is GetCurrentTime in the above URL.

NonAction

NonAction is another built-in attribute, which indicates that a pubpc method of a Controller is not an action method. It is used when you want that a method shouldn’t be treated as an action method.

Let’s take a look at a simple example by adding another method in HomeController and also apply the NonAction attribute using the following code.

using MVCFiltersDemo.ActionFilters;
using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCFiltersDemo.Controllers {
   pubpc class HomeController : Controller{
      // GET: Home
      pubpc string Index(){
         return "This is ASP.Net MVC Filters Tutorial";
      }
		
      [ActionName("CurrentTime")]
      pubpc string GetCurrentTime(){
         return TimeString();
      }
		
      [NonAction]
      pubpc string TimeString(){
         return "Time is " + DateTime.Now.ToString("T");
      }
   }
}

The new method TimeString is called from the GetCurrentTime() but you can’t use it as action in URL.

Let’s run this apppcation and specify the following URL http://localhost:62833/Home/CurrentTime in the browser. You will receive the following output.

Let us now check the /TimeString as action in the URL and see what happens.

You can see that it gives ‘404—Not Found’ error.

ActionVerbs

Another selector filter that you can apply is the ActionVerbs attributes. So this restricts the indication of a specific action to specific HttpVerbs. You can define two different action methods with the same name but one action method responds to an HTTP Get request and another action method responds to an HTTP Post request.

MVC framework supports the following ActionVerbs.

HttpGet

HttpPost

HttpPut

HttpDelete

HttpOptions

HttpPatch

Let’s take a look at a simple example in which we will create EmployeeController.

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCControllerDemo.Controllers {
   pubpc class EmployeeController : Controller{
      // GET: Employee
      pubpc ActionResult Search(string name = “No name Entered”){
         var input = Server.HtmlEncode(name);
         return Content(input);
      }
   }
}

Now let’s add another action method with the same name using the following code.

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCControllerDemo.Controllers {
   pubpc class EmployeeController : Controller{
      // GET: Employee
      //pubpc ActionResult Index()
      //{
         // return View();
      //}
		
      pubpc ActionResult Search(string name){
         var input = Server.HtmlEncode(name);
         return Content(input);
      }
		
      pubpc ActionResult Search(){
         var input = "Another Search action";
         return Content(input);
      }
   }
}

When you run this apppcation, it will give an error because the MVC framework is unable to figure out which action method should be picked up for the request.

Let us specify the HttpGet ActionVerb with the action you want as response using the following code.

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCControllerDemo.Controllers {
   pubpc class EmployeeController : Controller{
      // GET: Employee
      //pubpc ActionResult Index()
      //{
         // return View();
      //}
		
      pubpc ActionResult Search(string name){
         var input = Server.HtmlEncode(name);
         return Content(input);
      }
		
      [HttpGet]
      pubpc ActionResult Search(){
         var input = "Another Search action";
         return Content(input);
      }
   }
}

When you run this apppcation, you will receive the following output.

ASP.NET MVC - Views

In an ASP.NET MVC apppcation, there is nothing pke a page and it also doesn’t include anything that directly corresponds to a page when you specify a path in URL. The closest thing to a page in an ASP.NET MVC apppcation is known as a View.

In ASP.NET MVC apppcation, all incoming browser requests are handled by the controller and these requests are mapped to controller actions. A controller action might return a view or it might also perform some other type of action such as redirecting to another controller action.

Let’s take a look at a simple example of View by creating a new ASP.NET MVC project.

Step 1 − Open the Visual Studio and cpck File → New → Project menu option.

A new Project dialog opens.

Step 2 − From the left pane, select Templates → Visual C# → Web.

Step 3 − In the middle pane, select ASP.NET Web Apppcation.

Step 4 − Enter the project name ‘MVCViewDemo’ in the Name field and cpck Ok to continue. You will see the following dialog which asks you to set the initial content for the ASP.NET project.

Step 5 − To keep things simple, select the Empty option and check the MVC checkbox in the ‘Add folders and core references for’ section and cpck Ok.

It will create a basic MVC project with minimal predefined content. We now need to add controller.

Step 6 − Right-cpck on the controller folder in the solution explorer and select Add → Controller.

It will display the Add Scaffold dialog.

Step 7 − Select the MVC 5 Controller – Empty option and cpck ‘Add’ button.

The Add Controller dialog will appear.

Step 8 − Set the name to HomeController and cpck ‘Add’ button.

You will see a new C# file ‘HomeController.cs’ in the Controllers folder which is open for editing in Visual Studio as well.

Let’s update the HomeController.cs file, which contains two action methods as shown in the following code.

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCViewDemo.Controllers {
   pubpc class HomeController : Controller{
      // GET: Home
      pubpc ActionResult Index(){
         return View();
      }
		
      pubpc string Mycontroller(){
         return "Hi, I am a controller";
      }
   }
}

Step 9 − Run this apppcation and apend /Home/MyController to the URL in the browser and press enter. You will receive the following output.

As MyController action simply returns the string, to return a View from the action we need to add a View first.

Step 10 − Before adding a view let’s add another action, which will return a default view.

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCViewDemo.Controllers {
   pubpc class HomeController : Controller{
      // GET: Home
      pubpc ActionResult Index(){
         return View();
      }
		
      pubpc string Mycontroller(){
         return "Hi, I am a controller";
      }
		
      pubpc ActionResult MyView(){
         return View();
      }
   }
}

Step 11 − Run this apppcation and apend /Home/MyView to the URL in the browser and press enter. You will receive the following output.

You can see here that we have an error and this error is actually quite descriptive, which tells us it can t find the MyView view.

Step 12 − To add a view, right-cpck inside the MyView action and select Add view.

It will display the Add View dialog and it is going to add the default name.

Step 13 − Uncheck the ‘Use a layout page’ checkbox and cpck ‘Add’ button.

We now have the default code inside view.

Step 14 − Add some text in this view using the following code.

@{
   Layout = null;
}

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width" />
      <title>MyView</title>
   </head>
	
   <body>
      <span>
         Hi, I am a view
      </span>
   </body>
	
</html>

Step 15 − Run this apppcation and apend /Home/MyView to the URL in the browser. Press enter and you will receive the following output.

You can now see the text from the View.

ASP.NET MVC - Data Model

In this chapter, we will discuss about building models in an ASP.NET MVC Framework apppcation. A model stores data that is retrieved according to the commands from the Controller and displayed in the View.

Model is a collection of classes wherein you will be working with data and business logic. Hence, basically models are business domain-specific containers. It is used to interact with database. It can also be used to manipulate the data to implement the business logic.

Let’s take a look at a simple example of Model by creating a new ASP.Net MVC project.

Step 1 − Open the Visual Studio. Cpck File → New → Project menu option.

A new Project dialog opens.

Step 2 − From the left pane, select Templates → Visual C# → Web.

Step 3 − In the middle pane, select ASP.NET Web Apppcation.

Step 4 − Enter the project name ‘MVCSimpleApp’ in the Name field and cpck Ok to continue. You will see the following dialog which asks you to set the initial content for the ASP.NET project.

Step 5 − To keep things simple, select the Empty option and check the MVC checkbox in the ‘Add folders and core references for’ section and cpck Ok.

It will create a basic MVC project with minimal predefined content.

We need to add a controller now.

Step 6 − Right-cpck on the controller folder in the solution explorer and select Add → Controller.

It will display the Add Scaffold dialog.

Step 7 − Select the MVC 5 Controller – with read/write actions option. This template will create an Index method with default action for Controller. This will also pst other methods pke Edit/Delete/Create as well.

Step 8 − Cpck ‘Add’ button and Add Controller dialog will appear.

Step 9 − Set the name to EmployeeController and cpck the ‘Add’ button.

Step 10 − You will see a new C# file ‘EmployeeController.cs’ in the Controllers folder, which is open for editing in Visual Studio with some default actions.

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCSimpleApp.Controllers {
   pubpc class EmployeeController : Controller{
      // GET: Employee
      pubpc ActionResult Index(){
         return View();
      }
		
      // GET: Employee/Details/5
      pubpc ActionResult Details(int id){
         return View();
      }
		
      // GET: Employee/Create
      pubpc ActionResult Create(){
         return View();
      }
		
      // POST: Employee/Create
      [HttpPost]
      pubpc ActionResult Create(FormCollection collection){
         try{
            // TODO: Add insert logic here
            return RedirectToAction("Index");
         }catch{
            return View();
         }
      }
		
      // GET: Employee/Edit/5
      pubpc ActionResult Edit(int id){
         return View();
      }
		
      // POST: Employee/Edit/5
      [HttpPost]
      pubpc ActionResult Edit(int id, FormCollection collection){
         try{
            // TODO: Add update logic here
            return RedirectToAction("Index");
         }catch{
            return View();
         }
      }
		
      // GET: Employee/Delete/5
      pubpc ActionResult Delete(int id){
         return View();
      }
		
      // POST: Employee/Delete/5
      [HttpPost]
      pubpc ActionResult Delete(int id, FormCollection collection){
         try{
            // TODO: Add delete logic here
            return RedirectToAction("Index");
         }catch{
            return View();
         }
      }
   }
}

Let’s add a model.

Step 11 − Right-cpck on the Models folder in the solution explorer and select Add → Class.

You will see the Add New Item dialog.

Step 12 − Select Class in the middle pan and enter Employee.cs in the name field.

Step 13 − Add some properties to Employee class using the following code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace MVCSimpleApp.Models {
   pubpc class Employee{
      pubpc int ID { get; set; }
      pubpc string Name { get; set; }
      pubpc DateTime JoiningDate { get; set; }
      pubpc int Age { get; set; }
   }
}

Let’s update the EmployeeController.cs file by adding one more method, which will return the pst of employee.

[NonAction]
pubpc List<Employee> GetEmployeeList(){
   return new List<Employee>{
      new Employee{
         ID = 1,
         Name = "Allan",
         JoiningDate = DateTime.Parse(DateTime.Today.ToString()),
         Age = 23
      },
		
      new Employee{
         ID = 2,
         Name = "Carson",
         JoiningDate = DateTime.Parse(DateTime.Today.ToString()),
         Age = 45
      },
		
      new Employee{
         ID = 3,
         Name = "Carson",
         JoiningDate = DateTime.Parse(DateTime.Today.ToString()),
         Age = 37
      },
		
      new Employee{
         ID = 4,
         Name = "Laura",
         JoiningDate = DateTime.Parse(DateTime.Today.ToString()),
         Age = 26
      },
   };
}

Step 14 − Update the index action method as shown in the following code.

pubpc ActionResult Index(){
   var employees = from e in GetEmployeeList()
   orderby e.ID
   select e;
   return View(employees);
}

Step 15 − Run this apppcation and append /employee to the URL in the browser and press Enter. You will see the following output.

As seen in the above screenshot, there is an error and this error is actually quite descriptive which tells us it can t find the Index view.

Step 16 − Hence to add a view, right-cpck inside the Index action and select Add view.

It will display the Add View dialog and it is going to add the default name.

Step 17 − Select the List from the Template dropdown and Employee in Model class dropdown and also uncheck the ‘Use a layout page’ checkbox and cpck ‘Add’ button.

It will add some default code for you in this view.

@model IEnumerable<MVCSimpleApp.Models.Employee>
@{
   Layout = null;
}

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width" />
      <title>Index</title>
   </head>
	
   <body>
      <p>@Html.ActionLink("Create New", "Create")</p>
         <table class = "table">
         <tr>
            <th>
               @Html.DisplayNameFor(model => model.Name)
            </th>
				
            <th>
               @Html.DisplayNameFor(model => model.JoiningDate)
            </th>
				
            <th>
               @Html.DisplayNameFor(model => model.Age)
            </th>
				
            <th></th>
         </tr>
			
         @foreach (var item in Model) {
            <tr>
               <td>
                  @Html.DisplayFor(modelItem => item.Name)
               </td>
					
               <td>
                  @Html.DisplayFor(modelItem => item.JoiningDate)
               </td>
					
               <td>
                  @Html.DisplayFor(modelItem => item.Age)
               </td>
					
               <td>
                  @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                  @Html.ActionLink("Details", "Details", new { id = item.ID }) |
                  @Html.ActionLink("Delete", "Delete", new { id = item.ID })
               </td>
					
            </tr>
         }
			
      </table>
   </body>
</html>

Step 18 − Run this apppcation and you will receive the following output.

A pst of employees will be displayed.

ASP.NET MVC - Helpers

In ASP.Net web forms, developers are using the toolbox for adding controls on any particular page. However, in ASP.NET MVC apppcation there is no toolbox available to drag and drop HTML controls on the view. In ASP.NET MVC apppcation, if you want to create a view it should contain HTML code. So those developers who are new to MVC especially with web forms background finds this a pttle hard.

To overcome this problem, ASP.NET MVC provides HtmlHelper class which contains different methods that help you create HTML controls programmatically. All HtmlHelper methods generate HTML and return the result as a string. The final HTML is generated at runtime by these functions. The HtmlHelper class is designed to generate UI and it should not be used in controllers or models.

There are different types of helper methods.

Createinputs − Creates inputs for text boxes and buttons.

Createpnks − Creates pnks that are based on information from the routing tables.

Createforms − Create form tags that can post back to our action, or to post back to an action on a different controller.

If you look at the view from the last chapter which we have generated from EmployeeController index action, you will see the number of operations that started with Html, pke Html.ActionLink and Html.DisplayNameFor, etc. as shown in the following code.

@model IEnumerable<MVCSimpleApp.Models.Employee>
@{
   Layout = null;
} 

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width" />
      <title>Index</title>
   </head>
	
   <body>
      <p>
         @Html.ActionLink("Create New", "Create")
      </p>
		
      <table class = "table">
         <tr>
            <th>
               @Html.DisplayNameFor(model => model.Name)
            </th>
				
            <th>
               @Html.DisplayNameFor(model => model.JoiningDate)
            </th>
				
            <th>
               @Html.DisplayNameFor(model => model.Age)
            </th>
				
            <th></th>
         </tr>
			
         @foreach (var item in Model) {
            <tr>
               <td>
                  @Html.DisplayFor(modelItem => item.Name)
               </td>
					
               <td>
                  @Html.DisplayFor(modelItem => item.JoiningDate)
               </td>
					
               <td>
                  @Html.DisplayFor(modelItem => item.Age)
               </td>
					
               <td>
                  @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                  @Html.ActionLink("Details", "Details", new { id = item.ID }) |
                  @Html.ActionLink("Delete", "Delete", new { id = item.ID })
               </td>
            </tr>
         }
			
      </table>
   </body>
</html>

This HTML is a property that we inherit from the ViewPage base class. So, it s available in all of our views and it returns an instance of a type called HTML Helper.

Let’s take a look at a simple example in which we will enable the user to edit the employee. Hence, this edit action will be using significant numbers of different HTML Helpers.

If you look at the above code, you will see at the end the following HTML Helper methods

@Html.ActionLink("Edit", "Edit", new { id = item.ID })

In the ActionLink helper, the first parameter is of the pnk which is “Edit”, the second parameter is the action method in the Controller, which is also “Edit”, and the third parameter ID is of any particular employee you want to edit.

Let’s change the EmployeeController class by adding a static pst and also change the index action using the following code.

pubpc static List<Employee> empList = new List<Employee>{
   new Employee{
      ID = 1,
      Name = "Allan",
      JoiningDate = DateTime.Parse(DateTime.Today.ToString()),
      Age = 23
   },
	
   new Employee{
      ID = 2,
      Name = "Carson",
      JoiningDate = DateTime.Parse(DateTime.Today.ToString()),
      Age = 45
   },
	
   new Employee{
      ID = 3,
      Name = "Carson",
      JoiningDate = DateTime.Parse(DateTime.Today.ToString()),
      Age = 37
   },
	
   new Employee{
      ID = 4,
      Name = "Laura",
      JoiningDate = DateTime.Parse(DateTime.Today.ToString()),
      Age = 26
   },
	
};

pubpc ActionResult Index(){
   var employees = from e in empList
   orderby e.ID
   select e;
   return View(employees);
}

Let’s update the Edit action. You will see two Edit actions one for GET and one for POST. Let’s update the Edit action for Get, which has only Id in the parameter as shown in the following code.

// GET: Employee/Edit/5
pubpc ActionResult Edit(int id){
   List<Employee> empList = GetEmployeeList();
   var employee = empList.Single(m => m.ID == id);
   return View(employee);
}

Now, we know that we have action for Edit but we don’t have any view for these actions. So we need to add a View as well. To do this, right-cpck on the Edit action and select Add View.

You will see the default name for view. Select Edit from the Template dropdown and Employee from the Model class dropdown.

Following is the default implementation in the Edit view.

@model MVCSimpleApp.Models.Employee
@{
   Layout = null;
}

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width" />
      <title>Edit</title>
   </head>
	
   <body>
      @using (Html.BeginForm()){
         @Html.AntiForgeryToken()
         <span class = "form-horizontal">
            <h4>Employee</h4>
            <hr />
            @Html.VapdationSummary(
               true, "", new { @class = "text-danger" })
					
            @Html.HiddenFor(model => model.ID)
				
            <span class = "form-group">
               @Html.LabelFor(
                  model => model.Name, htmlAttributes: new{
                     @class = "control-label col-md-2" })
							
               <span class = "col-md-10">
                  @Html.EditorFor(model => model.Name, new{
                     htmlAttributes = new {
                        @class = "form-control" } })
								
                  @Html.VapdationMessageFor(model => model.Name, "", new{
                        @class = "text-danger" })
               </span>
					
            </span>
				
            <span class = "form-group">
               @Html.LabelFor(
                  model => model.JoiningDate, htmlAttributes: new{
                     @class = "control-label col-md-2" })
							
               <span class = "col-md-10">
                  @Html.EditorFor(
                     model => model.JoiningDate, new{
                        htmlAttributes = new{ @class = "form-control" } })
								
                  @Html.VapdationMessageFor(
                     model => model.JoiningDate, "", new{
                        @class = "text-danger" })
               </span>
					
            </span>
				
            <span class = "form-group">
               @Html.LabelFor(
                  model => model.Age, htmlAttributes: new{
                     @class = "control-label col-md-2" })
							
               <span class = "col-md-10">
                  @Html.EditorFor(
                     model => model.Age, new{
                        htmlAttributes = new{ @class = "form-control" } })
								
                  @Html.VapdationMessageFor(
                     model => model.Age, "", new{
                        @class = "text-danger" })
               </span>
					
            </span>
				
            <span class = "form-group">
               <span class = "col-md-offset-2 col-md-10">
                  <input type = "submit" value = "Save" class = "btn btn-default"/>
               </span>
            </span>
				
         </span>
      }
		
      <span>
         @Html.ActionLink("Back to List", "Index")
      </span>
		
   </body>
</html>

As you can see that there are many helper methods used. So, here “HTML.BeginForm” writes an opening Form Tag. It also ensures that the method is going to be “Post”, when the user cpcks on the “Save” button.

Html.BeginForm is very useful, because it enables you to change the URL, change the method, etc.

In the above code, you will see one more HTML helper and that is “@HTML.HiddenFor”, which emits the hidden field.

MVC Framework is smart enough to figure out that this ID field is mentioned in the model class and hence it needs to be prevented from getting edited, that is why it is marked as hidden.

The Html.LabelFor HTML Helper creates the labels on the screen. The Html.VapdationMessageFor helper displays proper error message if anything is wrongly entered while making the change.

We also need to change the Edit action for POST because once you update the employee then it will call this action.

// POST: Employee/Edit/5
[HttpPost]
pubpc ActionResult Edit(int id, FormCollection collection){
   try{
      var employee = empList.Single(m => m.ID == id);
      if (TryUpdateModel(employee)){
         //To Do:- database code
         return RedirectToAction("Index");
      }
      return View(employee);
   }catch{
      return View();
   }
}

Let’s run this apppcation and request for the following URL http://localhost:63004/employee. You will receive the following output.

Cpck on the edit pnk on any particular employee, let’s say cpck on Allan edit pnk. You will see the following view.

Let’s change the age from 23 to 29 and cpck ‘Save’ button, then you will see the updated age on the Index View.

ASP.NET MVC - Model Binding

ASP.NET MVC model binding allows you to map HTTP request data with a model. It is the process of creating .NET objects using the data sent by the browser in an HTTP request. The ASP.NET Web Forms developers who are new to ASP.Net MVC are mostly confused how the values from View get converted to the Model class when it reaches the Action method of the Controller class, so this conversion is done by the Model binder.

Model binding is a well-designed bridge between the HTTP request and the C# action methods. It makes it easy for developers to work with data on forms (views), because POST and GET is automatically transferred into a data model you specify. ASP.NET MVC uses default binders to complete this behind the scene.

Let’s take a look at a simple example in which we add a ‘Create View’ in our project from the last chapter and we will see how we get these values from the View to the EmployeeController action method.

Following is the Create Action method for POST.

// POST: Employee/Create
[HttpPost]
pubpc ActionResult Create(FormCollection collection){
   try{
      // TODO: Add insert logic here
      return RedirectToAction("Index");
   }catch{
      return View();
   }
}

Right-cpck on the Create Action method and select Add View…

It will display the Add View dialog.

As you can see in the above screenshot, the default name is already mentioned. Now select Create from the Template dropdown and Employee from the Model class dropdown.

You will see the default code in the Create.cshtml view.

@model MVCSimpleApp.Models.Employee
@{
   Layout = null;
}

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width" />
      <title>Create</title>
   </head>
	
   <body>
      @using (Html.BeginForm()){
         @Html.AntiForgeryToken()
         <span class = "form-horizontal">
            <h4>Employee</h4>
            <hr />
            @Html.VapdationSummary(true, "", new { @class = "text-danger" })
				
            <span class = "form-group">
               @Html.LabelFor(model => model.Name, htmlAttributes:
                  new{ @class = "control-label col-md-2" })
						
               <span class = "col-md-10">
                  @Html.EditorFor(model => model.Name, new{ htmlAttributes =
                     new { @class = "form-control" } })
							
                  @Html.VapdationMessageFor(model => model.Name, "",
                     new{ @class = "text-danger" })
               </span>
            </span>
				
            <span class = "form-group">
               @Html.LabelFor(model => model.JoiningDate, htmlAttributes:
                  new{ @class = "control-label col-md-2" })
						
               <span class = "col-md-10">
                  @Html.EditorFor(model => model.JoiningDate, new{ htmlAttributes =
                     new { @class = "form-control" } })
							
                  @Html.VapdationMessageFor(model => model.JoiningDate, "",
                     new { @class = "text-danger" })
               </span>
            </span>
				
            <span class = "form-group">
               @Html.LabelFor(model => model.Age, htmlAttributes:
                  new { @class = "control-label col-md-2" })
						
               <span class = "col-md-10">
                  @Html.EditorFor(model => model.Age, new { htmlAttributes =
                     new { @class = "form-control" } })
							
                  @Html.VapdationMessageFor(model => model.Age, "", new{ @class = "text-danger" })
               </span>
            </span>
				
            <span class = "form-group">
               <span class = "col-md-offset-2 col-md-10">
                  <input type = "submit" value = "Create" class = "btn btn-default"/>
               </span>
            </span>
				
         </span>
      }
		
      <span>
         @Html.ActionLink("Back to List", "Index")
      </span>
		
   </body>
</html>

When the user enters values on Create View then it is available in FormCollection as well as Request.Form. We can use any of these values to populate the employee info from the view.

Let’s use the following code to create the Employee using FormCollection.

// POST: Employee/Create
[HttpPost]
pubpc ActionResult Create(FormCollection collection){
   try {
      Employee emp = new Employee();
      emp.Name = collection["Name"];
      DateTime jDate;
      DateTime.TryParse(collection["DOB"], out jDate);
      emp.JoiningDate = jDate;
      string age = collection["Age"];
      emp.Age = Int32.Parse(age);
      empList.Add(emp);
      return RedirectToAction("Index");
   }catch {
      return View();
   }
}

Run this apppcation and request for this URL http://localhost:63004/Employee/. You will receive the following output.

Cpck the ‘Create New’ pnk on top of the page and it will go to the following view.

Let’s enter data for another employee you want to add.

Cpck on the create button and you will see that the new employee is added in your pst.

In the above example, we are getting all the posted values from the HTML view and then mapping these values to the Employee properties and assigning them one by one.

In this case, we will also be doing the type casting wherever the posted values are not of the same format as of the Model property.

This is also known as manual binding and this type of implementation might not be that bad for simple and small data model. However, if you have huge data models and need a lot of type casting then we can utipze the power and ease-of-use of ASP.NET MVC Model binding.

Let’s take a look at the same example we did for Model binding.

We need to change the parameter of Create Method to accept the Employee Model object rather than FormCollection as shown in the following code.

// POST: Employee/Create
[HttpPost]
pubpc ActionResult Create(Employee emp){
   try{
      empList.Add(emp);
      return RedirectToAction("Index");
   }catch{
      return View();
   }
}

Now the magic of Model Binding depends on the id of HTML variables that are supplying the values.

For our Employee Model, the id of the HTML input fields should be the same as the Property names of the Employee Model and you can see that Visual Studio is using the same property names of the model while creating a view.

@Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })

The mapping will be based on the Property name by default. This is where we will find HTML helper methods very helpful because these helper methods will generate the HTML, which will have proper Names for the Model Binding to work.

Run this apppcation and request for the URL http://localhost:63004/Employee/. You will see the following output.

Let’s cpck on the Create New pnk on the top of the page and it will go to the following view.

Let’s enter data for another employee that we want to add.

Now cpck the create button and you will see that the new employee is added to your pst using the ASP.Net MVC model binding.

ASP.NET MVC - Databases

In all ASP.NET MVC apppcations created in this tutorial we have been passing hard-coded data from the Controllers to the View templates. But, in order to build a real Web apppcation, you might want to use a real database. In this chapter, we will see how to use a database engine in order to store and retrieve the data needed for your apppcation.

To store and retrieve data, we will use a .NET Framework data-access technology known as the Entity Framework to define and work with Models.

The Entity Framework (EF) supports Code First technique, which allows you to create model objects by writing simple classes and then the database will be created on the fly from your classes, which enables a very clean and rapid development workflow.

Let’s take a look at a simple example in which we will add support for Entity framework in our example.

Step 1 − To install the Entity Framework, right-cpck on your project and select NuGet Package Manager → Manage NuGet Packages for Solution…

It will open the NuGet Package Manager. Search for Entity framework in the search box.

Select the Entity Framework and cpck ‘Install’ button. It will open the Preview dialog.

Cpck Ok to continue.

Cpck the ‘I Accept’ button to start installation.

Once the Entity Framework is installed you will see the message in out window as seen in the above screenshot.

Add DBContext

We need to add another class to the Employee Model, which will communicate with Entity Framework to retrieve and save the data using the following code.

using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;

using System.Web;

namespace MVCSimpleApp.Models{
   pubpc class Employee{
      pubpc int ID { get; set; }
      pubpc string Name { get; set; }
      pubpc DateTime JoiningDate { get; set; }
      pubpc int Age { get; set; }
   }
	
   pubpc class EmpDBContext : DbContext{
      pubpc EmpDBContext()
      { }
      pubpc DbSet<Employee> Employees { get; set; }
   }
}

As seen above, EmpDBContext is derived from an EF class known as DbContext. In this class, we have one property with the name DbSet, which basically represents the entity you want to query and save.

Connection String

We need to specify the connection string under <configuration> tag for our database in the Web.config file.

<connectionStrings>
   <add name = "EmpDBContext" connectionString = "Data
   Source = (LocalDb)v14.0;AttachDbFilename = |DataDirectory|EmpDB.mdf;Initial
   Catalog = EmployeeDB;Integrated Security = SSPI;"
   providerName = "System.Data.SqlCpent"/>
</connectionStrings>

You don t actually need to add the EmpDBContext connection string. If you don t specify a connection string, Entity Framework will create localDB database in the user’s directory with the fully quapfied name of the DbContext class. For this demo, we will not add the connection string to make things simple.

Now we need to update the EmployeeController.cs file so that we can actually save and retrieve data from the database instead of using hardcoded data.

First we add create a private EmpDBContext class object and then update the Index, Create and Edit action methods as shown in the following code.

using MVCSimpleApp.Models;
using System.Linq;
using System.Web.Mvc;

namespace MVCSimpleApp.Controllers {
   pubpc class EmployeeController : Controller{
      private EmpDBContext db = new EmpDBContext();
      // GET: Employee
		
      pubpc ActionResult Index(){
         var employees = from e in db.Employees
         orderby e.ID
         select e;
         return View(employees);
      }
		
      // GET: Employee/Create
      pubpc ActionResult Create(){
         return View();
      }
		
      // POST: Employee/Create
      [HttpPost]
      pubpc ActionResult Create(Employee emp){
         try{
            db.Employees.Add(emp);
            db.SaveChanges();
            return RedirectToAction("Index");
         }catch{
            return View();
         }
      }
		
      // GET: Employee/Edit/5
      pubpc ActionResult Edit(int id){
         var employee = db.Employees.Single(m => m.ID == id);
         return View(employee);
      }
		
      // POST: Employee/Edit/5
      [HttpPost]
      pubpc ActionResult Edit(int id, FormCollection collection){
         try{
            var employee = db.Employees.Single(m => m.ID == id);
            if (TryUpdateModel(employee)){
               //To Do:- database code
               db.SaveChanges();
               return RedirectToAction("Index");
            }
            return View(employee);
         }catch{
            return View();
         }
      }
   }
}

Then we run this apppcation with the following URL http://localhost:63004/Employee. You will see the following output.

As you can see that there is no data on the view, this is because we have not added any records in our database, which is created by Visual Studio.

Let’s go to the SQL Server Object Explorer, you will see the database is created with the same name as we have in our DBContext class.

Let’s expand this database and you will see that it has one table which contains all the fields we have in our Employee model class.

To see the data in this table, right-cpck on the Employees table and select View Data.

You will see that we have no records at the moment.

Let’s add some records in the database directly as shown in the following screenshot.

Refresh the browser and you will see that data is now updated to the view from the database.

Let’s add one record from the browser by cpcking the ‘Create New’ pnk. It will display the Create view.

Let’s add some data in the following field.

Cpck on the Create button and it will update the Index view as well add this new record to the database.

Now let’s go the SQL Server Object Explorer and refresh the database. Right-cpck on the Employees table and select the View data menu option. You will see that the record is added in the database.

ASP.NET MVC - Vapdation

Vapdation is an important aspect in ASP.NET MVC apppcations. It is used to check whether the user input is vapd. ASP.NET MVC provides a set of vapdation that is easy-to-use and at the same time, it is also a powerful way to check for errors and, if necessary, display messages to the user.

DRY

DRY stands for Don t Repeat Yourself and is one of the core design principles of ASP.NET MVC. From the development point of view, it is encouraged to specify functionapty or behavior only at one place and then it is used in the entire apppcation from that one place.

This reduces the amount of code you need to write and makes the code you do write less error prone and easier to maintain.

Adding Vapdation to Model

Let’s take a look at a simple example of vapdation in our project from the last chapter. In this example, we will add data annotations to our model class, which provides some builtin set of vapdation attributes that can be appped to any model class or property directly in your apppcation, such as Required, StringLength, RegularExpression, and Range vapdation attributes.

It also contains formatting attributes pke DataType that help with formatting and don t provide any vapdation. The vapdation attributes specify behavior that you want to enforce on the model properties they are appped to.

The Required and MinimumLength attributes indicates that a property must have a value; but nothing prevents a user from entering white space to satisfy this vapdation. The RegularExpression attribute is used to pmit what characters can be input.

Let’s update Employee class by adding different annotation attributes as shown in the following code.

using System;
using System.ComponentModel.DataAnnotations;
using System.Data.Entity;

namespace MVCSimpleApp.Models {
   pubpc class Employee{
      pubpc int ID { get; set; }
      [StringLength(60, MinimumLength = 3)]
		
      pubpc string Name { get; set; }
      [Display(Name = "Joining Date")]
      [DataType(DataType.Date)]
      [DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}",
		
      ApplyFormatInEditMode = true)]
      pubpc DateTime JoiningDate { get; set; }
      [Range(22, 60)]
      pubpc int Age { get; set; }
   }
}

Now we also need to set pmits to the database. However, the database in SQL Server Object Explorer shows the name property is set to NVARCHAR (MAX) as seen in the following screenshot.

To set this pmitation on the database, we will use migrations to update the schema.

Open the Package Manager Console window from Tools → NuGet Package Manager → Package Manager Console.

Enter the following commands one by one in the Package Manager Console window.

Enable-Migrations
add-migration DataAnnotations
update-database

Following is the log after executing these commands in Package Manager Console window.

Visual Studio will also open the class which is derived from the DbMIgration class in which you can see the code that updates the schema constraints in Up method.

namespace MVCSimpleApp.Migrations {
   using System;
   using System.Data.Entity.Migrations;
	
   pubpc partial class DataAnnotations : DbMigration{
      pubpc override void Up(){
         AlterColumn("dbo.Employees", "Name", c => c.String(maxLength: 60));
      }
		
      pubpc override void Down(){
         AlterColumn("dbo.Employees", "Name", c => c.String());
      }
   }
}

The Name field has a maximum length of 60, which is the new length pmits in the database as shown in the following snapshot.

Run this apppcation and go to Create view by specifying the following URL http://localhost:63004/Employees/Create

Let’s enter some invapd data in these fields and cpck Create Button as shown in the following screenshot.

You will see that jQuery cpent side vapdation detects the error, and it also displays an error message.

ASP.NET MVC - Security

In this chapter, we will discuss how to implement security features in the apppcation. We will also look at the new membership features included with ASP.NET and available for use from ASP.NET MVC. In the latest release of ASP.NET, we can manage user identities with the following −

Cloud

SQL database

Local Windows active directory

In this chapter, we will also take a look at the new identity components that is a part of ASP.NET and see how to customize membership for our users and roles.

Authentication

Authentication of user means verifying the identity of the user. This is really important. You might need to present your apppcation only to the authenticated users for obvious reasons.

Let’s create a new ASP.Net MVC apppcation.

Cpck OK to continue.

When you start a new ASP.NET apppcation, one of the steps in the process is configuring the authentication services for apppcation needs.

Select MVC template and you will see that the Change Authentication button is now enabled.

This is done with the Change Authentication button that appears in the New Project dialog. The default authentication is, Inspanidual User Accounts.

Authentication Options

When you cpck the Change button, you will see a dialog with four options, which are as follows.

No Authentication

The first option is No Authentication and this option is used when you want to build a website that doesn t care who the visitors are.

It is open to anyone and every person connects as every single page. You can always change that later, but the No Authentication option means there will not be any features to identify users coming to the website.

Inspanidual User Accounts

The second option is Inspanidual User Accounts and this is the traditional forms-based authentication where users can visit a website. They can register, create a login, and by default their username is stored in a SQL Server database using some new ASP.NET identity features, which we ll look at.

The password is also stored in the database, but it is hashed first. Since the password is hashed, you don t have to worry about plain-text passwords sitting in a database.

This option is typically used for internet sites where you want to estabpsh the identity of a user. In addition to letting a user create a local login with a password for your site, you can also enable logins from third parties pke Microsoft, Google, Facebook, and Twitter.

This allows a user to log into your site using their Live account or their Twitter account and they can select a local username, but you don t need to store any passwords.

This is the option that we ll spend some time with in this module; the inspanidual user accounts option.

Work and School Accounts

The third option is to use organizational accounts and this is typically used for business apppcations where you will be using active directory federation services.

You will either set up Office 365 or use Azure Active Directory Services, and you have a single sign-on for internal apps and Cloud apps.

You will also need to provide an app ID so your app will need to be registered with the Windows Azure management portal if this is Azure based, and the app ID will uniquely identify this apppcation amongst all the apppcations that might be registered.

Windows Authentication

The fourth option is Windows authentication, which works well for intranet apppcations.

A user logs into Windows desktop and can launch a browser to the apppcation that sits inside the same firewall. ASP.NET can automatically pick up the user s identity, the one that was estabpshed by active directory. This option does not allow any anonymous access to the site, but again that is a configuration setting that can be changed.

Let s take a look into the forms-based authentication, the one that goes by the name, Inspanidual User Accounts. This apppcation will store usernames and passwords, old passwords in a local SQL Server database, and when this project is created, Visual Studio will also add NuGet packages.

Now run this apppcation and when you first come to this apppcation you will be an anonymous user.

You won t have an account that you can log into yet so you will need to register on this site.

Cpck on the Register pnk and you will see the following view.

Enter your email id and password.

Cpck Register. Now, the apppcation will recognize you.

It will be able to display your name. In the following screenshot, you can see Hello, muhammad.waqas@outlook.com! is displayed. You can cpck on that and it s a pnk to a page where you can change the password.

You can also log off, shut down, reboot, come back a week later, and you should be able to log in with the credentials that you used earper. Now cpck on the log off button and it will display the following page.

Cpck again on the Log in pnk and you will go to the following page.

You can login again with the same credentials.

A lot of work goes on behind the scene to get to this point. However, what we want to do is examine each of the features and see how this UI is built. What is managing the logoff and the login process? Where is this information sorted in the database?

Let s just start with a couple of simple basics. First we will see how is this username displayed. Open the _Layout.cshtml from the View/Shared folder in the Solution explorer.

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8" />
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <title>@ViewBag.Title - My ASP.NET Apppcation</title>
      @Styles.Render("~/Content/css")
      @Scripts.Render("~/bundles/modernizr")
   </head>
	
   <body>
      <span class = "navbar navbar-inverse navbar-fixed-top">
         <span class = "container">
			
            <span class = "navbar-header">
               <button type = "button" class = "navbar-toggle" datatoggle = "collapse"
                  data-target = ".navbar-collapse">
                     <span class = "icon-bar"></span>
                     <span class = "icon-bar"></span>
                     <span class = "icon-bar"></span>
               </button>
					
               @Html.ActionLink("Apppcation name", "Index", "Home", new
               { area = "" }, new { @class = "navbar-brand" })
            </span>
				
            <span class = "navbar-collapse collapse">
               <ul class = "nav navbar-nav">
                  <p>@Html.ActionLink("Home", "Index", "Home")</p>
                  <p>@Html.ActionLink("About", "About", "Home")</p>
                  <p>@Html.ActionLink("Contact", "Contact", "Home")</p>
               </ul>
					
               @Html.Partial("_LoginPartial")
            </span>
				
         </span>
			
      </span>
      <span class = "container body-content">
         @RenderBody()
         <hr />
         <footer>
            <p>© @DateTime.Now.Year - My ASP.NET Apppcation</p>
         </footer>
      </span>
		
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/bootstrap")
      @RenderSection("scripts", required: false)
		
   </body>
</html>

There is a common navigation bar, the apppcation name, the menu, and there is a partial view that s being rendered called _loginpartial. That s actually the view that displays the username or the register and login name. So _loginpartial.cshtml is also in the shared folder.

@using Microsoft.AspNet.Identity
@if (Request.IsAuthenticated) {
   using (Html.BeginForm("LogOff", "Account", FormMethod.Post,
      new { id = "logoutForm", @class = "navbar-right" })){
         @Html.AntiForgeryToken()
         <ul class = "nav navbar-nav navbar-right">
            <p>
               @Html.ActionLink("Hello " + User.Identity.GetUserName() + "!",
               "Index", "Manage", routeValues: null, htmlAttributes: new { title = "Manage" })
            </p>
				
            <p>
               <a href = "javascript:document.getElementById( logoutForm ).submit()">Logoff</a>
            </p>
				
         </ul>
      }
}else{
   <ul class = "nav navbar-nav navbar-right">
      <p>@Html.ActionLink("Register", "Register", "Account", routeValues:
         null, htmlAttributes: new { id = "registerLink" })</p>
			
      <p>@Html.ActionLink("Log in", "Login", "Account", routeValues: null,
         htmlAttributes: new { id = "loginLink" })</p>
   </ul>
}

As you can see above, there are if/else statements. If we do not know who the user is, because the request is not authenticated, this view will display register and login pnks. The user can cpck on the pnk to log in or register. All this is done by the account controller.

For now, we want to see how to get the username, and that s inside Request.IsAuthenticated. You can see a call to User.Identity.GetUserName. That will retrieve the username, which in this case is ‘muhammad.waqas@outlook.com’

Authorization

Let s suppose that we have some sort of information which we want to protect from unauthenticated users. So let’s create a new controller to display that information, but only when a user is logged in.

Right-cpck on the controller folder and select Add → Controller.

Select an MVC 5 controller - Empty controller and cpck ‘Add’.

Enter the name SecretController and cpck ‘Add’ button.

It will have two actions inside as shown in the following code.

using System.Web.Mvc;

namespace MVCSecurityDemo.Controllers{
   pubpc class SecretController : Controller{
      // GET: Secret
      pubpc ContentResult Secret(){
         return Content("Secret informations here");
      }
		
      pubpc ContentResult PubpcInfo(){
         return Content("Pubpc informations here");
      }
   }
}

When you run this apppcation, you can access this information without any authentication as shown in the following screenshot.

So only authenticated users should be able to get to Secret action method and the PubpcInfo can be used by anyone without any authentication.

To protect this particular action and keep unauthenticated users from arriving here, you can use the Authorize attribute. The Authorize attribute without any other parameters will make sure that the identity of the user is known and they re not an anonymous user.

// GET: Secret
[Authorize]
pubpc ContentResult Secret(){
   return Content("Secret informations here");
}

Now run this apppcation again and specify the same URL http://localhost:54232/Secret/Secret. The MVC apppcation will detect that you do not have access to that particular area of the apppcation and it will redirect you automatically to the login page, where it will give you a chance to log in and try to get back to that area of the apppcation where you were denied.

You can see that it is specified in the return URL, which essentially tells this page that if the user logs in successfully, redirect them back to /secret/secret.

Enter your credentials and cpck ‘Log in’ button. You will see that it goes directly to that page.

If you come back to the home page and log off, you cannot get to the secret page. You will be asked again to log in, but if go to /Secret/PubpcInfo, you can see that page, even when you are not authenticated.

So, when you don t want to be placing authorization on every action when you re inside a controller where pretty much everything requires authorization. In that case you can always apply this filter to the controller itself and now every action inside of this controller will require the user to be authenticated.

using System.Web.Mvc;

namespace MVCSecurityDemo.Controllers{
   [Authorize]
   pubpc class SecretController : Controller{
      // GET: Secret
      pubpc ContentResult Secret(){
         return Content("Secret informations here");
      }
		
      pubpc ContentResult PubpcInfo(){
         return Content("Pubpc informations here");
      }
   }
}

But if you really want any action to be open, you can come override this authorization rule with another attribute, which is, AllowAnonymous.

using System.Web.Mvc;

namespace MVCSecurityDemo.Controllers{
   [Authorize]
   pubpc class SecretController : Controller{
      // GET: Secret
      pubpc ContentResult Secret(){
         return Content("Secret informations here");
      }
		
      [AllowAnonymous]
      pubpc ContentResult PubpcInfo(){
         return Content("Pubpc informations here");
      }
   }
}

Run this apppcation and you can access the /Secret/PubpcInfo with logging in but other action will require authentication.

It will allow anonymous users into this one action only.

With the Authorize attribute, you can also specify some parameters, pke allow some specific users into this action.

using System.Web.Mvc;

namespace MVCSecurityDemo.Controllers{
   [Authorize(Users = "ap.khan@outlook.com")]
   pubpc class SecretController : Controller{
      // GET: Secret
      pubpc ContentResult Secret(){
         return Content("Secret informations here");
      }
		
      [AllowAnonymous]
      pubpc ContentResult PubpcInfo(){
         return Content("Pubpc informations here");
      }
   }
}

When you run this apppcation and go to /secret/secret, it will ask you to log in because it is not the proper user for this controller.

ASP.NET MVC - Caching

In this chapter, we will be focusing on one of the most common ASP.NET techniques pke Caching to improve the performance of the apppcation. Caching means to store something in memory that is being used frequently to provide better performance. We will see how you can dramatically improve the performance of an ASP.NET MVC apppcation by taking advantage of the output cache.

In ASP.NET MVC, there is an OutputCache filter attribute that you can apply and this is the same concept as output caching in web forms. The output cache enables you to cache the content returned by a controller action.

Output caching basically allows you to store the output of a particular controller in the memory. Hence, any future request coming for the same action in that controller will be returned from the cached result. That way, the same content does not need to be generated each and every time the same controller action is invoked.

Why Caching?

We need caching in many different scenarios to improve the performance of an apppcation. For example, you have an ASP.NET MVC apppcation, which displays a pst employees. Now when these records are retrieved from the database by executing a database query each and every time a user invokes the controller action it returns the Index view.

Hence you can take advantage of the output cache to avoid executing a database query every time a user invokes the same controller action. In this case, the view will be retrieved from the cache instead of being regenerated from the controller action.

Caching enables you to avoid performing redundant work on the server.

Let’s take a look at a simple example of caching in our project.

[OutputCache(Duration = 60)]
pubpc ActionResult Index(){
   var employees = from e in db.Employees
   orderby e.ID
   select e;
   return View(employees);
}

As you can see, we have added “OutputCache” attribute on the index action of the EmployeeController. Now to understand this concept, let us run this apppcation in debugger mode and also insert a breakpoint in the Index action method.

Specify the following URL http://localhost:63004/employee, and press ‘Enter’. You will see that the breakpoint is hit in the Index action method.

Press ‘F5’ button to continue and you will see the pst of employees on your view, which are retrieved from the database.

Refresh the browser again within 60 seconds and you will see that the breakpoint is not hit this time. This is because we have used output cache with duration of seconds. So it will cache this result for 60 seconds and when you refresh the browser, it will get the result from the cache, and it won’t load the content from the database server.

In addition to duration parameter, there are other settings options as well which you can use with output cache. These settings are not only for MVC framework but it is inherited from ASP.Net Caching.

Varying the Output Cache

In some cases, you might want different cached versions, such as, when you create a detail page, then when you cpck on the detailed pnk you will get details for the selected employee.

But first we need to create the detail view. For this, right-cpck on the Details action method from the EmployeeController and select Add View…

You will see the Details name is selected by default. Now select Details from the Template dropdown and Employee from the Model class dropdown.

Cpck ‘Add’ to continue and you will see the Details.cshtml.

@model MVCSimpleApp.Models.Employee
@{
   Layout = null;
}

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width" />
      <title>Details</title>
   </head>
	
   <body>
      <span>
         <h4>Employee</h4>
         <hr />
         <dl class = "dl-horizontal">
            <dt>
               @Html.DisplayNameFor(model => model.Name)
            </dt>
				
            <dd>
               @Html.DisplayFor(model => model.Name)
            </dd>
				
            <dt>
               @Html.DisplayNameFor(model => model.JoiningDate)
            </dt>
				
            <dd>
               @Html.DisplayFor(model => model.JoiningDate)
            </dd>
				
            <dt>
               @Html.DisplayNameFor(model => model.Age)
            </dt>
				
            <dd>
               @Html.DisplayFor(model => model.Age)
            </dd>
				
         </dl>
      </span>
		
      <p>
         @Html.ActionLink("Edit", "Edit", new { id = Model.ID }) |
         @Html.ActionLink("Back to List", "Index")
      </p>
		
   </body>
</html>

You can take advantage of the VaryByParam property of the [OutputCache] attribute. This property enables you to create different cached versions of the very same content when a form parameter or query string parameter varies. Following is the implementation of Details action.

// GET: Employee/Details/5
[OutputCache(Duration = int.MaxValue, VaryByParam = "id")]

pubpc ActionResult Details(int id){
   var employee = db.Employees.SingleOrDefault(e => e.ID == id);
   return View(employee);
}

When the above code is compiled and executed, you will receive the following output by specifying the URL http://localhost:63004/employee.

Cpck on the Details pnk of any pnk and you will see the details view of that particular employee.

The Details() action includes a VaryByParam property with the value “Id”. When different values of the Id parameter are passed to the controller action, different cached versions of the Details view are generated.

It is important to understand that using the VaryByParam property results in more caching. A different cached version of the Details view is created for each different version of the Id parameter.

Cache Profile

You can create a cache profile in the web.config file. It is an alternative to configuring output cache properties by modifying properties of the [OutputCache] attribute. It offers a couple of important advantages which are as follows.

Controls how controller actions cache content in one central location.

Creates one cache profile and apply the profile to several controllers or controller actions.

Modifies the web configuration file without recompipng your apppcation.

Disables caching for an apppcation that has already been deployed to production.

Let’s take a look at a simple example of cache profile by creating the cache profile in web.config file. The <caching> section must appear within the <system.web> section.

<caching>
   <outputCacheSettings>
      <outputCacheProfiles>
         <add name = "Cache10Min" duration = "600" varyByParam = "none"/>
      </outputCacheProfiles>
   </outputCacheSettings>
</caching>

You can apply the Cache10Min profile to a controller action with the [OutputCache] attribute which is as follows.

[OutputCache(CacheProfile = "Cache10Min")]

pubpc ActionResult Index(){
   var employees = from e in db.Employees
   orderby e.ID
   select e;
   return View(employees);
}

Run this apppcation and specify the following URL http://localhost:63004/employee

If you invoke the Index() action as shown above then the same time will be returned for 10 Min.

ASP.NET MVC - Razor

In this chapter, we will look at the Razor view engine in ASP.NET MVC apppcations and some of the reasons why Razor exists. Razor is a markup syntax that lets you embed server-based code into web pages using C# and VB.Net. It is not a programming language. It is a server side markup language.

Razor has no ties to ASP.NET MVC because Razor is a general-purpose templating engine. You can use it anywhere to generate output pke HTML. It s just that ASP.NET MVC has implemented a view engine that allows us to use Razor inside of an MVC apppcation to produce HTML.

You will have a template file that s a mix of some pteral text and some blocks of code. You combine that template with some data or a specific model where the template specifies where the data is supposed to appear, and then you execute the template to generate your output.

Razor Vs ASPX

Razor is very similar to how ASPX files work. ASPX files are templates, which contain pteral text and some C# code that specifies where your data should appear. We execute those to generate the HTML for our apppcation.

ASPX files have a dependency on the ASP.NET runtime to be available to parse and execute those ASPX files. Razor has no such dependencies.

Unpke ASPX files, Razor has some different design goals.

Goals

Microsoft wanted Razor to be easy to use and easy to learn, and work inside of tools pke Visual Studio so that IntelpSense is available, the debugger is available, but they wanted Razor to have no ties to a specific technology, pke ASP.NET or ASP.NET MVC.

If you re famipar with the pfe cycle of an ASPX file, then you re probably aware that there s a dependency on the ASP.NET runtime to be available to parse and execute those ASPX files. Microsoft wanted Razor to be smart, to make a developer s job easier.

Let’s take a look at a sample code from an ASPX file, which contains some pteral text. This is our HTML markup. It also contains pttle bits of C# code.

<% foreach (var item in Model) { %>
   <tr>
      <td>
         <%: Html.ActionLink("Edit", "Edit", new { id = item.ID })%> |
         <%: Html.ActionLink("Details", "Details", new { id = item.ID }) %>|
         <%: Html.ActionLink("Delete", "Delete", new { id = item.ID })%>
      </td>
		
      <td>
         <%: item.Name %>
      </td>
		
      <td>
         <%: String.Format("{0,g}", item.JoiningDate) %>
      </td>
		
   </tr>
<%}%>

But these Web forms were basically repurposed by Microsoft to work with the earper releases of MVC, meaning ASPX files were never a perfect match for MVC.

The syntax is a bit clunky when you need to transition from C# code back to HTML and from HTML code back into C# code. You are also prompted by IntelpSense to do things that just don t make sense in an MVC project, pke add directives for output caching and user controls into an ASPX view.

Now look at this code which produces the same output, the difference being it is using the Razor syntax.

@foreach (var item in Model) {
   <tr>
      <td>
         @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
         @Html.ActionLink("Details", "Details", new { id = item.ID }) |
         @Html.ActionLink("Delete", "Delete", new { id = item.ID })
      </td>
		
      <td>
         @item.Name
      </td>
		
      <td>
         @String.Format("{0,g}", item.JoiningDate)
      </td>
   </tr>
}

With Razor syntax you can begin a bit of C# code by using the ‘@’ sign and the Razor parse will automatically switch into parsing this statement, this foreach statement, as a bit of C# code.

But when we re finished with the foreach statement and we have our opening curly brace, we can transition from C# code into HTML without putting an exppcit token in there, pke the percent in the angle bracket signs.

The Razor parser is smart enough to switch between C# code and HTML and again, from HTML back into C# code when we need to place our closing curly brace here. If you compare these two blocks of code, I think you ll agree that the Razor version is easier to read and easier to write.

Creating a View Using Razor

Let s create a new ASP.Net MVC project.

Enter the name of project in the name field and cpck Ok.

To keep things simple, select the Empty option and check the MVC checkbox in the ‘Add folders and core references for’ section and cpck Ok. It will create a basic MVC project with minimal predefined content.

Once the project is created by Visual Studio, you will see a number of files and folders displayed in the Solution Explorer window. As we have created ASP.Net MVC project from an empty project template, so at the moment the apppcation does not contain anything to run. Since we start with an empty apppcation and don t even have a single controller, let’s add a HomeController.

To add a controller right-cpck on the controller folder in the solution explorer and select Add → Controller. It will display the Add Scaffold dialog.

Select the MVC 5 Controller – Empty option and cpck Add button and then the Add Controller dialog will appear.

Set the name to HomeController and cpck ‘Add’ button. You will see a new C# file ‘HomeController.cs’ in the Controllers folder, which is open for editing in Visual Studio as well.

Right-cpck on the Index action and select Add View…

Select Empty from the Template dropdown and cpck Add button. Visual Studio will create an Index.cshtml file inside the View/Home folder.

Notice that Razor view has a cshtml extension. If you re building your MVC apppcation using Visual Basic it will be a VBHTML extension. At the top of this file is a code block that is exppcitly setting this Layout property to null.

When you run this apppcation you will see the blank webpage because we have created a View from an Empty template.

Let s add some C# code to make things more interesting. To write some C# code inside a Razor view, the first thing we will do is type the ‘@’ symbol that tells the parser that it is going to be doing something in code.

Let s create a FOR loop specify ‘@i’ inside the curly braces, which is essentially telpng Razor to put the value of i.

@{
   Layout = null;
} 

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width" />
      <title>Index</title>
   </head>
	
   <body>
      <span>
         @for (int index = 0; index < 12; index++){
            <span>@index </span>
         }
      </span>
   </body>
	
</html>

Run this apppcation and you will see the following output.

ASP.NET MVC - Data Annotations

DataAnnotations is used to configure your model classes, which will highpght the most commonly needed configurations. DataAnnotations are also understood by a number of .NET apppcations, such as ASP.NET MVC, which allows these apppcations to leverage the same annotations for cpent-side vapdations. DataAnnotation attributes override default Code-First conventions.

System.ComponentModel.DataAnnotations includes the following attributes that impacts the nullabipty or size of the column.

Key

Timestamp

ConcurrencyCheck

Required

MinLength

MaxLength

StringLength

System.ComponentModel.DataAnnotations.Schema namespace includes the following attributes that impacts the schema of the database.

Table

Column

Index

ForeignKey

NotMapped

InverseProperty

Key

Entity Framework repes on every entity having a key value that it uses for tracking entities. One of the conventions that Code First depends on is how it imppes which property is the key in each of the Code First classes.

The convention is to look for a property named “Id” or one that combines the class name and “Id”, such as “StudentId”. The property will map to a primary key column in the database. The Student, Course and Enrollment classes follow this convention.

Now let’s suppose Student class used the name StdntID instead of ID. When Code First does not find a property that matches this convention it will throw an exception because of Entity Framework’s requirement that you must have a key property.

You can use the key annotation to specify which property is to be used as the EntityKey.

Let’s take a look at the Student class which contains StdntID. It doesn’t follow the default Code First convention so to handle this, Key attribute is added, which will make it a primary key.

pubpc class Student{
   [Key]
   pubpc int StdntID { get; set; }
   pubpc string LastName { get; set; }
   pubpc string FirstMidName { get; set; }
   pubpc DateTime EnrollmentDate { get; set; }

   pubpc virtual ICollection<Enrollment> Enrollments { get; set; }
}

When you run the apppcation and look into the database in SQL Server Explorer, you will see that the primary key is now StdntID in Students table.

Entity Framework also supports composite keys. Composite keys are primary keys that consist of more than one property. For example, you have a DrivingLicense class whose primary key is a combination of LicenseNumber and IssuingCountry.

pubpc class DrivingLicense{
   [Key, Column(Order = 1)]
   pubpc int LicenseNumber { get; set; }
	
   [Key, Column(Order = 2)]
   pubpc string IssuingCountry { get; set; }
   pubpc DateTime Issued { get; set; }
   pubpc DateTime Expires { get; set; }
}

When you have composite keys, Entity Framework requires you to define an order of the key properties. You can do this using the Column annotation to specify an order.

Timestamp

Code First will treat Timestamp properties the same as ConcurrencyCheck properties, but it will also ensure that the database field generated by Code First is non-nullable.

It s more common to use rowversion or timestamp fields for concurrency checking. But rather than using the ConcurrencyCheck annotation, you can use the more specific TimeStamp annotation as long as the type of the property is byte array. You can only have one timestamp property in a given class.

Let’s take a look at a simple example by adding the TimeStamp property to the Course class.

pubpc class Course{
   pubpc int CourseID { get; set; }
   pubpc string Title { get; set; }
   pubpc int Credits { get; set; }
   [Timestamp]
   pubpc byte[] TStamp { get; set; }

   pubpc virtual ICollection<Enrollment> Enrollments { get; set; }
}

As you can see in the above example, Timestamp attribute is appped to Byte[] property of the Course class. So, Code First will create a timestamp column TStamp in the Courses table.

ConcurrencyCheck

The ConcurrencyCheck annotation allows you to flag one or more properties to be used for concurrency checking in the database, when a user edits or deletes an entity. If you ve been working with the EF Designer, this apgns with setting a property s ConcurrencyMode to Fixed.

Let’s take a look at a simple example and see how ConcurrencyCheck works by adding it to the Title property in Course class.

pubpc class Course{
   pubpc int CourseID { get; set; }
	
   [ConcurrencyCheck]
   pubpc string Title { get; set; }
   pubpc int Credits { get; set; }
	
   [Timestamp, DataType("timestamp")]
   pubpc byte[] TimeStamp { get; set; }

   pubpc virtual ICollection<Enrollment> Enrollments { get; set; }
}

In the above Course class, ConcurrencyCheck attribute is appped to the existing Title property. Code First will include Title column in update command to check for optimistic concurrency as shown in the following code.

exec sp_executesql N UPDATE [dbo].[Courses]
   SET [Title] = @0
   WHERE (([CourseID] = @1) AND ([Title] = @2))
    ,N @0 nvarchar(max) ,@1 int,@2 nvarchar(max)
 ,@0 = N Maths ,@1 = 1,@2 = N Calculus 
go

Required

The Required annotation tells EF that a particular property is required. Let’s have a look at the following Student class in which Required id is added to the FirstMidName property. Required attribute will force EF to ensure that the property has data in it.

pubpc class Student{
   [Key]
   pubpc int StdntID { get; set; }
	
   [Required]
   pubpc string LastName { get; set; }
	
   [Required]
   pubpc string FirstMidName { get; set; }
   pubpc DateTime EnrollmentDate { get; set; }

   pubpc virtual ICollection<Enrollment> Enrollments { get; set; }
}

You can see in the above example of Student class Required attribute is appped to FirstMidName and LastName. So, Code First will create a NOT NULL FirstMidName and LastName column in the Students table as shown in the following screenshot.

MaxLength

The MaxLength attribute allows you to specify additional property vapdations. It can be appped to a string or array type property of a domain class. EF Code First will set the size of a column as specified in MaxLength attribute.

Let’s take a look at the following Course class in which MaxLength(24) attribute is appped to Title property.

pubpc class Course{
   pubpc int CourseID { get; set; }
   [ConcurrencyCheck]
   [MaxLength(24)]
	
   pubpc string Title { get; set; }
   pubpc int Credits { get; set; }

   pubpc virtual ICollection<Enrollment> Enrollments { get; set; }
}

When you run the above apppcation, Code-First will create a nvarchar(24) column Title in the Coursed table as shown in the following screenshot.

Now when the user sets the Title which contains more than 24 characters, EF will throw EntityVapdationError.

MinLength

The MinLength attribute allows you to specify additional property vapdations, just as you did with MaxLength. MinLength attribute can also be used with MaxLength attribute as shown in the following code.

pubpc class Course{
   pubpc int CourseID { get; set; }
   [ConcurrencyCheck]
   [MaxLength(24) , MinLength(5)]
   pubpc string Title { get; set; }
   pubpc int Credits { get; set; }

   pubpc virtual ICollection<Enrollment> Enrollments { get; set; }
}

EF will throw EntityVapdationError, if you set a value of Title property less than the specified length in MinLength attribute or greater than the specified length in MaxLength attribute.

StringLength

StringLength also allows you to specify additional property vapdations pke MaxLength. The difference being StringLength attribute can only be appped to a string type property of Domain classes.

pubpc class Course{
   pubpc int CourseID { get; set; }
   [StringLength (24)]
   pubpc string Title { get; set; }
   pubpc int Credits { get; set; }

   pubpc virtual ICollection<Enrollment> Enrollments { get; set; }
}

Entity Framework also vapdates the value of a property for StringLength attribute. Now, if the user sets the Title, which contains more than 24 characters, then EF will throw EntityVapdationError.

Table

Default Code First convention creates a table name same as the class name. If you are letting Code First create the database, you can also change the name of the tables it is creating. You can use Code First with an existing database. But it s not always the case that the names of the classes match the names of the tables in your database.

Table attribute overrides this default convention. EF Code First will create a table with a specified name in Table attribute for a given domain class.

Let’s take a look at an example in which the class is named Student, and by convention, Code First presumes this will map to a table named Students. If that s not the case you can specify the name of the table with the Table attribute as shown in the following code.

[Table("StudentsInfo")]
pubpc class Student{
   [Key]
   pubpc int StdntID { get; set; }
	
   [Required]
   pubpc string LastName { get; set; }
	
   [Required]
   pubpc string FirstMidName { get; set; }
   pubpc DateTime EnrollmentDate { get; set; }

   pubpc virtual ICollection<Enrollment> Enrollments { get; set; }
}

You can now see that the Table attribute specifies the table as StudentsInfo. When the table is generated, you will see the table name StudentsInfo as shown in the following screenshot.

You cannot only specify the table name but you can also specify a schema for the table using the Table attribute using the following code.

[Table("StudentsInfo", Schema = "Admin")]

pubpc class Student{
   [Key]
   pubpc int StdntID { get; set; }
	
   [Required]
   pubpc string LastName { get; set; }
	
   [Required]
   pubpc string FirstMidName { get; set; }
   pubpc DateTime EnrollmentDate { get; set; }

   pubpc virtual ICollection<Enrollment> Enrollments { get; set; }
}

In the above example, the table is specified with admin schema. Now Code First will create StudentsInfo table in Admin schema as shown in the following screenshot.

Column

It is also the same as Table attribute, but Table attribute overrides the table behavior while Column attribute overrides the column behavior. Default Code First convention creates a column name same as the property name.

If you are letting Code First create the database, and you also want to change the name of the columns in your tables. Column attribute overrides this default convention. EF Code First will create a column with a specified name in the Column attribute for a given property.

Let’s take a look at the following example again in which the property is named FirstMidName, and by convention, Code First presumes this will map to a column named FirstMidName. If that s not the case, you can specify the name of the column with the Column attribute as shown in the following code.

pubpc class Student{
   pubpc int ID { get; set; }
   pubpc string LastName { get; set; }
	
   [Column("FirstName")]
   pubpc string FirstMidName { get; set; }
   pubpc DateTime EnrollmentDate { get; set; }

   pubpc virtual ICollection<Enrollment> Enrollments { get; set; }
}

You can now see that the Column attribute specifies the column as FirstName. When the table is generated, you will see the column name FirstName as shown in the following screenshot.

Index

The Index attribute was introduced in Entity Framework 6.1. Note − If you are using an earper version, the information in this section does not apply.

You can create an index on one or more columns using the IndexAttribute. Adding the attribute to one or more properties will cause EF to create the corresponding index in the database when it creates the database.

Indexes make the retrieval of data faster and efficient, in most cases. However, overloading a table or view with indexes could unpleasantly affect the performance of other operations such as inserts or updates.

Indexing is the new feature in Entity Framework where you can improve the performance of your Code First apppcation by reducing the time required to query data from the database.

You can add indexes to your database using the Index attribute, and override the default Unique and Clustered settings to get the index best suited to your scenario. By default, the index will be named IX_<property name>

Let’s take a look at the following code in which Index attribute is added in Course class for Credits.

pubpc class Cours{
   pubpc int CourseID { get; set; }
   pubpc string Title { get; set; }
   [Index]
   pubpc int Credits { get; set; }

   pubpc virtual ICollection<Enrollment> Enrollments { get; set; }
}

You can see that the Index attribute is appped to the Credits property. Now when the table is generated, you will see IX_Credits in Indexes.

By default, indexes are non-unique, but you can use the IsUnique named parameter to specify that an index should be unique. The following example introduces a unique index as shown in the following code.

pubpc class Course{
   pubpc int CourseID { get; set; }
   [Index(IsUnique = true)]
	
   pubpc string Title { get; set; }
   [Index]
	
   pubpc int Credits { get; set; }

   pubpc virtual ICollection<Enrollment> Enrollments { get; set; }
}

ForeignKey

Code First convention will take care of the most common relationships in your model, but there are some cases where it needs help. For example, by changing the name of the key property in the Student class created a problem with its relationship to Enrollment class.

pubpc class Enrollment{
   pubpc int EnrollmentID { get; set; }
   pubpc int CourseID { get; set; }
   pubpc int StudentID { get; set; }
   pubpc Grade? Grade { get; set; }
   pubpc virtual Course Course { get; set; }
   pubpc virtual Student Student { get; set; }
}

pubpc class Student{
   [Key]
   pubpc int StdntID { get; set; }
   pubpc string LastName { get; set; }
   pubpc string FirstMidName { get; set; }
   pubpc DateTime EnrollmentDate { get; set; }

   pubpc virtual ICollection<Enrollment> Enrollments { get; set; }
}

While generating the database, Code First sees the StudentID property in the Enrollment class and recognizes it, by the convention that it matches a class name plus “ID”, as a foreign key to the Student class. But there is no StudentID property in the Student class, rather it is StdntID property in Student class.

The solution for this is to create a navigation property in the Enrollment and use the ForeignKey DataAnnotation to help Code First understand how to build the relationship between the two classes as shown in the following code.

pubpc class Enrollment{
   pubpc int EnrollmentID { get; set; }
   pubpc int CourseID { get; set; }
   pubpc int StudentID { get; set; }
   pubpc Grade? Grade { get; set; }
   pubpc virtual Course Course { get; set; }
	
   [ForeignKey("StudentID")]
   pubpc virtual Student Student { get; set; }
}

You can see now that the ForeignKey attribute is appped to navigation property.

NotMapped

By default conventions of Code First, every property that is of a supported data type and which includes getters and setters are represented in the database. But this isn’t always the case in apppcations. NotMapped attribute overrides this default convention. For example, you might have a property in the Student class such as FatherName, but it does not need to be stored. You can apply NotMapped attribute to a FatherName property, which you do not want to create a column in a database. Following is the code.

pubpc class Student{
   [Key]
   pubpc int StdntID { get; set; }
   pubpc string LastName { get; set; }
   pubpc string FirstMidName { get; set; }
   pubpc DateTime EnrollmentDate { get; set; }
   [NotMapped]
   pubpc int FatherName { get; set; }

   pubpc virtual ICollection<Enrollment> Enrollments { get; set; }
}

You can see that NotMapped attribute is appped to the FatherName property. Now when the table is generated, you will see that FatherName column will not be created in a database, but it is present in Student class.

Code First will not create a column for a property which does not have either getters or setters.

InverseProperty

The InverseProperty is used when you have multiple relationships between classes. In the Enrollment class, you may want to keep track of who enrolled a Current Course and who enrolled a Previous Course.

Let’s add two navigation properties for the Enrollment class.

pubpc class Enrollment{
   pubpc int EnrollmentID { get; set; }
   pubpc int CourseID { get; set; }
   pubpc int StudentID { get; set; }
   pubpc Grade? Grade { get; set; }
	
   pubpc virtual Course CurrCourse { get; set; }
   pubpc virtual Course PrevCourse { get; set; }
   pubpc virtual Student Student { get; set; }
}

Similarly, you’ll also need to add in the Course class referenced by these properties. The Course class has navigation properties back to the Enrollment class, which contains all the current and previous enrollments.

pubpc class Course{
   pubpc int CourseID { get; set; }
   pubpc string Title { get; set; }
   [Index]
	
   pubpc int Credits { get; set; }
   pubpc virtual ICollection<Enrollment> CurrEnrollments { get; set; }
   pubpc virtual ICollection<Enrollment> PrevEnrollments { get; set; }
}

Code First creates {Class Name}_{Primary Key} foreign key column if the foreign key property is not included in a particular class as shown in the above classes. When the database is generated you will see a number of foreign keys as seen in the following screenshot.

As you can see that Code First is not able to match up the properties in the two classes on its own. The database table for Enrollments should have one foreign key for the CurrCourse and one for the PrevCourse, but Code First will create four foreign key properties, i.e.

CurrCourse_CourseID

PrevCourse_CourseID

Course_CourseID

Course_CourseID1

To fix these problems, you can use the InverseProperty annotation to specify the apgnment of the properties.

pubpc class Course{
   pubpc int CourseID { get; set; }
   pubpc string Title { get; set; }
	
   [Index]
   pubpc int Credits { get; set; }
	
   [InverseProperty("CurrCourse")]
   pubpc virtual ICollection<Enrollment> CurrEnrollments { get; set; }
	
   [InverseProperty("PrevCourse")]
   pubpc virtual ICollection<Enrollment> PrevEnrollments { get; set; }
}

As you can see now, when InverseProperty attribute is appped in the above Course class by specifying which reference property of Enrollment class it belongs to, Code First will generate database and create only two foreign key columns in Enrollments table as shown in the following screenshot.

We recommend you to execute the above example for better understanding.

ASP.NET MVC - NuGet Package Management

In this chapter, we will talk about NuGet which is a package manager for .NET and Visual Studio. NuGet can be used to find and install packages, that is, software pieces and assembpes and things that you want to use in your project.

NuGet is not a tool that is specific to ASP.NET MVC projects. This is a tool that you can use inside of Visual Studio for console apppcations, WPF apppcations, Azure apppcations, any types of apppcation.

Package Management

NuGet is a package manager, and is responsible for downloading, instalpng, updating, and configuring software in your system. From the term software we don’t mean end users software pke Microsoft Word or Notepad 2, etc. but pieces of software, which you want to use in your project, assembly references.

For example, assembpes you want to use might be mock, for mock object unit testing, or NHibernate for data access, and components you use when building your apppcation. The above-mentioned components are open source software, but some NuGet packages you find are closed source software. Some of the packages you ll find are even produced by Microsoft.

The common theme along all the packages mentioned above, pke mock and NHibernate, and Microsoft packages pke a preview for the Entity Framework, is that they don t come with Visual Studio by default.

Without NuGet

To install any of these components without NuGet, you will need the following steps.

If you want to use one of those components, you need to find the home page for some particular project and look for a download pnk. Then once the project is downloaded, it s typically in a ZIP format so you will need to extract it.

If you didn t download binaries, then you will first need to build the software and then reference it in your project. And many components at that point still require some configuration to get up and running.

Using NuGet

NuGet replaces all of the steps discussed earper and you just need to say Add Package. NuGet knows where to download the latest version, it knows how to extract it, how to estabpsh a reference to that component, and even configure it. This leaves you more time to just build the software.

Let’s take a look at a simple example in which we will add support for Entity framework in our ASP.NET MVC project using NuGet.

Step 1 − Install the Entity Framework. Right-cpck on the project and select NuGet Package Manager → Manage NuGet Packages for Solution…

It will open the NuGet Package Manager.

Step 2 − Search for Entity framework in the search box.

Step 3 − Select the Entity Framework and cpck ‘Install’ button. It will open the Preview dialog.

Step 4 − Cpck Ok to continue.

Step 5 − Cpck the ‘I Accept’ button to start the installation.

Once the Entity Framework is installed you will see the message in out window as shown above.

When you install a package with NuGet, you will see a new packages directory in the same folder as the solution file hosting your project. This package directory contains all the packages that you have installed for any of the projects in that solution.

In other words, NuGet is not downloading packages into a central location, it s storing them on a per solution basis.

ASP.NET MVC - Web API

ASP.NET Web API is a framework that makes it easy to build HTTP services that reach a broad range of cpents, including browsers and mobile devices. ASP.NET Web API is an ideal platform for building RESTful apppcations on the .NET Framework.

When you re building APIs on the Web, there are several ways you can build APIs on the Web. These include HTTP/RPC, and what this means is using HTTP in Remote Procedure Call to call into things, pke Methods, across the Web.

The verbs themselves are included in the APIs, pke Get Customers, Insert Invoice, Delete Customer, and that each of these endpoints end up being a separate URI.

Let’s take a look at a simple example of Web API by creating a new ASP.NET Web Apppcation.

Step 1 − Open the Visual Studio and cpck File → New → Project menu option.

A new Project dialog opens.

Step 2 − From the left pane, select Templates → Visual C# → Web.

Step 3 − In the middle pane, select ASP.NET Web Apppcation

Enter project name WebAPIDemo in the Name field and cpck Ok to continue. You will see the following dialog, which asks you to set the initial content for the ASP.NET project.

Step 4 − To keep things simple, select the Empty option and check the Web API checkbox in the ‘Add folders and core references for’ section and cpck Ok.

Step 5 − It will create a basic MVC project with minimal predefined content.

Once the project is created by Visual Studio, you will see a number of files and folders displayed in the Solution Explorer window.

Step 6 − Now we need to add a model. Right-cpck on the Models folder in the solution explorer and select Add → Class.

You will now see the Add New Item dialog.

Step 7 − Select Class in the middle pan and enter Employee.cs in the name field.

Step 8 − Add some properties to Employee class using the following code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace WebAPIDemo.Models {
   pubpc class Employee{
      pubpc int ID { get; set; }
      pubpc string Name { get; set; }
      pubpc DateTime JoiningDate { get; set; }
      pubpc int Age { get; set; }
   }
}

Step 9 − Let’s add the controller. Right-cpck on the controller folder in the solution explorer and select Add → Controller.

It will display the Add Scaffold dialog.

Step 10 − Select the Web API 2 Controller - Empty option. This template will create an Index method with default action for controller.

Step 11 − Cpck ‘Add’ button and the Add Controller dialog will appear.

Step 12 − Set the name to EmployeesController and cpck ‘Add’ button.

You will see a new C# file ‘EmployeeController.cs’ in the Controllers folder, which is open for editing in Visual Studio with some default actions.

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web.Http;
using WebAPIDemo.Models;

namespace WebAPIDemo.Controllers{
   pubpc class EmployeesController : ApiController{
      Employee[] employees = new Employee[]{
         new Employee { ID = 1, Name = "Mark", JoiningDate =
            DateTime.Parse(DateTime.Today.ToString()), Age = 30 },
         new Employee { ID = 2, Name = "Allan", JoiningDate =
            DateTime.Parse(DateTime.Today.ToString()), Age = 35 },
         new Employee { ID = 3, Name = "Johny", JoiningDate =
            DateTime.Parse(DateTime.Today.ToString()), Age = 21 }
      };
		
      pubpc IEnumerable<Employee> GetAllEmployees(){
         return employees;
      }
		
      pubpc IHttpActionResult GetEmployee(int id){
         var employee = employees.FirstOrDefault((p) => p.ID == id);
         if (employee == null){
            return NotFound();
         }
         return Ok(employee);
      }
   }
}

Step 13 − Run this apppcation and specify /api/employees/ at the end of the URL and press ‘Enter’. You will see the following output.

Step 14 − Let us specify the following URL http://localhost:63457/api/employees/1 and you will see the following output.

ASP.NET MVC - Scaffolding

ASP.NET Scaffolding is a code generation framework for ASP.NET Web apppcations. Visual Studio 2013 includes pre-installed code generators for MVC and Web API projects. You add scaffolding to your project when you want to quickly add code that interacts with data models. Using scaffolding can reduce the amount of time to develop standard data operations in your project.

As you have seen that we have created the views for Index, Create, Edit actions and also need to update the actions methods as well. But ASP.Net MVC provides an easier way to create all these Views and action methods using scaffolding.

Let’s take a look at a simple example. We will create the same example which contains a model class Employee, but this time we will use scaffolding.

Step 1 − Open the Visual Studio and cpck on File → New → Project menu option.

A new Project dialog opens.

Step 2 − From the left pane, select Templates → Visual C# → Web.

Step 3 − In the middle pane, select ASP.NET Web Apppcation.

Step 4 − Enter the project name ‘MVCScaffoldingDemo’ in the Name field and cpck Ok to continue. You will see the following dialog which asks you to set the initial content for the ASP.NET project.

Step 5 − To keep things simple, select the Empty option and check the MVC checkbox in the ‘Add folders and core references for’section and cpck Ok.

It will create a basic MVC project with minimal predefined content.

Once the project is created by Visual Studio, you will see a number of files and folders displayed in the Solution Explorer window.

Add Entity Framework Support

First step is to install the Entity Framework. Right-cpck on the project and select NuGet Package Manager → Manage NuGet Packages for Solution…

It will open the ‘NuGet Package Manager’. Search for Entity framework in the search box.

Select the Entity Framework and cpck ‘Install’ button. It will open the Preview dialog.

Cpck Ok to continue.

Cpck ‘I Accept’ button to start installation.

Once the Entity Framework is installed you will see the message in the out window as shown in the above screenshot.

Add Model

To add a model, right-cpck on the Models folder in the solution explorer and select Add → Class. You will see the ‘Add New Item’ dialog.

Select Class in the middle pan and enter Employee.cs in the name field.

Add some properties to Employee class using the following code.

using System;

namespace MVCScaffoldingDemo.Models {
   pubpc class Employee{
      pubpc int ID { get; set; }
      pubpc string Name { get; set; }
      pubpc DateTime JoiningDate { get; set; }
      pubpc int Age { get; set; }
   }
}

Add DBContext

We have an Employee Model, now we need to add another class, which will communicate with Entity Framework to retrieve and save the data. Following is the complete code in Employee.cs file.

using System;
using System.Data.Entity;

namespace MVCScaffoldingDemo.Models{
   pubpc class Employee{
      pubpc int ID { get; set; }
      pubpc string Name { get; set; }
      pubpc DateTime JoiningDate { get; set; }
      pubpc int Age { get; set; }
   }
	
   pubpc class EmpDBContext : DbContext{
      pubpc DbSet<Employee> Employees { get; set; }
   }
}

As you can see ‘EmpDBContext’ is derived from an EF class known as ‘DbContext’. In this class, we have one property with the name DbSet, which basically represents the entity which you want to query and save.

Now let’s build a solution and you will see the message when the project is successfully build.

Add a Scaffolded Item

To add a scaffold, right-cpck on Controllers folder in the Solution Explorer and select Add → New Scaffolded Item.

It will display the Add Scaffold dialog.

Select MVC 5 Controller with views, using Entity Framework in the middle pane and cpck ‘Add’ button, which will display the Add Controller dialog.

Select Employee from the Model class dropdown and EmpDBContext from the Data context class dropdown. You will also see that the controller name is selected by default.

Cpck ‘Add’ button to continue and you will see the following code in the EmployeesController, which is created by Visual Studio using Scaffolding.

using System.Data.Entity;
using System.Linq;
using System.Net;
using System.Web.Mvc;
using MVCScaffoldingDemo.Models;

namespace MVCScaffoldingDemo.Controllers {
   pubpc class EmployeesController : Controller{
      private EmpDBContext db = new EmpDBContext();
      
      // GET: Employees
      pubpc ActionResult Index(){
         return View(db.Employees.ToList());
      }
      
      // GET: Employees/Details/5
      pubpc ActionResult Details(int? id){
         if (id == null){
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
         }
			
         Employee employee = db.Employees.Find(id);
			
         if (employee == null){
            return HttpNotFound();
         }
         return View(employee);
      }
      
      // GET: Employees/Create
      pubpc ActionResult Create(){
         return View();
      }
      
      // POST: Employees/Create
      // To protect from overposting attacks, please enable the specific
      properties you want to bind to, for
      // more details see http://go.microsoft.com/fwpnk/?LinkId=317598.
      [HttpPost]
      [VapdateAntiForgeryToken]
		
      pubpc ActionResult Create([Bind(Include = "ID,Name,JoiningDate,Age")]
      Employee employee){
         if (ModelState.IsVapd){
            db.Employees.Add(employee);
            db.SaveChanges();
            return RedirectToAction("Index");
         }
         return View(employee);
      }
      
      // GET: Employees/Edit/5
      pubpc ActionResult Edit(int? id){
         if (id == null){
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
         }
			
         Employee employee = db.Employees.Find(id);
			
         if (employee == null){
            return HttpNotFound();
         }
         return View(employee);
      }
      
      // POST: Employees/Edit/5
      // To protect from overposting attacks, please enable the specific
      properties you want to bind to, for
      // more details see http://go.microsoft.com/fwpnk/?LinkId=317598.
      [HttpPost]
      [VapdateAntiForgeryToken]
      pubpc ActionResult Edit([Bind(Include = "ID,Name,JoiningDate,Age")]Employee employee){
         if (ModelState.IsVapd){
            db.Entry(employee).State = EntityState.Modified;
            db.SaveChanges();
            return RedirectToAction("Index");
         }
         return View(employee);
      }
      
      // GET: Employees/Delete/5
      pubpc ActionResult Delete(int? id){
         if (id == null){
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
         }
			
         Employee employee = db.Employees.Find(id);
			
         if (employee == null){
            return HttpNotFound();
         }
         return View(employee);
      }
      
      // POST: Employees/Delete/5
      [HttpPost, ActionName("Delete")]
      [VapdateAntiForgeryToken]
		
      pubpc ActionResult DeleteConfirmed(int id){
         Employee employee = db.Employees.Find(id);
         db.Employees.Remove(employee);
         db.SaveChanges();
         return RedirectToAction("Index");
      }
      
      protected override void Dispose(bool disposing){
         if (disposing){
            db.Dispose();
         }
			
         base.Dispose(disposing);
      }
   }
}

Run your apppcation and specify the following URL http://localhost:59359/employees. You will see the following output.

You can see there is no data in the View, because we have not added any records to the database, which is created by Visual Studio.

Let’s add one record from the browser by cpcking the ‘Create New’ pnk, it will display the Create view.

Let’s add some data in the following field.

Cpck the ‘Create’ button and it will update the Index view.

You can see that the new record is also added to the database.

As you can see that we have implemented the same example by using Scaffolding, which is a much easier way to create your Views and Action methods from your model class.

ASP.NET MVC - Bootstrap

In this chapter, we will look at Bootstrap which is a front-end framework now included with ASP.NET and MVC. It is a popular front-end tool kit for web apppcations, and will help you build a user interface with HTML, CSS, and JavaScript.

It was originally created by web developers at Twitter for personal use, however, it is now an open source and has become popular with designers and developers because of its flexibppty and ease of use.

You can use Bootstrap to create an interface that looks good on everything from large desktop displays to small mobile screens. In this chapter, we will also look at how Bootstrap can work with your layout views to structure the look of an apppcation.

Bootstrap provides all the pieces you need for layout, buttons, forms, menus, widgets, picture carousels, labels, badges, typography, and all sorts of features. Since Bootstrap is all HTML, CSS and JavaScript, all open standards, you can use it with any framework including ASP.NET MVC. When you start a new MVC project, Bootstrap will be present, meaning you ll find Bootstrap.css and Bootstrap.js in your project.

Let’s create a new ASP.NET Web Apppcation.

Enter the name of the project, let’s say ‘MVCBootstrap’ and cpck Ok. You will see the following dialog.

In this dialog, if you select the empty template, you will get an empty web apppcation and there will be no Bootstrap present. There won t be any controllers or any other script files either.

Now select the MVC template and cpck Ok. When Visual Studio creates this solution, one of the packages that it will download and install into the project will be the Bootstrap NuGet package. You can verify by going to packages.config and you can see the Bootstrap version 3 package.

You can also see the Content folder which contains different css files.

Run this apppcation and you will see the following page.

When this page appears, most of the layout and stypng that you see is layout and stypng that has been appped by Bootstrap. It includes the navigation bar at the top with the pnks as well as the display that is advertising ASP.NET. It also includes all of these pieces down about getting started and getting more pbraries and web hosting.

If you expand the browser just a pttle bit more, those will actually lay out side by side and that s part of Bootstrap s responsive design features.

If you look under the content folder, you will find the Bootstrap.css file.

The NuGet package also gives a minified version of that file that s a pttle bit smaller. Under scripts, you will find Bootstrap.js, that s required for some of the components of Bootstrap.

It does have a dependency on jQuery and fortunately jQuery is also installed in this project and there s a minified version of the Bootstrap JavaScript file.

Now the question is, where are all these added in the apppcation? You might expect, that it would be in the layout template, the layout view for this project which is under View/Shared/_layout.cshtml.

The layout view controls the structure of the UI. Following is the complete code in _layout.cshtml file.

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8" />
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <title>@ViewBag.Title - My ASP.NET Apppcation</title>
      @Styles.Render("~/Content/css")
      @Scripts.Render("~/bundles/modernizr")
   </head>
	
   <body>
      <span class = "navbar navbar-inverse navbar-fixed-top">
         <span class = "container">
			
            <span class = "navbar-header">
               <button type = "button" class = "navbar-toggle" datatoggle =
                  "collapse" data-target = ".navbar-collapse">
                  <span class = "icon-bar"></span>
                  <span class = "icon-bar"></span>
                  <span class = "icon-bar"></span>
               </button>
					
               @Html.ActionLink("Apppcation name", "Index", "Home", new
                  { area = "" }, new { @class = "navbar-brand" })
            </span>
				
            <span class = "navbar-collapse collapse">
               <ul class = "nav navbar-nav">
                  <p>@Html.ActionLink("Home", "Index", "Home")</p>
                  <p>@Html.ActionLink("About", "About", "Home")</p>
                  <p>@Html.ActionLink("Contact", "Contact", "Home")</p>
               </ul>
					
               @Html.Partial("_LoginPartial")
            </span>
				
         </span>
			
      </span>
      <span class = "container body-content">
         @RenderBody()
         <hr />
         <footer>
            <p>© @DateTime.Now.Year - My ASP.NET Apppcation</p>
         </footer>
      </span>
		
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/bootstrap")
      @RenderSection("scripts", required: false)
		
   </body>
</html>

In the above code there are two things to note. First at the top, after <title> you will see the following pne of code.

@Styles.Render("~/Content/css")

The Styles.Render for Content/css is actually where the Bootstrap.css file is going to be included, and at the bottom, you will see the following pne of code.

@Scripts.Render("~/bundles/bootstrap")

It is rendering the Bootstrap script. So in order to find out what exactly is inside of these bundles, we ll have to go into the BundleConfig file, which is in App_Start folder.

In BundleConfig, you can see at the bottom that the CSS bundle includes both Bootstrap.css and our custom site.css.

bundles.Add(new StyleBundle("~/Content/css").Include(
   "~/Content/bootstrap.css",
   "~/Content/site.css"));

It is a place where we can add our own style sheets to customize the look of the apppcation. You can also see the Bootstrap bundle that appears before the CSS bundle that includes Bootstrap.js, and another JavaScript file, respond.js.

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
   "~/Scripts/bootstrap.js",
   "~/Scripts/respond.js"));

Let’s comment Bootstrap.css as shown in the following code.

bundles.Add(new StyleBundle("~/Content/css").Include(
   //"~/Content/bootstrap.css",
   "~/Content/site.css"));

Run this apppcation again, just to give you an idea of what Bootstrap is doing, because now the only styles that are available are the styles that are in site.css.

As you can see we lost the layout, the navigation bar at the top of the page. Now everything looks ordinary and boring.

Let us now see what Bootstrap is all about. There s a couple of things that Bootstrap just does automatically and there s a couple of things that Bootstrap can do for you when you add classes and have the right HTML structure. If you look at the _layout.cshtml file, you will see the navbar class as shown in the following code.

<span class = "navbar navbar-inverse navbar-fixed-top">
   <span class = "container">
	
      <span class = "navbar-header">
         <button type = "button" class = "navbar-toggle" datatoggle =
            "collapse" data-target = ".navbar-collapse">
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
            <span class = "icon-bar"></span>
         </button>
         <a class = "navbar-brand" href = "/">Apppcation name</a>
      </span>
		
      <span class = "navbar-collapse collapse">
         <ul class = "nav navbar-nav">
            <p><a href = "/">Home</a></p>
            <p><a href = "/Home/About">About</a></p>
            <p><a href = "/Home/Contact">Contact</a></p>
         </ul>
			
         <ul class = "nav navbar-nav navbar-right">
            <p><a href = "/Account/Register" id = "registerLink">Register</a></p>
            <p><a href = "/Account/Login" id = "loginLink">Log in</a></p>
         </ul>
			
      </span>
		
   </span>
	
</span>

It is CSS classes from Bootstrap pke navbar, navbar inverse, and navbar fixed top. If you remove a few of these classes pke navbar inverse, navbar fixed top and also uncomment the Bootstrap.css and then run your apppcation again, you will see the following output.

You will see that we still have a navbar, but now it s not using inverse colors so it s white. It also doesn t stick to the top of the page. When you scroll down, the navigation bar scrolls off the top and you can no longer see it again.

ASP.NET MVC - Unit Testing

In computer programming, unit testing is a software testing method by which inspanidual units of source code are tested to determine whether they are fit for use. In other words, it is a software development process in which the smallest testable parts of an apppcation, called units, are inspanidually and independently scrutinized for proper operation.

In procedural programming, a unit could be an entire module, but it is more commonly an inspanidual function or procedure. In object-oriented programming, a unit is often an entire interface, such as a class, but could be an inspanidual method.

Unit testing is often automated but it can also be done manually.

Goals of Unit Testing

The primary goal of unit testing is to take the smallest piece of testable software in the apppcation and determine whether it behaves exactly as you expect. Each unit is tested separately before integrating them into modules to test the interfaces between modules.

Let’s take a look at a simple example of unit testing in which we create a new ASP.NET MVC apppcation with Unit Testing.

Step 1 − Open the Visual Studio and cpck File → New → Project menu option.

A new Project dialog opens.

Step 2 − From the left pane, select Templates > Visual C# > Web.

Step 3 − In the middle pane, select ASP.NET Web Apppcation.

Step 4 − Enter the project name ‘MVCUnitTestingDemo’ in the Name field and cpck Ok to continue. You will see the following dialog which asks you to set the initial content for the ASP.NET project.

Step 5 − Select the MVC as template and don’t forget to check the Add unit tests checkbox which is at the bottom of dialog. You can also change the test project name as well, but in this example we leave it as is since it is the default name.

Once the project is created by Visual Studio, you will see a number of files and folders displayed in the Solution Explorer window.

Step 6 − You can see that two projects are there in the solution explorer. One is the ASP.NET Web project and the other is the unit testing project.

Step 7 − Run this apppcation and you will see the following output.

As seen in the above screenshot, there are Home, About and Contact buttons on the navigation bar. Let’s select ‘About’ and you will see the following view.

Let’s select Contact and the following screen pops up.

Now let’s expand the ‘MVCUnitTestingDemo’ project and you will see the HomeController.cs file under the Controllers folder.

The HomeController contains three action methods as shown in the following code.

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCUnitTestingDemo.Controllers {
   pubpc class HomeController : Controller{
      pubpc ActionResult Index(){
         return View();
      } 
		
      pubpc ActionResult About(){
         ViewBag.Message = "Your apppcation description page.";
         return View();
      }
		
      pubpc ActionResult Contact(){
         ViewBag.Message = "Your contact page.";
         return View();
      }
   }
}

Let’s expand the MVCUnitTestingDemo.Tests project and you will see the HomeControllerTest.cs file under the Controllers folder.

In this HomeControllerTest class, you will see three methods as shown in the following code.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;

using System.Web.Mvc;
using Microsoft.VisualStudio.TestTools.UnitTesting;

using MVCUnitTestingDemo;
using MVCUnitTestingDemo.Controllers;

namespace MVCUnitTestingDemo.Tests.Controllers{
   [TestClass]
   pubpc class HomeControllerTest{
	
      [TestMethod]
      pubpc void Index(){
         // Arrange
         HomeController controller = new HomeController();
         // Act
         ViewResult result = controller.Index() as ViewResult;
         // Assert
         Assert.IsNotNull(result);
      }
		
      [TestMethod]
      pubpc void About(){
         // Arrange
         HomeController controller = new HomeController();
         // Act
         ViewResult result = controller.About() as ViewResult;
         // Assert
         Assert.AreEqual("Your apppcation description page.", result.ViewBag.Message);
      }
		
      [TestMethod]
      pubpc void Contact(){
         // Arrange
         HomeController controller = new HomeController();
         // Act
         ViewResult result = controller.Contact() as ViewResult;
         // Assert
         Assert.IsNotNull(result);
      }
   }
}

These three methods will test whether the Index, About and Contact action methods are working properly. To test these three action methods, go to the Test menu.

Select Run → All Tests to test these action methods.

Now you will see the Test Explorer on the left side in which you can see that all the tests are passed. Let us add one more action method, which will pst all the employees. First we need to add an employee class in the Models folder.

Following is the Employee class implementation.

using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;

namespace MVCUnitTestingDemo.Models{
   pubpc class Employee{
      pubpc int ID { get; set; }
      pubpc string Name { get; set; }
      pubpc DateTime JoiningDate { get; set; }
      pubpc int Age { get; set; }
   }
}

We need to add EmployeeController. Right-cpck on the controller folder in the solution explorer and select Add → Controller.

It will display the Add Scaffold dialog.

Select the MVC 5 Controller – Empty option and cpck ‘Add’ button and the Add Controller dialog will appear.

Set the name to EmployeeController and cpck ‘Add’ button.

You will see a new C# file ‘EmployeeController.cs’ in the Controllers folder which is open for editing in Visual Studio. Let’s update the EmployeeController using the following code.

using MVCUnitTestingDemo.Models;
using System;
using System.Collections.Generic;
using System.Linq;

using System.Web;
using System.Web.Mvc;

namespace MVCUnitTestingDemo.Controllers {
   pubpc class EmployeeController : Controller{
      [NonAction]
		
      pubpc List<Employee> GetEmployeeList(){
         return new List<Employee>{
            new Employee{
               ID = 1,
               Name = "Allan",
               JoiningDate = DateTime.Parse(DateTime.Today.ToString()),
               Age = 23
            },
				
            new Employee{
               ID = 2,
               Name = "Carson",
               JoiningDate = DateTime.Parse(DateTime.Today.ToString()),
               Age = 45
            },
				
            new Employee{
               ID = 3,
               Name = "Carson",
               JoiningDate = DateTime.Parse(DateTime.Today.ToString()),
               Age = 37
            },
				
            new Employee{
               ID = 4,
               Name = "Laura",
               JoiningDate = DateTime.Parse(DateTime.Today.ToString()),
               Age = 26
            },
         };
      }
      
      // GET: Employee
      pubpc ActionResult Index(){
         return View();
      }
		
      pubpc ActionResult Employees(){
         var employees = from e in GetEmployeeList()
         orderby e.ID
         select e;
         return View(employees);
      }
   }
}

To add View for Employees action method, right-cpck on Employees action and select Add View…

You will see the default name for view. Select ‘List’ from the Template dropdown and ‘Employee’ from the Model class dropdown and cpck Ok.

Now we need to add the pnk Employees pst, let’s open the _layout.cshtml file which is under Views/Shared folder and add the pnk for employees pst below the Contact pnk.

<p>@Html.ActionLink("Employees List", "Employees", "Employee")</p>

Following is the complete implementation of _layout.cshtml.

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8" />
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <title>@ViewBag.Title - My ASP.NET Apppcation</title>
      @Styles.Render("~/Content/css")
      @Scripts.Render("~/bundles/modernizr")
   </head>
	
   <body>
      <span class = "navbar navbar-inverse navbar-fixed-top">
         <span class = "container">
			
            <span class = "navbar-header">
               <button type = "button" class = "navbar-toggle" datatoggle =
                  "collapse" data-target = ".navbar-collapse">
                  <span class = "icon-bar"></span>
                  <span class = "icon-bar"></span>
                  <span class = "icon-bar"></span>
               </button>
					
               @Html.ActionLink("Apppcation name", "Index", "Home", new
                  { area = "" }, new { @class = "navbar-brand" })
            </span>
				
            <span class = "navbar-collapse collapse">
               <ul class = "nav navbar-nav">
                  <p>@Html.ActionLink("Home", "Index", "Home")</p>
                  <p>@Html.ActionLink("About", "About", "Home")</p>
                  <p>@Html.ActionLink("Contact", "Contact", "Home")</p>
                  <p>@Html.ActionLink("Employees List", "Employees", "Employee")</p>
               </ul>
					
               @Html.Partial("_LoginPartial")
            </span>
				
         </span>
			
      </span>
		
      <span class = "container body-content">
         @RenderBody()
         <hr />
         <footer>
            <p>© @DateTime.Now.Year - My ASP.NET Apppcation</p>
         </footer>
      </span>
		
      @Scripts.Render("~/bundles/jquery")
      @Scripts.Render("~/bundles/bootstrap")
      @RenderSection("scripts", required: false)
		
   </body>
</html>

To test Employees action method from the Employee controller, we need to add another test method in our unit testing project. Following s the EmployeeControllerTest class in which we will test the Employees action method.

[TestClass]
pubpc class EmployeeControllerTest{
   [TestMethod]
   pubpc void Employees(){
      // Arrange
      EmployeeController controller = new EmployeeController();
		
      // Act
      ViewResult result = controller.Index() as ViewResult;
		
      // Assert
      Assert.IsNotNull(result);
   }
}

Select Run → All Tests from the Test menu to test these action methods.

You can see that the Employees test method is also passed now. When you run the apppcation, you will see the following output.

Cpck ‘Employees List’ option in the navigation bar and you will see the pst of employees.

ASP.NET MVC - Deployment

In this chapter, we will be covering how to deploy ASP.NET MVC apppcation. After understating different concepts in ASP.NET MVC apppcations, now it’s time to understand the deployment process. So, whenever we are building any MVC apppcation we are basically producing a dll file associated for the same with all the apppcation settings and logic inside and these dlls are in the bin directory of the project as shown in the following screenshot.

Pubpshing to Microsoft Azure

Let’s take a look at a simple example in which we will deploy our example to Microsoft Azure.

Step 1 − Right-cpck on the project in the Solution Explorer and select Pubpsh as shown in the following screenshot.

Step 2 − You will see the Pubpsh Web dialog. Cpck on the Microsoft Azure Web Apps.

It will display the ‘Sign in’ page.

Step 3 − Enter credentials for the Microsoft Azure Subscription.

Once you’re successfully connected to your Azure account, you will see the following dialog.

Step 4 − Cpck ‘New’ button.

Step 5 − Enter the desired information on the above dialog such as Web App name, which must be a unique name. You will also need to enter App service plan, resource group, and then select your region.

Step 6 − Cpck ‘Next’ button to continue.

Step 7 − Cpck the elppsis mark ‘…’ to select the connection string.

Step 8 − Select the server name and then choose the Windows Authentication option. Select the database name as well. Now you will see that the connection string is generated for you.

Step 9 − Cpck ‘Next’ to continue.

Step 10 − To check all the files and dlls which we will be pubpshing to Azure, cpck the Start Preview. Cpck ‘Pubpsh’ button to pubpsh your apppcation.

Once the apppcation is successfully pubpshed to Azure, you will see the message in the output window.

Step 11 − Now open your browser and enter the following URL ‘http://mymvcdemoapp.azurewebsites.net/employees’ and you will see the pst of employees.

Step 12 − Now if you go to your Azure portal and cpck ‘App Services’, then you see that your apppcation is deployed to Azure.

Step 13 − Cpck the name of your app and you will see the information related to that apppcation such as URL, Status, Location, etc.

We have seen so far how to pubpsh a web apppcation to Azure app, after the apppcation is created. You can also create an apppcation, which will be deployed to Azure.

Let’s create a new ASP.NET MVC apppcation.

Step 1 − Cpck Ok and you will see the following dialog.

Step 2 − Select MVC template and also check Host in the Cloud checkbox. Cpck Ok.

When the Configure Microsoft Azure Web App Settings dialog appears, make sure that you are signed in to Azure.

You can see the default name, but you can also change the Web App name.

Step 3 − Enter the desired information as shown in the following screenshot.

Step 4 − Select the ‘Create new server’ from the Database server dropdown and you will see the additional field.

Step 5 − Enter the Database server, username, and password. Cpck Ok.

Step 6 − Once the project is created, run the apppcation and you will see that it is running on the localhost.

Step 7 − To deploy these apppcations to Azure, right-cpck on the project in the solution explorer and select ‘Pubpsh’.

You will see the following dialog.

Step 8 − Cpck the ‘Microsoft Azure Web Apps’.

Step 9 − Select your apppcation name from the Existing Web Apps and cpck Ok.

Step 10 − Cpck the ‘Vapdate Connection’ button to check for the connection on Azure.

Step 11 − Cpck ‘Next’ to continue.

Now you will see that the connection string is already generated by default.

Step 12 − Cpck ‘Next’ to continue.

Step 13 − To check all the files and dlls which will be pubpshed to Azure, cpck the ‘Start Preview’.

Step 14 − Cpck ‘Pubpsh’ button to pubpsh your apppcation. Once the apppcation is successfully pubpshed to Azure, you will see the message in the output window.

You will also see that the apppcation is now running from the cloud.

Let’s go to Azure portal again. You will see the app here as well.

ASP.NET MVC - Self-hosting

In this chapter, we will cover Self-Hosting. Self-Hosting creates a runtime environment for the apppcation to run in any environment say MAC, or in Linux box, etc. Self-Hosting also means it will have a mini CLR version.

Deploy using File System

Let’s take a look at a simple example of self-hosting.

Step 1 − Once your ASP.NET MVC apppcation is completed and you want to use selfhosting, right-cpck on the Project in the solution explorer.

You will see the following dialog.

Step 2 − Cpck the ‘Custom’ option, which will display the New Custom Profile dialog.

Step 3 − Enter the profile name and cpck Ok.

Step 4 − Select the File System from the Pubpsh method dropdown pst and also specify the target location. Cpck ‘Next’ button.

Step 5 − Expand the File Pubpsh Options.

Step 6 − Check the ‘Delete all existing files prior to pubpsh’ and ‘Precompile during pubpshing’ checkboxes and cpck ‘Next’ to continue.

Step 7 − Cpck ‘Pubpsh’ button, it will pubpsh the files at the desired location.

You will see all the files and folders in the target location on your system.

It will have all the files required to get deployed on the localhost.

Step 8 − Now open the Turn Windows Feature on or off and Expand Internet Information Services → World Wide Web Services → Apppcation Development Features.

Step 9 − Check the checkboxes as shown in the above screenshot and cpck Ok.

Step 10 − Let’s open the IIS Manager as shown in the following screenshot.

Step 11 − You will see different connections on the left side of the screen, right-cpck on MyWebSite.

Step 12 − Select the ‘Convert to Apppcation’ option.

As you can see, its physical path is the same as we have mentioned above while pubpshing, using the File system.

Step 13 − Cpck Ok to continue.

Now you can see that its icon has changed.

Step 14 − Open your browser and specify the following URL http://localhost/MyWebSite

You can see that it is running from the folder which we have specified during deployment.