ASP.NET MVC 5 contains a number of improvements over previous versions, including some new features, improved user experiences; native support for JavaScript libraries to build multi-platform CSS and HTML5 enabled sites and better tooling support.
In this article, we will be taking an overview of some of the exciting new fundamental features of MVC 5:
- Scaffolding
- ASP.NET Identity
- One ASP.NET
- Bootstrap
- Attribute Routing
- Filter Overrides
Scaffolding
Visual Studio 2013 includes a new Scaffolding Framework for ASP.NET MVC 5 and the ASP.NET Web API 2. Simply put, Scaffolding is a code generation framework provided for ASP.NET Web Applications. Using this framework, you can quickly generate code that interacts with your data models. This feature reduces the amount of time required to build MVC application with standard data operations. Scaffolding uses code-first approach for data operations.Note: Visual Studio 2013 does not currently support generating pages for an ASP.NET Web Forms project. The only way out is to add MVC dependencies to your Web Forms project and then use Scaffolding.
Let’s quickly explore Scaffolding in ASP.NET MVC 5.
Step 1: Open VS 2013 and create an ASP.NET MVC application with the name MVC5_Scaffolding. In the model folder, add a new class file with the name Product.cs and add the following class definition in it:
using System.ComponentModel.DataAnnotations;
namespace MVC5_Scaffolding.Models
{
public class Product
{
[Key]
public int Id { get; set; }
public string ProdName { get; set; }
public int ProdPrice { get; set; }
}
}
Note that the class Product defines an Id property with the Key attribute representing a unique identification of the Product entity.
Step 2: In the project, right-click and select Add > New Scaffolded item as shown here:
A window for Add Scaffold will be displayed
Select the scaffold for MVC 5 Controller with views, using Entity Framework as shown in the screenshot. After clicking the Add button, you should see a window similar to the following:
Select the model class from the dropdown. Now to generate the Data Context, click on ‘New Data Context’. A window is displayed where the context class name needs to be entered:
Click on Add and the control will go back to the Add Controller window where you have to check the Generate Views checkbox as shown here:
This step will add the ProductController, ProductContext classes and Product folder in Views folder with views for data operations:
This step will also add a connection string of the name ProductContext in the web.config file. The code for the Product context class will be as shown here:
public class ProductContext : DbContext
{
public ProductContext()
: base("name=ProductContext")
{
}
public System.Data.Entity.DbSet Products { get; set; }
}
The context class uses Code-First approach and creates a table of the name Product using DbSet object of the EntityFramework. The Product Controller class interacts with the ProductContext class for performing CRUD operations using the views generated. Hence Scaffolding reduces the time for developing MVC data oriented applications.
ASP.NET Identity
In earlier days of ASP.NET 2.0 programming, a membership provider approach was introduced. This allowed the application to store user’s data in a SQL Server database. This membership model has changed over the years. The notion that a user can log-in by only using a user-name and password registered in the application, can now be ignored. In today’s world, the web has become more social and users connect to each other, and with applications, using social sites like Facebook, Twitter etc. So considering these social integrations, web applications too need to be enhanced to allow users to log-in using their social media credentials.To get this done, the modern membership framework is now extended to integrate with social credentials and for this purpose, ASP.NET Identity has been introduced. The advantages of the ASP.NET Identity are explained here:
- One ASP.NET Identity System: Can be used across all the ASP.NET Frameworks like WebForms, MVC, Web Pages, Web API, SignalR etc.
- Ease of plugging-in profile data about the user: The user’s profile schema information can be integrated with the web application.
- Persistence Control: ASP.NET Identity system stores all user information in the database.
- Social Login Provider: Social log-in providers such as Microsoft Account, Facebook, Twitter, Google, and others can be easily added to the web application.
- Windows Azure Active Directory (WAAD): The Login-in information from WAAD can also be used for authenticating a web application.
- OWIN Integration: ASP.NET Identity is fully compliant with OWIN Framework. OWIN Authentication can be used for login. If you are new to OWIN, read this article.
All these features in the ASP.NET Identity membership system are available if you are using Visual Studio 2013. Alternatively, you can also obtain it via NuGet packages Microsoft.Aspnet.Identity.Core and Microsoft.Aspnet.Identity.EntityFramework.
One ASP.NET
One ASP.NET is a new unified project system for .NET Web Developers. This system makes it easier to work with multiple frameworks like Web Forms, MVC, Web API etc., in a single project. So essentially using the One ASP.NET project system, you can use ASP.NET Web Forms and MVC together, and can easily add ASP.NET Web API and SignalR too; in the same Web application.In Visual Studio 2013, the ASP.NET MVC project template integrates with this new system. One of the useful features while creating a MVC project is that the authentication mechanism can be configured.
Step 1: Open VS 2013 and select File > New > Project, select Web from installed template as below:
Step 2: Make sure that .NET Framework 4.5.1 is selected; click OK and the following window comes up
As you can see, a New ASP.NET Project window displays various Web Templates, and based upon the selection of template, the necessary references will get added in the project. Checkboxes indicates the necessary folder structure and core references for the project.
Step 3: Click on Change Authentication and the authentication provider windows will be displayed:
There are four different authentication types that can be set for the application:
1. No Authentication: The application does not require authentication.
2. Individual User Accounts: SQL Server database is used to store user profile information. This authentication can also be extended to provide the end-user with the option to make use of their social profiles like Facebook, Google, Microsoft, Twitter or any other customized provider.
3. Organizational Accounts: The application can authenticate users using the user profiles stored in Active Directory, Windows Azure Active Directory, or Office 365. This provides Single Sign-on access level to the application. The Organizational Accounts require the following details:
Here the application can be configured for:
- Cloud-Single Organization
- Cloud-Multi Organization – This and the previous one can be used when the user authentication information is stored on the Windows Azure Activity Directory (WAAD)
- On-Premises - Used for the Active Directory on-premises.
- Domain - The WAAD domain for setting application in it.
- Access Level - The application needs to query or update directory information.
- Application ID URI - Created by appending the project name to the domain.
Enough theory, let’s see an example!
Using Google Authentication for MVC 5 Application
Let’s design an ASP.NET MVC 5 application which will enable users to log in using an external authentication provider like Google.Step 1: Open Visual Studio 2013 and create a MVC application. Select Individual User Accounts from the change authentication window as shown here:
Step 2: To enable Google Open ID provider, open the Startup.Auth.cs file from App_Start folder. From the ConfigureAuth method of Startup class, uncomment the GoogleAuthentication method call as shown here:
public void ConfigureAuth(IAppBuilder app)
{
// Enable the application to use a cookie to store information for the signed in user
app.UseCookieAuthentication(new CookieAuthenticationOptions
{
AuthenticationType = DefaultAuthenticationTypes.ApplicationCookie,
LoginPath = new PathString("/Account/Login")
});
// Use a cookie to temporarily store information about a user logging in with a third party login provider
app.UseExternalSignInCookie(DefaultAuthenticationTypes.ExternalCookie);
// Uncomment the following lines to enable logging in with third party login providers
app.UseGoogleAuthentication();}
Step 3: Run the application; from the Home menu, click on Log In. In the Login view, the Use another service to log in option will be displayed:
Google provider is now enabled for the application! Once the Google button is clicked, the Google Login page will be displayed where the credential information (Gmail ID/Password) needs to be entered. The URL on the Google login page contains openid2. This means that Google credentials will be used to login to the site. After entering the credential information, the web application will demand the following permissions:
- View your email address
- View basic information about your account.
Once the Accept button is clicked, the Register view will be displayed as shown below:
This step registers your Gmail credentials with the web site you just created. ASP.NET MVC 5 uses the code-first approach for creating database for storing user’s login information. Go to the App_Data folder, a database file of name aspnet-(your application name)-yyyymmdd.mdf will be generated. Open this file in the Server Explorer. In this database, the AspNetUserLogins table will be created. View data from this table and you will find the following information:
Likewise, other authentication providers like Facebook, Microsoft, Twitter can also be used!
I would strongly recommend you read the ASP.NET MVC 5 Authentication Filters article by Raj Aththanayake where he explores the new IAuthenticationFilter in ASP.NET MVC 5 and explains the CustomAuthentication attribute and how you can use to change the current principal and redirect un-authenticated user to a login page.
Bootstrap
In Visual Studio 2013, Twitter Bootstrap is added as the default user interface framework for an MVC application. Bootstrap is a free collection of HTML and CSS based design templates created at Twitter for designing forms, navigation, buttons, tables etc. Bootstrap can be downloaded from here. The advantage of Bootstrap is that it is used for rapid development of Responsive user interface using basic HTML and CSS based templates. In the MVC 5 project, bootstrap.js and bootstrap.css is already present:
In the MVC 5 project open _Layout.cshtml and you will find a
tag under the element as seen here:
Observe that the
tag is decorated with CSS classes like navbar, navbar-inverse, navbar-fixed-top. These classes are declared in the bootstrap.css and it means that the navigation bar showing Application name, Home, About and Contact is displayed on the top with fixed position, so even when the page is scrolled down; the Navigation bar will be fixed on the top as shown here: Navigation Bar at the beginning of the page:
After the page scrolls down, the Navigation bar location is still fixed to the top:
Attribute based Routing
The beauty of MVC is in its routing feature. Routing is how ASP.NET MVC matches a URL to an action. In earlier versions of MVC, the routing expressions were provided in the Global.asax class in Application_start event. (Note: In MVC 4, a separate class of name RouteConfig is provided in the App_Start folder.) The route expression set in MVC 4 is similar to the following:public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
In this code, the defaults are already set to Home controller and its Index action method. This means that when a new URI is requested through the browser addressbar, this expressions has to be re-generated for controller other than Home.
Why to use Attribute Routing?
In MVC 5, to have more control over the URIs of a Web application, we can implement the route definition along with the action methods in the controller class, using attributes. In other words, we use attributes to define routes. To enable attribute based routing, the RegisterRoutes method needs to be changed to the following:
public static void RegisterRoutes(RouteCollection routes)
{
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapMvcAttributeRoutes();
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
}
