MVC: Displaying table data not working as expected

Question

I have this table in database:

enter image description here

I'm trying to display the the values (ModuleID and DateEntered) in the browser as table. I'm using viewbag to pass the value to my view, which is not quite the right way as I get just one row right now. What I'm doing right now is

public ActionResult Index()
        {
            var modules = (from entries in _db.Modules
                           orderby entries.DateEntered
                           select entries);
            ViewBag.entries = modules.ToList();
            return View();
        }

How can I get all rows from the table in above picture and pass it to view? In my view I currently have:

@using BootstrapSupport

    @model Sorama.DataModel.SIS.ModuleStock.Module

    @{
        ViewBag.Title = "Index";
        Layout = "~/Views/shared/_BootstrapLayout.basic.cshtml";
    }

    <table class="table table-striped">
        <caption></caption>
        <thead>
            <tr>
                <th>
                   Module ID
                </th>

                <th>
                    Date Entered
                </th>
            </tr>
        </thead>
        <tr>
             @foreach (var entry in ViewBag.entries)
            {
                <td>@entry.ModuleId</td>
                 <td>@entry.DateEntered</td>
            }
             <td>
                    <div class="btn-group">
                        <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                            Action
                            <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                                <li>@Html.ActionLink("Details", "Details")</li>
                                @if (Request.IsAuthenticated && HttpContext.Current.User.IsInRole("Admin"))
                                {
                                    <li class="divider"></li>
                                    <li>@Html.ActionLink("Edit", "Edit")</li>
                                    <li>@Html.ActionLink("Delete", "Delete")</li>
                                }



                        </ul>
                    </div>

                </td>
        </tr>

    </table>

This shows the values of entire row and not just (ModuleID and DateEntered) This is what I get in browser Browser output .

To sum up, I want to get all the rows from table but only specific columns. Which is not happening at current situation. Suggestions?

score 2 · Answer 1 · answered Jun 20 '13 at 09:49

2

You misreading your results. There are 3 records with 2 fields each displayed in one row. You have single <tr> in your view and you insert values from ViewBag in <td> tags. You should put new <tr> for each of your record in ViewBag.

It should look more like this:

@foreach (var entry in ViewBag.entries)
{
    <tr>
        <td>@entry.ModuleId</td>
        <td>@entry.DateEntered</td>
        <td>
            <div class="btn-group">
                <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                    Action<span class="caret"></span>
                </a>
                <ul class="dropdown-menu">
                    <li>@Html.ActionLink("Details", "Details")</li>
                    @if (Request.IsAuthenticated && HttpContext.Current.User.IsInRole("Admin"))
                    {
                        <li class="divider"></li>
                        <li>@Html.ActionLink("Edit", "Edit")</li>
                        <li>@Html.ActionLink("Delete", "Delete")</li>
                    }       

                </ul>
            </div>    
        </td>
    </tr>
}

answered Jun 20 '13 at 09:49

tdragon

3,209
1
16
17

Thanks!!! that worked. But is ViewBag a good way to pass the data to view?? What if I want to show name of `ModuleTypeId` which comes from another table? – Cybercop Jun 20 '13 at 09:58
Using strongly-typed ViewModels is highly recommended over using ViewBag. You should pass your model as parameter to the view (`return View(model);`) and use `@model IEnumerable` in you view (you can remove `@model` from your view now, when you do not use it anyway). Then, you can access your model in the view from `Model` property : `@foreach (var entry in Model.Entries)` – tdragon Jun 20 '13 at 10:02
No View Bag is not good approach create Model and bind values in Models. Use model to display values. – Amit Jun 20 '13 at 10:03
@Amit Can you give an example as an answer. How I can pass values from my controller in such case without using Viewbag and how can I use them in View – Cybercop Jun 20 '13 at 10:06

score 1 · Accepted Answer · answered Jun 20 '13 at 10:16

Try this

 public ActionResult Index()
    {
        ABCList abc=new ABCList();
        var modules = (from entries in _db.Modules
                       orderby entries.DateEntered
                       select new ABC {
                           id=entries.id,
                           ModuleTypeId=entries.ModuleTypeId,
                           ModuleId=entries.ModuleId,
                           DataEntered=entries.DataEntered
                        });
        abc.settings = modules.ToList();
        return View();
    }

  public class ABC
  {

    public long Id{ get; set; }
    public long ModuleTypeId{ get; set; }
    public string ModuleId{get;set;}
    public DateTime DataEntered{ get; set; }
  }

  public class ABCList{
    public List<ABC> Settings { get; set; }
  }

View

  @model ABCList
  @foreach (var entry in Model.Settings)
 {
 <tr>
    <td>@entry.ModuleId</td>
    <td>@entry.DateEntered</td>
    <td>
        <div class="btn-group">
            <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
                Action<span class="caret"></span>
            </a>
            <ul class="dropdown-menu">
                <li>@Html.ActionLink("Details", "Details")</li>
                @if (Request.IsAuthenticated && HttpContext.Current.User.IsInRole("Admin"))
                {
                    <li class="divider"></li>
                    <li>@Html.ActionLink("Edit", "Edit")</li>
                    <li>@Html.ActionLink("Delete", "Delete")</li>
                }       

            </ul>
        </div>    
    </td>
 </tr>
}

MVC: Displaying table data not working as expected

2 Answers2