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.

8 comments on “Examining the MVC View which displays data

  1. @foreach (var item in Model) {}
    but when i given this its getting error that i cant give foreach in a model

    • admin on said:

      You need to give me the exact error which it is giving you.

      • Error is
        foreach statement cannot operate on variables of type ‘SampleMVC.Models.Test’ because SampleMVC.Models.Test does not contain a public definition for “GetEnumerator’.

        But when i define like this its throwing error like System.web.MVC.ViewPage .Model is a property but is used like a type.

        Please help me what to do

        • ** i defined

          • admin on said:

            Remember that you need to return something which is a list such as IQueryable. You will then be able to loop through the records. On top of your view for example you can type
            @model Iqueryable

  2. And also explain me how to pass the datatable from controller to view in MVC

    • admin on said:

      Assuming you have a method which returns a list of something, this is how you pass the data from the controller to the View. Of course here sp is a variable which contains a set of methods which return data from a database.

      return View(sp.GetSupportTickets(id));

      • i got the data but its in datatable i will write the code
        public ActionResult Index()
        {
        List objModelList = new List();
        ObjMvc.ReturnDataTable();
        objModelList.Add(ObjMvc);
        return View(objModelList);
        }
        i am casting

        I want to cast the data from datatable on Gridview in Viewpage.Please help me

Leave a Reply

Your email address will not be published. Required fields are marked *

*

HTML tags are not allowed.