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
- How an ASP.NET MVC View to display data can look like
- Understand the HTML markup which is available to display records on an MVC View
- 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.
Recent Comments