Как связать список <string> в MVC?

Question

Я ищу хороший способ привязать List<string> к форме в MVC3. Сейчас у меня есть 2 вариант:

• Используйте ListBox с текстовым полем, добавить/кнопку удаления в JQuery и сделать выбор всех деталей, прежде чем отправлять мою форму
• Используйте <li>, который будет содержит <input type="hidden" /> со значением также с кнопкой добавления/удаления в jQuery

Я уверен, что есть более простой способ сделать это, но я ничего здесь не нашел, поэтому я прошу помощи. Моя забота заключается в том, чтобы добавить в компанию разные единицы бизнеса (строки), а также изменить другие свойства компании (имя, адрес ..).

Спасибо!

Answer 1

Вот мой код для первого варианта, если кто-нибудь найдет лучшее решение, дайте мне знать!

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; } в моей модели.

Надеюсь, это поможет!

Answer 2

Использование ListBox кажется хорошим способом достижения этого. Затем у вас может быть текстовое поле и кнопка добавления рядом с ним, которые добавят новый элемент в список и кнопку удаления, которая удалит выбранные элементы из списка ListBox, используя jQuery на стороне клиента. И когда форма отправлена, так как вы использовали ListBox (<select> с multiple="multiple"), она автоматически привязывается к свойству модели вашего вида List<string> и вы сможете получить выбранные значения.