ASP.NET MVC Model Binding With ListBoxFor & DropDownListFor Helpers

I have the following Model:

[Required (ErrorMessage="Server Name Required")]
[StringLength(15, ErrorMessage = "Server Name Cannot Exceed 15 Characters")]
public string servername { get; set; }
[Required(ErrorMessage = "Server OS Type Required")]
public string os { get; set; }
public string[] applications;

And I have used the following code to bind a textbox to the servername which works fine:
@Html.TextBoxFor(m => Model.servername, new {@class="fixed", @id="serverName"})

I am using a dropdown list for the OS, and a listbox for applications, both of which do not populate the model correctly on submit.
 @Html.DropDownListFor(m => m.os , new SelectList( ((List<SelectListItem>)ViewData["osTypes"]),"Value","Text"), new { @class = "fixed" })

 @Html.ListBoxFor(m => m.applications, new MultiSelectList((List<SelectListItem>)ViewData["appList"]), new {style="display:none;"})

Any thoughts on what I am doing wrong here?

I don’t think I gave enough information here

In the controller ViewData[“osTypes”] is set to a List with a few default values pulled from a WebAPI:

List<string> osTypes = FastFWD_SITE.Helpers.GetJsonObj._download_serialized_json_data<List<string>>(getOsTypeUrl);
List<SelectListItem> osTypeList = new List<SelectListItem>();
foreach (string osType in osTypes)
    osTypeList.Add(new SelectListItem { Text = osType });
ViewData["osTypes"] = osTypeList;

The ViewData[“appList”] is sent to an empty list as follows:
ViewData["appList"] = new List<SelectListItem>();

For the list of applications, the user fills in a textbox and hits a button to add data to the application listbox:

enter image description here

Jquery to add item to listbox:

$("#addItem").click(function () {
        var txt = $("#appName");
        var svc = $(txt).val();  //Its Let you know the textbox's value   
        var lst = $("#serverSpecification_applications");
        var ul = $("#itemList");
        var options = $("#serverSpecification_applications option");
        var iList = $("#itemList li");
        var alreadyExist = false;
        $(options).each(function () {
            if ($(this).val() == svc) {
                alreadyExist = true;
                return alreadyExist;
        if (!alreadyExist) {
            $(lst).append('<option value="' + svc + '" selected=true>' + svc + '</option>');
            $(ul).append('<li id="' + svc + '"><label>' + svc + '<input type="checkbox" id="' + svc + '" onclick="removeItem("/></label>')
            return false;

I have a feeling i am doing something horribly wrong here, anything is helpful.


Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

First of all, in order for model binder to work all your properties need to have getters and setters.

So change:

public string[] applications;

public string[] applications { get; set; }

And in order for ListBox to show the data correctly use
@Html.ListBoxFor(m => m.applications, 
    new MultiSelectList((List<SelectListItem>)ViewData["appList"], "Value", "Text"), 
    new {style="display:block;"})

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes
Article Rating
Notify of

Inline Feedbacks
View all comments
Would love your thoughts, please comment.x