BLOGS BY TOPIC
BLOGS BY AUTHOR
BLOGS BY YEAR
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.
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:
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:
Choose to add a view as shown above.
Choose to call your view Index, and tick appropriate boxes (as explained below):
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 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 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:
Some basic styles for our table.
The view then lists the heading row for a table:
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 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:
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:
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:
The selected text displays the name of each film.
All that remains now is to sum up what we've found!