Create a simple ASP.NET MVC View to display data

First of all I would like to welcome any first time visitors to my blog. Before I start this blog I would like to give a brief introduction to myself. My name is Mark Anthony Farrugia and, apart from being a Computing Teacher, I am a freelance web developer based in Malta which is a small island in the Mediterranean. So now let me start this blog post .

In this blog I will give an introduction on how to display data in an ASP.NET page. In particular I will be displaying products information in an ASP.NET MVC view. This information will be returned from an SQL Express database using LINQ To Entities. I will be explaining LINQ To Entities in a future blog but since what I will be covering is very easy I am sure you will not find any problems to follow this tutorial.

The outcome for this blog is thus

1. To list records back from a database

1. ProductId (uniqueidentifier)
2. ProductName (varchar(50))
3. ProductDesciption (varchar(50))
4. ProductCategory (smallint)

Please note that ProductCategory will be related to another table Categories but for now I will not take this relationship into consideration

In the ASP.NET MVC Models folder (Figure 1) I will include the LINQ To Entities model. This LINQ To Entities model has only one single entity which is the Product entity which maps to the Products table. I will also place the classes which interact with the LINQ To Entities model which modify and retrieve data inside this folder. You will thus note that in this folder I will place anything which relates to the business layer.

Figure 1 – LINQ To Entities

Please note that normally I do not place the LINQ To Entities model and business logic inside the Models folder. Rather I normally create separate class libraries which provide the business logic. However, for now, I will be including everything in a single project.

The LINQ To Entities code which returns our all our products is shown underneath.

public IQueryable Product GetProducts()
{
Models.MVCBlogDBEntities entities = new MVCBlogDBEntities();
return entities.Products;
}

This code is basically some simple LINQ To Entities code which returns all our existing products.

Our first step is to create our Products controller which will be responsible in calling anything related to the Products (modifying and retrieving data) and then displaying it back to our views. If you are still unsure how to create controllers and views please refer to this blog post.

Add a new controller called ProductsController shown in Figure 2. Thus the user will be able to access our controller methods using our website url /Products. Our Index method will be responsible to get all the available products and return it back to the view.

Figure 2 – Products Controller

Go into the Index method of our Products controller, click the right mouse button and click on Add View.

Now this is the fun part . Remember that our Index controller method will return a list of products from the LINQ To Entities model. Select Create a Strongly Typed View and select the Product class which is our LINQ To Entities model class. In the ScaffoldTemplate select List, as shown in Figure 3. Click on OK and your first ASP.NET MVC view which lists data is ready.

Figure 3 – Add View and Scaffold

Now go back to your Index controller. To pass the Products list back to your view you need to modify your Index controller as shown below.

public ActionResult Index()
{
 Models.DBProducts db = new Models.DBProducts();
 return View(db.GetProducts());
}

Basically in the above code we are calling GetProducts which basically returns all our products.

If you now return your application and type /Products/Index in your URL you will view all your products as shown in Figure 5.

Figure 5 – Products List

 Can you see how easy it is to display data in a view from a controller? I’m sure that from now on you will be using this to display data .

In my next blog post I will going into detail on the HTML markup which is generated in the View we have created in this blog post.