How to create html table from model class

Question

I am new in MVC and learning MVC. Now I do not want to use any grid extension, rather I want to generate tabular UI just by HTML table. So I was looking for code and found a hint.

This code is not full code. Here is what I got.

<% if (Model.Count() > 0)
{ %>
    <table width="35%">
 <thead><tr><th>Species</th><th>Length</th></tr></thead>
  <%  foreach (var item in Model)
    { %>
     <tr>
         <td><%= item.FishSpecies%></td>
         <td align="center"><%=item.Length%></td>
     </tr>

 <% } %>
    </table>
<% }
else
{ %>
No fish collected.
<%} %>

The problem is I am not being able to visualize how the model class should look like and how it is populated from controller. Viewbag is not used in code, rather generating table directly from model class.

So can anyone write a small complete code for me just to create a HTML table and populate with model directly without using viewbag?

Need code for model, controller and view too.

Oh really. First, this is not a complete code. What were your efforts to write a controller and action? And model? — OzrenTkalcecKrznaric
– OzrenTkalcecKrznaric, Commented Jul 25, 2013 at 11:47

Mike Perrenoud · Accepted Answer · 2013-07-25 11:55:32Z

1

Your model actually needs to be a IEnumerable<Model>. So you might have a model:

public class Model
{
    public string FishSpecies { get; set; }
    public int Length { get; set; }

    public static IEnumerable<Model> Load() { ... }
}

and then in your controller's action:

var list = Model.Load();
return View(list);

and then in the view you need to define the model at the very top:

@model System.Collections.IEnumerable<My.Namespace.Model>

Now, these two lines aren't going to work:

<td><%= item.FishSpecies%></td>
<td align="center"><%=item.Length%></td>

they need to be something more like this:

<td>@Html.DisplayFor(m => item.FishSpecies)</td>
<td>@Html.DisplayFor(m => item.Length)</td>

answered Jul 25, 2013 at 11:55

Mike Perrenoud

68.1k32 gold badges167 silver badges238 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Thomas Over a year ago

what is item ? it is not define in code. just see this code <td>@Html.DisplayFor(m => item.Length)</td> here u use lambda so here u use m but u actually use item.Length instead of m.Length? anyway i am not good in mvc so looking for ur comment against my answer. thanks

Thomas Over a year ago

if we can directly populate model from controller and use that model in view to populate any control then why should one use viewbag ? any idea when job can be accomplish directly using model then why viewbag need to use.

Mike Perrenoud Over a year ago

@Thomas, to answer your first question, the DisplayFor requires a Func, so I have to send in m (i.e. the name of the parameter), however, because you're in a loop I really need to reference the value of item. That's what this is doing. It's meeting the needs of the method, but using lexical scoping to grab the value from item.

Mike Perrenoud Over a year ago

@Thomas, the ViewBag is rarely needed if you're working with models. A good example is you might use the ViewBag for a title that can be set in the controller.

Amin Saqi · Accepted Answer · 2013-07-25 11:58:50Z

0

If you want to iterate through your model and create your table, first of all change the @model of your view like this:

@model IEnumerable<myPrj.Models.EntityName>

Then, you should change your action method to supply model items to your view:

public ActionResult Index()
{            
    return View(db.EntityNames.ToList());
}

and finally, iterate your model and create your table:

<table id="tblNews">
<tr>
    <th>
        @Html.DisplayNameFor(model => model.Property1)
    </th>

    // ...

    <th>
        @Html.DisplayNameFor(model => model.Propertyn)
    </th>        
</tr>

@foreach (var item in Model) {
<tr>
    <td>
        @Html.DisplayFor(modelItem => item.Property1)
    </td>

    // ... 

    <td>
        @Html.DisplayFor(modelItem => item.Propertyn)
    </td>        
</tr>
}
</table>

and about the model? Model is nothing but a class with some properties:

public class MyModel
{
    [Display(Name = "Property 1")]
    [Required(ErrorMessage = "Property cannot be empty")]
    public int Property1 { get; set; }

    // ...

    [Display(Name = "Property n")]
    [Required(ErrorMessage = "Property cannot be empty")]
    public string Propertyn { get; set; }        
}

edited Jul 25, 2013 at 11:58

answered Jul 25, 2013 at 11:52

Amin Saqi

19.1k9 gold badges53 silver badges70 bronze badges

6 Comments

Thomas Over a year ago

if we can directly populate model from controller and use that model in view to populate any control then why should one use viewbag ? any idea when job can be accomplish directly using model then why viewbag need to use.

Thomas Over a year ago

tell me about DisplayNameFor & DisplayFor helper method. what kind of html tag it generate ? does it generate label or <TD> ?

Amin Saqi Over a year ago

I myself doesn't use viewbag at all, but to send some very simple data such as a flag or a little string to the view. Another common use of viewbag is to send a SelectList collection to view to populate DropDownList.

Amin Saqi Over a year ago

To understand what @Html.DisplayNameFor and @Html.DisplayFor do, first take a look at the model MyModel in my answer. The first one renders value of the first attribute [Display(Name = "Property 1")] which is Property 1. And the second renders the value of that property which your model brings to the view. I don't know exactly what codes are generated, however I know these will be <label> tags with some attributes.

Erik Noren Over a year ago

DisplayNameFor is a helper that will give you the display name of a property if one has been given via attribute decoration or the property name itself as an HTML label, I believe. DisplayFor works similarly with the value of the property but it also checks first to see if you have any DisplayTemplates to use for that property type (custom render template rather than default HTML).

|

Collectives™ on Stack Overflow

How to create html table from model class

2 Answers 2

4 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related