Question

我正在寻找一种将List<string>绑定到MVC3中的表单的好方法。现在我有两个选择：

使用带有文本框的ListBox，在jquery中添加/删除按钮，并在发布表单之前选择所有项目
使用包含<li>的{{1}}，其值与jquery中的添加/删除按钮

我确信有更简单的方法可以做到这一点，但我没有在这里找到任何东西所以我正在寻求帮助。我关心的是在编辑公司其他属性（名称，地址......）时向公司添加不同的商务单位（字符串）。

谢谢！

Answer 1

使用ListBox似乎是实现这一目标的好方法。然后你可以在它旁边有一个文本框和一个添加按钮，它将向列表框添加一个新元素，还有一个删除按钮，它将使用客户端jquery从ListBox中删除所选项。提交表单时，由于您使用了ListBox（<select>和multiple="multiple"），它将自动绑定到List<string>类型的视图模型上的属性，您将能够获取所选值。

Answer 2

这是第一个选项的代码，如果有人找到更好的解决方案，请告诉我们！

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');
    });

});

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;
        }
    }

它将绑定到我的模型中的属性public virtual IList<string> BusinessUnits { get; set; }。

希望它有所帮助！

如何在MVC中绑定List <string>？</string>

2 个答案: