A Practical Example of ASP.NET MVC

I will display my movie list here!

Build and run the application to see what we actually did.

So what we did is put a secondary heading in our template, along with some text to display on our Index page. Also if you notice the title in the browser window, you will notice that it changed from “- MovieArena” to “Movie List – Movie Arena”. We did this by setting the ViewBag. Title property which we can see is being put in the _Layout.cshtml template in the <title> tag.

This property is then replaced with the value that we assign from within our Index.cshtml view as below. Then ASP.NET MVC merges them and renders the UI back to the browser to display.
@{
ViewBag.Title = "Movie List";
}

With this ViewBag approach, you can easily manage any number of parameters between your view template and your layout file.

Now we have our controller to handle business logic and return a view template, and our view. So now we will need a Model to interact with our movies database and get us the list of movies, and perform insert, update and delete operations as well.

Before we go to our database and work on our model, though, let’s first talk about passing information from the controller to a view. Controller classes are invoked in response to an incoming URL request. A controller class is where you write the code that handles the incoming browser requests, retrieves data from a database, and ultimately decides what type of response to send back to the browser. View templates can then be used from a controller to generate and format an HTML response to the browser. Controllers are responsible for providing whatever data or objects are required in order for a view template to render a response to the browser. One good practice is that a view template should never perform business logic or interact with a database directly. So a view should only be working with the data provided by the controller. This division helps keep your code clean, testable and easily maintainable.

You can put parameters in the controller methods that can be passed to the view being returned. These parameters are passed through the URL, i.e. using query string to the controller when it requests for a page. This is achieved by assigning these values to the ViewBag object properties that you can then use in your view template.

Add the following method to MoviesController.cs right under the Index method:

//
// GET: /Movies/Details/5
public ActionResult Details(int ID = -1)
{    
ViewBag.MovieID = ID;

return View();
}

As you can see, we have put a parameter in the method that we are then passing to the ViewBag object so that the returned View can use it.

Now we need a new view template to map to the method we just added in our Movies controller.

As before, Right click the ViewsMovies folder and click Add, then click MVC 5 View Page with (Layout Razor).

Name it “Details” and Click OK.In the Select a Layout Page box, accept the default _Layout.cshtml and click OK.

You will now see a Details.cshtml in the ViewsMovies folder that we just created. It will be opened in the IDE

Replace all the code with the following code in the Details.cshtml file.

@{    
ViewBag.Title = "Movie Details";
}

There is a request to show details for the Movie ID : @ViewBag.MovieID !

Now we have a method to invoke in the controller that can take a parameter (in our case a movie ID), assign it to the ViewBag.MovieID property we created and return the required view. In the Details.cshtml, for now I have just put a message to display the parameter value that has been passed and changed the secondary header and the title of that page.

Build and run your application. You will be taken to the MoviesIndex page by default as we have defined the route there. To check the Details page out navigate manually to the following URL.

http://localhost:xxxx/Movies/Details?id=4

You now see our details page, which takes the ID parameter through the query string and sends it to the controller, which, on the basis of the request, invokes the appropriate method and returns the required view. Our details view shows us a message displaying what we passed through the parameter using query string.

Now let’s move toward our model and database. We will be using a .NET framework data access technology that we know as Entity Framework to work with our model classes. Entity Framework (EF) has a development paradigm support called Code-First. Code-First allows you to create your model classes using ordinary classes. Also known as POCO (plain old CLR object) classes, these help you create the database on the fly from your defined classes, which enables a very clean and rapid development workflow. There is also a database first approach, which I will be using as we already have a MovieArenaDB that we created in my last blog on ASP.NET Web Forms. Please visit my last blog on ASP.NET Web Forms to help create the database again if you don’t have it. Below is the link to my blog.

We will use the database first approach that will actually use our existing database and create our model classes or entities from it.

Before I go ahead, I want you to know that I have EF in my list of blogs in this series and will be explaining it in detail. For now, just to keep it short, I will just go through the setup process of Model using the EF database first approach.

Open the Server Explorer pane in Visual Studio by clicking the View menu and clicking Server Explorer.

Let’s add our connection to the already set up database in our SQL Server 2012. In the Server Explorer pane, right-click the Data Connections and click Add Connection. Select Microsoft SQL Server from the list in the next dialogue box and click OK.

In the next dialogue box, enter your server name, select the type of authentication you use and enter the credentials if SQL Server Authentication is selected. Then select the database from the server that is listed automatically if all the connection information is correct. In our case we will select the “MovieArenaDB”.

Now that we have our connection setup, lets create our EF model classes from the database tables. These model classes are known commonly as entities that will be interacting with our data in the database. Each model represents a table in the database and contains properties that relate to the columns within.

Right-click the Models folder, select Add and then New Item.

In the Add New Item window, select Data in the left pane and ADO.NET Entity Data Model from the options in the center pane. Name the new model file “MovieArenaModel.edmx”.

In the Entity Data Model wizard that opens up next, select Generate from database and click Next.

In the next wizard pane, select the connection that we just created in our Server Explorer panel from the dropdown. Select if you want to add the password in your connection string or not. Check the “Save entity connection settings in Web.Config as” box and set the name of it to “ModelArenaDBEntities”. Click Next.

In the next wizard pane, select the database objects you want to add in your mode,l i.e. Tables, View and Stored Procedures & Functions. Set the Model Namespace to “MovieArenaDBModel” and then click Finish.

Now let Visual Studio do its thing and you will see that it added a MovieArenaModel.edmx in our Models folder and also opened the design view of this .edmx file. If you expand the edmx file in our Models folder, you will notice that it contains some files. I will be explaining more on what these files are in my EF blog in the future but for now the file I want you to expand and look at in the MovieArenaModel.Context.tt is the MovieArenaModel.Context.cs file. This file contains a class that derives from the DbContext class, and provides a property for each model class that corresponds to a database table. You will see that it contains the class Movie (Entity) representing our main Movies table that it got from the database and what we will mainly be using. Each instance that we create of this Movie class will represent a single row in the Movies table.

You should build your project, because moving on without building will result in error.

Now that we have our Model setup, let’s use it by creating a new controller so that we can pass the data from the database using the model to our view templates in the ViewsMovies folder.

First we will need to delete our already created MoviesController.cs file as well as the ViewsMovies folder. We need to do this so that we can create a new controller with the same name, but this time it will be set up using the EF model.

Note that I could add all the files and do all the settings in the current MoviesController.cs file and the View files for the Movies to make it use the EF model, but that will make this blog a lot lengthier and I really want to show you the power of Visual Studio IDE as well as templates cause they shrink that time to almost one fourth the time taken in a manual setup.

Right-click the MoviesController.cs file and click Delete. Do the same with the ViewsMovies Folder. Now Right-click the Controllers Folder, click Add and then Controller.

In the dialogue box, click MVC 5 Controller with views, using Entity Framework, and then click Add.

In the next window, For the Controller name enter MoviesController.

Select Movie (MovieArenaMVC.Models) for the Model class.

Select MovieArenaDBEntities (MovieArenaMVC.Models) for the Data context class.

Click Add.

Visual Studio creates the following files and folders:

• A MoviesController.cs file in the Controllers folder.

• A ViewsMovies folder.

• Create.cshtml, Delete.cshtml, Details.cshtml, Edit.cshtml, and Index.cshtml in the new ViewsMovies folder.

As you can see, Visual Studio automatically created your Movie CRUD (create, read, update and delete) action methods in the MoviesController.cs file and also created all their related views in the ViewsMovies Folder. This automation of creation of CRUD view files and action methods is known as scaffolding.

An important aspect to look at in our .cshtml files is that all of them have a “@model” at the top. This actually explicitly tells the view what type of object it should expect. The object is basically passed from the MoviesController to the view so that it can access the data it requires to display. These views, which include the “@model” at the top, are known as Strongly-Typed Views and are the preferred and secure way data from the model should be passed to the view through the controller.

Also in the controller MoviesController.cs, you will notice [HttpPost] on specific methods. All the methods that create, edit, delete, or otherwise modify data need to use this attribute for security purposes. There is also a [HttpGet] attribute, but that is implicitly assigned to the specific methods that only retrieve data like our Index and Details methods. In our case, all the [HttpGet] methods follow a similar pattern. They get a movie object (or list of objects, in the case of Index), and pass the model to the view. Modifying data in a [HttpGet] method is a security risk, so don’t do it.

So now you have a web application that allows you to create, list, edit and delete movies.

Before we run the application, we need to update our title and secondary title heading for each of the view files we created like before. We do this because these files, i.e. the .cshtml files in the ViewsMovies folder, were created from scratch and have the default template values in them.

Now let’s build and run our web application and see MovieArena in action.

By the looks of it we have successfully creatd our web application that lets us add, edit, list and delete movies, but I would like to do some changes that will help make this web application more user-friendly.

First: Let’s change the ViewBag.Title = “xxxxxx” and the <h2> tag text and also remove the extra heading tag of <h4>Movie</h4> to fit the design according to our needs as follows.

Index.cshtml = “Latest Movies”Details.cshtml = “Movie Details”Create.cshtml = “Add Movie“Edit.cshtml = “Edit Movie“Delete.cshtml = “Delete Movie“

Second: Remove the <h4>Movie</h4> line from all of the above pages you find it in.

Third: I updated the following line in the Index.cshtml file.

@Html.ActionLink(“Create New”, “Create”)
To
@Html.ActionLink(“Add New Movie”, “Create”)

With that done, let’s format our data’s display to make its meaning more clear to the user.

Let’s format some labels and data format in our pages.

Now if you look at the list of movies, we see that the header of our third column, the ReleaseDate, is showing without a space in between the 2 words. So I am going to change it so that it displays in a correct manner. For this we will be using DataAnnotations (I will be explaining more on this in my EF blog) in our Model Movie class or entity. In short, DataAnnotations are attributed classes that are used to define metadata for ASP.NET MVC and ASP.NET data controls.

Open the Movie.cs file, which you will find if you expand the ModelsMovieArenaModel.edmx -> then expand the file MovieArenaModel.tt.

To apply formatting on our ReleaseDate property’s display label, first we will add a reference to the DataAnnotations namespace. Add “using System.ComponentModel.DataAnnotations;” at the top of the Movie.cs file with the other “using” statements. Next add the following DataAnnotation attribute classes right above the ReleaseDate property defined in the class.

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

public partial class Movie

{

public int Id { get; set;}

public string Name { get; set; }
public string Director { get; set; }
[Display(Name = “Release Date”)]
[DisplayFormat(DataFormatString = “{0:yyyy-MM-dd}”, ApplyFormatInEditMode = true)]
public Nullable ReleaseDate { get; set; }
}

I added two attributes to the ReleaseDate property in my Movie class. One is named Display and the other is DisplayFormat. Display() in our case sets the property name to be displayed where used and DisplayFormat() handles how the value of that property should be displayed when used. To see the changes, let’s build our web app and look at the List of Movies.

Now you see that our ReleaseDate column header label as well as the date values displayed in that column for each movie has changed to what we defined in our Model Movie class using DataAnnotations attribute classes. Also, these will affect all areas where our Model Movie class is used to display data, i.e. in our Create, Edit and Delete view files as well.

Now we have our web application all set up to list the latest movies, giving us the option to add, edit and delete them as well. We will look briefly at the new authentication system ASP.NET Identity. ASP.NET Identity in a new improved version of the old Membership and Role based security feature. It was developed to support One ASP.NET, which includes all ASP.NET technologies like MVC, Web Forms and Web API, etc. This cross technology support and many other benefits have really offered a simple yet secure way of handling authentication in your web applications.

I will skip over the details and show you how to apply authentication to our web app.

First we need to set the DefaultConnection connection string in our app’s Web.Config file. Open the Web.Config file, and you will see two connection strings in it. One is named DefaultConnection and the other is the MovieArenaDBEntities that was created earlier when we added our model. Go ahead and change the value of the DefaultConnection so that can connect to our MovieArenaDB.

As we saw before when creating our MVC project, Visual Studio 2013 used the bootstrap templates, which added an authentication related controller, model and views automatically and gave us everything that is needed to implement this new ASP.NET Identity authentication. With a few changes in settings, this authentication method also allows us to use external authentication systems (Like Google, Facebook, Twitter, etc.) to easily integrate our app with. Cool, Isn’t it? Now after you have updated the connection string, we just need to update our ControllersAccountController.cs file and replace all “Home” text in the RedirectToAction methods to target our “Movies” Index Page. So replace “Home” with “Movies” in that file and save it.

Now build the application and run it, then click the Register link on the top right navigation area that will take you to the Register view. Fill out Username, Password and Confirm Password and hit Register.

Now right after you clicked Register, you will be taken back to the Movies listings or our Index view in Movies, as we set it in the AccountController class. Also you will notice that you have now logged in with the user credentials that you just registered.

If you notice your database, then you will see a few new tables added with the prefix “ASPNET.” These tables were created using EF’s code-first approach. Visual Studio automatically added all the code and models needed for this process when we created the app with Individual Authentication settings.

Now only one issue remains before we can finish our authentication in this app. The problem is that if you logoff from the account you just created and authenticated with, you will still be able to create, edit and delete a movie record, which we don’t want an unauthorized user to do. Let’s apply our authentication to these methods. For this, we will need to add a [Authorize] attribute to each of these action methods in the MoviesController.cs file. So go ahead and put that attribute on all methods in the MoviesController.cs file except the Index and Details methods.Now if you build and run your application and try to click Add New Movie or click Edit or Delete then you will be taken to the login page if you are not yet logged in. If you are logged in, then you will be able to do all of these operations. Also note that the Index page and the Details page will show data whether you are logged in or not and that is because we did not specify the [Authorize] attribute to their respective methods in the controller.Lastly, let’s hide the links that should not be displayed if the user is not authenticated. To do this, just add all @Html.ActionLink code lines within an @if code block with the following condition.@if (Request.IsAuthenticated)   {       @Html.ActionLink("Add New Movie", "Create")   }After you are done with the above change, build and run your application.You now have successfully created an ASP.NET MVC Application portal that displays the latest Movies and gives an authenticated user the ability to add, edit and delete a movie.