Creating your first MVC application

This example shows the creation of a basic MVC application and which components are included in a basic project.

Create a new project

We start by creating a new project. 

 

Select the ASPNet MVC4 Web Application. When you click Ok you get the following Dialog in which you can choose from a number of Templates. We will be choosing the Basic Template because this contains everything we need to start of with. We won't be creating Unit Tests in this example. 

When you click Ok you'll see the following Dialog which tell's us that our solution is being prepared based on the template we selected. 

 

The solution

Our solution and project where created containing the following: 

This is where we'll notice the Model, View, Controller pattern.

Models

The Models will be holding Domain Model class. The following class is an example of a Domain Model: 

public class Product {
      public int ProductID { get; set; }
      public string Name { get; set; }
      public string Description { get; set; }
      public decimal Price { get; set; }
      public string Category { set; get; }
}

We add the model by adding a new Item and select a class. The name of our class will be Product.cs.

We now have our first Domain Model. 

Controllers

Our next step is adding a controller to the controllers folder and by adding our first action. The Controllers folder will be holding the Controllers and the Actions which will be feeding the View. First we will create the controller an from there the corresponding view.

Right click the controllers folder and select Create Controller, we will be naming our controller the ProductController. We won't be using any Scaffolding.  

The controller is created and added to the solution, there is also in the controller the default Index action which we will be implementing. 

 We added the following code to the index action. What we're doing here is passing the Product model to our view. which means we will be able to use the model data in our view which we will be creating.

public ActionResult Index()
{
            Product product = new Product {
                 Category = "Masks",
                 Description = "An excellent diving mask",
                 Name = "Waterproof Divemask",
                 Price = 12.50M,
                 ProductID = 1
        };
	return View(product);
}

 

We will be building our solution / project, this is a requirement for the next step. You can build the solution by pressing F6.

View

Create a new view by right clicking the Index(), select Add View,  this will show us the following dialog. 

 On the dialog we will check the strongly-typed view and select our created domain model from the drop down. We select the layout or masterview and hitt Add. Layout or master views will start with an _ (underscore) there files can can not be requested.

 We changed the code as we can see in the image to:

@model Example1.WebUI.Models.Product

@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>Product name: @Model.Name</h2>
<p>
    @Model.Description
</p>

 

The first line @model indicated the strongly type view. The layout links to the layout of masterview. And the inline code used the content of the domain model which was passed to the view by the controller.

The result

When we press F5 to run the code we get the following page which tells us that our view is not yet the default view. 

 

 To change this we need to update the default route to the controller and action we just implemented. We can change the route in the global.asax. We won't be showing that here but we'll enter the name of the controller (Product) and action (Index) in the address bar. My application is running on port 17089, yours might be running on a different port. The only thing you need to do is add Product/Index at the end of your url and you'll get your first view. 

Sponsored by

Calendar

<<  August 2018  >>
MoTuWeThFrSaSu
303112345
6789101112
13141516171819
20212223242526
272829303112
3456789

View posts in large calendar

RecentComments

TextBox