Question

I’m searching for a good way to bind a List<string> to a form in MVC3. Right now I have 2 options:

• Use a ListBox with a textbox, add/delete button in jquery and do a select all items before posting my form
• Use a <li> that will contains a <input type="hidden" /> with the value also with a add/delete button in jquery

I’m sure there is easyer way to do this but I did not found anything here so I’m asking for help. My concern is to add different bussiness units (string) to a company while editing the company other properties (name, address..).

Thanks!

Answer 1

Here’s my code for the first option, if anyone find a better solution, let me know!

Html/Razor :

<div class="row">
        <div class="span12">
            <div class="control-group">
                <label for="AddBusinessUnit" class="control-label">@Strings.BusinessUnit</label>
                <div class="controls">
                    <div class="input-append">
                        <input type="text" class="span2" size="16" id="AddBusinessUnit" />
                        <button class="btn" type="button" id="add-business-unit">@Strings.Add</button>
                    </div>
                </div>
            </div>

            <div class="control-group">
                <div class="controls">
                    @Html.ListBoxFor(model => model.BusinessUnits, SelectLists.BusinessUnits(Model.BusinessUnits, false), new { Multiple = "multiple" })<br/>
                    <a href="#" id="delete-business-unit">@Strings.DeleteSelectedElement</a>
                </div>
            </div>
        </div>
    </div>

    <div class="form-actions">
        <input type="submit" class="btn btn-primary" value="@Strings.Save" />
        <a href="@Url.Action(MVC.Company.Index())" class="btn">@Strings.Cancel</a>
    </div>

Js :

<script type="text/javascript">
$(document).ready(function () {

    $('#add-business-unit').click(function (e) {
        var bu = $('#AddBusinessUnit').val();
        if (bu != '') {
            $('#BusinessUnits').append($('<option></option>').val(bu).html(bu));
            $('#AddBusinessUnit').val('');
        }
        e.preventDefault();
    });

    $('#delete-business-unit').click(function (e) {
        $('#BusinessUnits :selected').remove();
        e.preventDefault();
    });

    $('input[type="submit"]').click(function () {
        $('#BusinessUnits option').attr('selected', 'selected');
    });

});

The SelectList :

public static class SelectLists
    {
        public static IList<SelectListItem> BusinessUnits(IList<string> bussinessUnits, bool addEmpty, string selected = "")
        {
            var list = new List<SelectListItem>();
            if(addEmpty) list.Add(new SelectListItem());
            list.AddRange(bussinessUnits.Select(businessUnit => new SelectListItem {Selected = selected == businessUnit, Text = businessUnit, Value = businessUnit}));

            return list;
        }
    }

It will bind to my property public virtual IList<string> BusinessUnits { get; set; } in my model.

Hope it can helps!