Creating a simple Website and User Interface with MVC - Part 1

 Oct 12, 2015

In this series of forthcoming blogs, I will take you through the steps to create a simple website and user interface by using MVC 5 with bootstrap and additional JavaScript libraries. This is aimed towards people that have little experience with web development.

Now being a coder myself I am not particularly good at creating a user interface that can be considered “eye candy”, but I will do my best to create a decent one. I will make use of bootstrap to help me in creation of the UI.

So for this site I thought we might create a website that can act as an online resume. We will create this website using MVC (Model View Controller) within the Visual Studio IDE. There is a free edition of Visual Studio that is called the “Community Edition” that you can download from here) to get started.

Once you have downloaded and installed Visual Studio, we will start to create our site. To do this we will create a new project in Visual Studio.

Follow the numbered steps on the image below and then click OK.

1

Then we want to create an Empty (01) website, but using the MVC (02) platform and then finish off by clicking OK.

2

Once you have completed the wizard you now have an empty project (not even a Home page) that you will start with. From here our main interaction points will be the Controllers (containing our source code for implementation logic) and Views (containing markup for our User interface).

3

The first step for our application is to have a welcome page, this is the first page our users will see when they visit our website. To achieve this goal we need to add a controller that contains the logic to display the page.

Perform the following steps to get your first page up:

  1. Right click on the Controllers folder in the solution Explorer. (by default on your right)
  2. Hover over the Add option and click on Controller
  3. You should now see a window with a title of “Add scaffold”, make sure “MVC 5 Controller – Empty” is selected and click Add.
  4. 4
  5. Now specify the name of the controller, mine will be called “HomeController”. (It is good practice to leave the word controller as a suffix to the name.

5

Once you have added the controller you should now see a new file under the controllers folder and a new folder underneath the Views folder.

6

As you might notice the folder has the same name as the prefix to the controller, this can be seen as an indication that all the pages that are categorized to work with the home controller should go into this folder (at least for now).

After we have added our controller you can see the interface opens up with the corresponding code, in here we will see that we have an ActionResult already in place.

7

We will use this default ActionResult to call our view that we want to display, but at the moment there isn’t one so we need to create it. The easiest approach to create an empty view for the ActionResult to show is to perform the following steps:

  1. Right click on the ActionResult’s name (Index)
  2. Click on the “Add View…” option, this will open up an “Add View” window.

8

In this window you need to take note of a few things.

  • The name should be the same as the ActionResult’s name, as the system will implicitly look for a view with the same name. (unless specified otherwise)
  • We are using an empty template (Blank page)
  • Finally we want to use a Layout page; this will serve as a master page so it is easier to create the User Interface. When it is the first time you create a view it will automatically add a layout page for us.

After you click add, you should now be in the markup of the newly created View, but also notice that the following files were also added to our project.

  • Under content we have the bootstrap stylesheets and a custom stylesheet for the site.
  • Under views we now have a file under the Home folder called “Index.cshtml”
  • Under views we now have a folder called “Shared”, this is a folder that stores all the views being shared by our controllers
  • Under the “Shared” folder we have a file called “_Layout.cshtml”; this is the masterpage of our website.
  • Under the views we have a file called “_ViewStart.cshtml”; this specifies which layout page too use when the application starts.
  • Finally under scripts we have the bootstrap and JQuery scripts that are used for a responsive website.

9

After this we are now prepared to run our project and see our home page, which will be dull. Press F5 to run the project. Once your web browser opens up you can see that your URL matches the name of the Controller’s prefix and the name of your View.

10

This will conclude the first part of the blog and we will continue with this project in my next blog.

How do your Excel skills stack up?   

Test Now  

About the Author:

Auret Swanepoel  

As a recent addition to the New Horizons team, Auret is a highly skilled and qualified IT Technical trainer. He has been a Microsoft Certified Trainer (MCT) since 2008 and has since then, also become a Microsoft Certified Professional (MCP), a Microsoft Certified Technology Specialist (MCTS) and a Microsoft Certified Information Technology Professional (MCITP). With his international experience as a trainer in South Africa, Auret is able to adapt his teaching style to different audiences in the classroom and ensure that students are learning in a positive and collaborative environment.

Read full bio
top
Back to top