MarkAFarrugia

Freelance Web Development in Malta

By

Examining the MVC View which displays data

In the previous blog post we saw how we can list data inside our views. However we did not dwell into the HTML markup which ASP.NET MVC creates when a list of items is displayed.

At the end of this blog you should have an understanding of

  1. How an ASP.NET MVC View to display data can look like
  2. Understand the HTML markup which is available to display records on an MVC View
The prerequisites for this blog are
  1. You should follow this blog to create a View which lists data back from a database

If you open the View which ASP.NET MVC created, which in our case is called Index and is located under the Views/Products folder you will find the underneath HTML markup.

@model IEnumerable

@{
 ViewBag.Title = "Index";
 Layout = "~/Views/Shared/_Layout.cshtml";
}</pre>
<h2>Index</h2>
<pre>
 @Html.ActionLink("Create New", "Create")</pre>
@foreach (var item in Model) {}
<table>
<tbody>
<tr>
<th>@Html.DisplayNameFor(model => model.ProductName)</th>
<th>@Html.DisplayNameFor(model => model.ProductCategory)</th>
<th>@Html.DisplayNameFor(model => model.ProductDescription)</th>
<th></th>
</tr>
<tr>
<td>@Html.DisplayFor(modelItem => item.ProductName)</td>
<td>@Html.DisplayFor(modelItem => item.ProductCategory)</td>
<td>@Html.DisplayFor(modelItem => item.ProductDescription)</td>
<td>@Html.ActionLink("Edit", "Edit", new { id=item.ProductId }) |
 @Html.ActionLink("Details", "Details", new { id=item.ProductId }) |
 @Html.ActionLink("Delete", "Delete", new { id=item.ProductId })</td>
</tr>
</tbody>
</table>
<pre>

From the above code you will soon realize that ASP.NET MVC is basically rendering all products as a table. Now let me explain some important constructs which are written in the above code.

From line number 1 you will deduce that this View accepts a list of Products. This would have been returned from the actual controller.

@model IEnumerable

In line number 11 you will find a special ASP.NET MVC construct which is @Html.ActionLink(“Create New”, “Create”). This basically creates a link which will take you to the Create Product’s controller method. The text displayed for the hyperlink will be Create New. This will basically take you to a page where you can create a new product.

   @Html.ActionLink("Create New", "Create")

At line number 16 you have another special MVC construct which is @Html.DisplayNameFor(model => model.ProductName) which basically displays a label for the ProductName field which belongs to the Products table.

    @Html.DisplayNameFor(model => model.ProductName)

At line number 30 a special construct @Html.DisplayFor(modelItem => item.ProductName) to display a specific input element related to the table’s field is shown. For example, if you have a String field then this construct will render as an HTML textbox, whilst if the field is a boolean then this will get rendered an HTML checkbox.

     @Html.DisplayFor(modelItem => item.ProductName)

At line number 39,40 and 41 you have 3 constructs which are very similar which will basically render as a hyperlink and will take you to the Edit, Details and Delete Product’s controller methods respectively. These controller methods will give the user the opportunity to Edit, View product details and Delete a specific product respectively.

       @Html.ActionLink("Edit", "Edit", new { id=item.ProductId }) |
       @Html.ActionLink("Details", "Details", new { id=item.ProductId }) |
       @Html.ActionLink("Delete", "Delete", new { id=item.ProductId })

So in this blog post I explained some special ASP.NET MVC helpers and how they can help you display data. I hope you found this blog post useful. In the next blog post we will be creating the controller method which will let us Edit, Create, View Details and Delete a specific product.

By

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
The prerequisites to follow this blog are
  1. Installed SQL Server Express database. You can install it from here.
  2. Have a Products table as will be shown soon
  3. Know how to create a LINQ To Entities model which will help us in retrieving and updating records
 The Products table which we will be using in this blog should have these fields defined
  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

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

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 4 - Add View and Scaffold

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.

Products List

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.