CODEWITHSUNDEEP
asp.netasp.net-mvcasp.net-mvc-3
TMC
TMC

Reputation: 8154

How to output HTML Table instead of a Select box (generated with ListBoxFor) in ASP.NET?

I am generally new to ASP.NET and am modifying some code that I've inherited. There is a section of code that creates a Select box using a ListBoxFor based on a search term that's entered by the user:

@Html.ListBoxFor(m => m.SelectedItem, 
                 Lookup.Models.myService.Search(Model.SearchTerm, 
                                         null == Model.SelectedCity ? 1 :  
                                         Int32.Parse(Model.SelectedCity))

The signature for Search() is:

public static List<SelectListItem> Search(string term, string city)

Instead of displaying a Select box, I want to output an HTML table instead with the data. I'm not even sure how to go about doing this or really what info to give you all in order to help me :)

Upvotes: 0

Views: 242

Answers (1)

Darin Dimitrov
Darin Dimitrov

Reputation: 1039438

The ListBoxFor helper displays <select> elements with multiple="multiple" attribute allowing multiple selections. If you want something else you should not use this helper. So you said that you wanted an HTML table.

Now, there's something very wrong with the code you have shown. You are calling Lookup.Models.myService.Search inside a view. Views are not supposed to pull data from some places. They are supposed to only display data that is being passed to them under the form of view models by a controller action. So this call should not be done in the view. It should be done beforehand and the result stored as a property on your view model:

public IEnumerable<SelectListItem> Items { get; set; }

Anyway. The first possibility is to write the markup yourself:

<table>
    <thead>
        <tr>
            <th>Value</th>
            <th>Text</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.Items)
        {
            <tr>
                <td>@item.Value</td>
                <td>@item.Text</td>
            </tr>
        }
    </tbody>
</table>

Of course writing this code over and over again could become cumbersome. So you could externalize it in a DisplayTemplate. For example you could put it inside a ~/Views/Shared/DisplayTemplates/MyTableTemplate.cshtml and then when you needed to render it in a view you could use:

@Html.DisplayFor(x => x.Items, "MyTableTemplate")

Upvotes: 3

Related Questions