How to create a simple website in ASP.NET MVC
Part six of a seven-part series of blogs

This blog explains the steps you'll need to follow to create a simple one page website in ASP.NET MVC. The aim of the blog is not to act as a tutorial, but to help people choose between ASP.NET MVC and classic ASP.NET.

  1. An overview of creating a website in ASP.NET MVC
  2. Creating an ASP.NET MVC website
  3. Creating an entity model in MVC
  4. Creating a view model
  5. Ensuring MVC shows the right page - router and controller
  6. Creating our view (this blog)
  7. Conclusion

Posted by Andy Brown on 16 June 2014

You need a minimum screen resolution of about 700 pixels width to see our blogs. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.

Creating our view

The final step of the process is to create the view called Index that the Film controller's Index action is trying to return.

Adding the view

First choose to add a new folder within the Views folder of the project:

The new view folder

It matters very much that this folder should have the same name as the controller - MVC uses lots of default naming conventions.


Right-click on this folder and choose to add a view:

Adding a view

Choose to add a view as shown above.

Choose to call your view Index, and tick appropriate boxes (as explained below):

Add view dialog box

Here we've chosen to use the default Razor language for our view.

The options chosen above mean that we'll get a view where:

  • You can combine C# and HTML using syntax called Razor (you'd be mad not to use this default MVC syntax);
  • You will have to tell the view which class (or model) it's based on - this won't be pre-selected by default; and
  • You're not using master pages (so this page will stand in isolation).

Now that you have a view, you can edit it!

Editing your view (overview)

Here's the view I created:

The HTML view

The view says what model it will be using, and then uses a combination of HTML and C# code to display the results of the model.

Let's now look at this bit by bit!

Editing the view (details)

The first thing that the view does is to say which model it's using:

The view model

The view needs a vwFilm object to work.


The namespace will be the name of your application - I may have inadvertently switched mine from MvcApplication4 to MvcApplication3.

The next thing the view does is create some simple styles to make the table look better:

Table styles

Some basic styles for our table.


The view then lists the heading row for a table:

The table header row

A simple title and table heading row.


The view now loops over the films in the model, listing one row out for each:

Listing out films

Listing out the films in the database.

There are three remarkable things about this code!  Firstly, we've switched seamlessly between C# and HTML, and left it up to the Razor engine to (correctly) work out which is which:

HTML and C#

One line of C#, then one of HTML!


The second remarkable thing is that once you've told the view to use vwFilm as it's model (ie as the class upon which it's based), you have access to all of that class's properties and methods automatically:

Model properties

You can use any of the model's properties (here we've only added one, the Films).


The third remarkable thing is that we can use something called a lambda function to display each row's columns:

Lambda function

The selected text displays the name of each film.

All that remains now is to sum up what we've found!

This blog has 0 threads Add post