Display a list from controller method viewbag to a list in view

Question

I have following GET method in my controller:

public ActionResult GetLinesByDestination()
{ 
    destinationService = new DestinationService();
    ViewBag.Destination_id = new SelectList(destinationService.All(), "Destination_id", "city");

    lineService = new LineService();
    ViewBag.Lines = new SelectList(lineService.All(), "line_id", "arrival");
    return View();
}

POST method:

[HttpPost]
public ActionResult GetLinesByDestination(int? Destination_id)
{
    destinationService = new DestinationService();
    ViewBag.Destination_id = new SelectList(destinationService.All(), "Destination_id", "city", Destination_id);

    lineService = new LineService();
    ViewBag.Lines = new SelectList(lineService.GetLinesByDestination(Convert.ToInt16(Destination_id)), "line_id", "arrival").ToList();

    return View();
}

View code:

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">

        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })


        <div class="form-group">
            @Html.Label("Destinations", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">
                @Html.DropDownList("Destination_id", null, "- Select a destination you want to depart from -", htmlAttributes: new { @class = "form -control" })
                @Html.ValidationMessage("Destination_id", "", new { @class = "text-danger" })
            </div>
        </div>


        <div class="form-group">
            @Html.Label("Lines", htmlAttributes: new { @class = "control-label col-md-2" })
            <div class="col-md-10">

                @Html.DropDownList("Lines", null, htmlAttributes: new { @class = "form-control" })
                @Html.ValidationMessage("Lines", "", new { @class = "text-danger" })
            </div>

All this does when executing the GET is retrieve a list of all destinations and all lines in my database. However, when clicking 'submit' and so the POST method is executed, only the lines that depart from the by the user selected destination should be shown. This is fully functional.

Now my actual question:

The Destination_id ViewBag should remain a dropdownlist in the view, since the user has to pick an option from here. I'd however like the Lines shown as a list (like < li >) on the view, so not a dropdownlist. How do I do this? I have tried some foreach loops earlier but that did not work.

Answer 1

Iterating Through Your SelectList

You should be able to just iterate through your ViewBag collection as expected by referring to the Text and Value properties set when binding to your SelectList :

@if (ViewBag.Lines != null) {
    <ul>
        @foreach (var line in ViewBag.Lines){
            <li>
               @line.Text - @line.Value
            </li>
        }
    </ul>
}

For ease of use, you might consider actually binding this collection to a specific class instead of a SelectList , which would not only give you strong typing within your View, but it would allow you to include / reference properties besides just Text and Value .

Binding Your Values

As far as actually posting values that were "selected", you would likely want to consider outputting a checkbox value for each list item and then store properties related to that item, which could be posted to your form:

<ul>
    @foreach (var line in ViewBag.Lines){
        <li>
           @line.Text - @line.Value
           <input type='checkbox' name='lines[]' value='@line.Value' / >
        </li>
    }
</ul>           

This would assume that you would want to post back an array of values that represented the "value" of each of the lines that were selected. Likewise, if you wanted to only include a single option, you could replace these with radio buttons and ensure that the name attribute properly binds to your destination_id property:

<ul>
    @foreach (var line in ViewBag.Lines){
        <li>
           @line.Text - @line.Value
           <input type='radio' name='Destination_id' value='@line.Value' / >
        </li>
    }
</ul>