2

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

  • 使用带有文本框的 ListBox，在 jquery 中添加/删除按钮，并在发布我的表单之前选择所有项目
  • 在 jquery 中使用<li>将包含<input type="hidden" />带有值的 a 以及添加/删除按钮

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

谢谢！

4

2 回答 2

0

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

于 2012-05-31T14:13:21.423 回答
0

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

html/剃须刀：

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

});

选择列表：

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; }我模型中的属性。

希望它能有所帮助！

于 2012-05-31T19:47:08.963 回答