Question

I am presently working on a application in which I have a display a list of items in a list box in the view and then send back the selected items to the controller.

My model is as follows:

public class Items
    {
        [DisplayName("Items")]
        public string[] Items { get; set; }
    }

When the user first requests the page, the list of items has to be queried from a database and sent to the view.
I am able to figure out how to collect the items into ArrayList/string[] at the controller side but am not able to understand the syntax for binding the view with the model and displaying the list using Html.ListboxFor and sending back the model on form submit.

Can someone please help me.

Thanks.

Answer 1

View model:

public class MyViewModel
{
    [DisplayName("Items")]
    public string[] SelectedItemIds { get; set; }
    public IEnumerable<SelectListItem> Items { get; set; }
}

Controller:

public class HomeController : Controller
{
    public ActionResult Index()
    {
        var model = new MyViewModel
        {
            // preselect some items
            // leave empty if you want none to be selected initially
            SelectedItemIds = new[] { "1", "3" },

            // Normally you would fetch those from your database
            // hardcoded here for the purpose of the post             
            Items = Enumerable.Range(1, 10).Select(x => new SelectListItem
            {
                Value = x.ToString(),
                Text = " item " + x
            })
        };
        return View(model);
    }

    [HttpPost]
    public ActionResult Index(string[] selectedItemIds)
    {
        // here you will get the list of selected item ids
        // where you could process them
        // If you need to redisplay the same view make sure that 
        // you refetch the model items once again from the database
        ...

    }
}

View (Razor):

@model AppName.Models.MyViewModel
@using (Html.BeginForm())
{
    @Html.LabelFor(x => x.SelectedItemIds)

    @Html.ListBoxFor(
        x => x.SelectedItemIds, 
        new SelectList(Model.Items, "Value", "Text")
    )
    <input type="submit" value="OK" />
}

View (WebForms):

<% using (Html.BeginForm()) { %>
    <%= Html.LabelFor(x => x.SelectedItemIds) %>

    <%= Html.ListBoxFor(
        x => x.SelectedItemIds, 
        new SelectList(Model.Items, "Value", "Text")
    ) %>
    <input type="submit" value="OK" />
<% } %>