在列表框中添加項視圖按鈕被點擊

Question

當我有這個模型

public class CreateAppointmentSelectPersons 
{ 

    [DataType(DataType.EmailAddress, ErrorMessageResourceType = typeof (Resource), ErrorMessageResourceName = "CreateAppointment_Email_Invalid_Email_Address")] 
    [EmailAddress] 
    [Display(ResourceType = typeof(Resource), Name = "RegisterViewModel_EmailId_Email_Id")] 
    public string Email { get; set; } 

    public Boolean IsSuperOfficeConnected { get; set; } 

    [Display(ResourceType = typeof (Resource), Name = "CreateAppointmentSelectPersons_SelectedSuperOfficeEmail_SuperOffice_Contact")] 
    public string SelectedSuperOfficeEmail { get; set; } 



    public Boolean IsInternalAddressBookEmpty { get; set; } 
    [Display(ResourceType = typeof(Resource), Name = "CreateAppointmentSelectPersons_InternalAddressBookPersons_AddressBook_Contact")] 
    public string SelectedAddressBookPerson { get; set; } 


    [Display(ResourceType = typeof (Resource), Name = "CreateAppointmentSelectPersons_AttendeesListBox_Invited_Persons")] 
    [Required] 
    public List<string> AttendeesListBox { get;set; } 
} 

另外，我考慮是新來的列表框。 這個想法是用戶將有多達三個框，並且當他們鍵入一個電子郵件地址並單擊它旁邊的按鈕時，我想將它添加到列表框中的視圖中，我想從列表框中檢索值僅在發佈形成。

這是我有鑑於目前，

@using System.Web.Mvc.Html 
@model DatePicker.Models.ViewModels.Appointment.CreateAppointmentSelectPersons 
@{ 
    ViewBag.Title = "Create"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
    <link href="~/Content/themes/base/minified/jquery-ui.min.css" rel="stylesheet"/> 
} 

<h2>Create</h2> 
@using(Html.BeginForm("Create","Appointment", new { @class = "form-horizontal", role = "form" })) 
{ 
    @Html.AntiForgeryToken() 
    <hr /> 
    @Html.ValidationSummary() 
    <div class="form-group"> 

     @Html.LabelFor(m => m.Email, new { @class = "col-md-8 control-label" }) 
     <div class="col-md-8"> 
      @Html.TextBoxFor(m => m.Email, new { @class = "form-control" }) <input type='button' id="btnEmail" class="btn-default form-inline" value="Add>>" /> 
     </div> 

     @if (Model.IsSuperOfficeConnected) 
     { 
     @Html.LabelFor(m=>m.SelectedSuperOfficeEmail, new {@class="col-md-8 control-label"}) 
     <div class="col-md-8"> 

      @Html.TextBoxFor(m=>m.SelectedSuperOfficeEmail,new{@class="form-control",PlaceHolder="Search in SuperOffice..."}) <input type='button' id="btnSuperOffice" class="btn-default" value="Add>>"> 
     </div> 

     } 
     @if (Model.IsInternalAddressBookEmpty) 
     { 
     @Html.LabelFor(m => m.SelectedAddressBookPerson, new { @class = "col-md-8 control-label" }) 
     <div class="col-md-8"> 
      @Html.TextBoxFor(m=>m.SelectedAddressBookPerson,new{@class="form-control",PlaceHolder="Search in AddressBook..."}) <input type='button' id ="btnAddressBook" class="btn-default" value="Add>>"> 
     </div> 
     } 
     @Html.ListBoxFor(m => m.AttendeesListBox, new SelectList(Model.AttendeesListBox), new { style = "width:100%;" }) 
    </div> 
} 

@section Scripts{ 
    @Scripts.Render("~/Scripts/jquery-ui-1.10.4.min.js") 

    <script type="text/javascript"> 
     $(function() { 
      $("#SelectedSuperOfficeEmail"). 
       autocomplete({ 
        source: '/Appointment/SuperOfficePerson', 
        minLength: 1, 
        }); 
     }); 
     $(function() { 
      $("#SelectedAddressBookPerson").autocomplete({ 
       source: '/Appointment/AddressBookPerson', 
       minLength: 1, 
      }); 
     }); 
     $(function() { 
      $('#btnEmail').click(function(e) { 
       var name = $('#Email').val(); 
       $('#AttendeesListBox').append($("<option></option>").attr("value"), name).text(name); 
      }); 
     }); 
     $(function() { 
      $('#btnSuperOffice').click(function (e) { 
       var name = $('#SelectedSuperOfficeEmail').val(); 
       $('#AttendeesListBox').append($("<option></option>").attr("value"), name).text(name); 
      }); 
     }); 
     $(function() { 
      $('#btnEmail').click(function (e) { 
       var name = $('#SelectedAddressBookPerson').val(); 
       $('#AttendeesListBox').append($("<option></option>").attr("value"), name).text(name); 
      }); 
     }); 
    </script> 
} 

現在，我得到一個抱怨說：「無法解析ListBoxFor（lambda表達式）」。

我應該怎麼做，使我的觀點工作，以便在點擊鏈接的價值被添加到列表框中並在提交時我得到列表框

Answer 1

這裏只值而來的解決方案 -

設你的模型是 -

public class ListBoxModel 
{ 
    public List<string> Names { get; set; } 
    public List<string> SelectedNames { get; set; } 
} 

讓你的控制器動作是 -

public class ListBoxController : Controller 
{ 
    public ActionResult Index() 
    { 
     ListBoxModel model = new ListBoxModel(); 
     model.Names = new List<string>(); 
     model.Names.Add("Rami"); 
     return View(model); 
    } 

    public ActionResult Submit(ListBoxModel model) 
    { 
     return null; 
    } 
} 

索引控制器只是創建項目列表並將其發送到索引視圖。索引視圖將是 -

@model MVC.Controllers.ListBoxModel 

@{ 
    ViewBag.Title = "Index"; 
} 

<h2>View1</h2> 
<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script> 
    $(function() { 
     $('#click1').click(function (e) { 

      var name = $("#txt1").val(); 

      $('#SelectedNames'). 
       append($("<option></option>"). 
       attr("value", name). 
       text(name)); 
     }); 
    }); 
</script> 

@using (Html.BeginForm("Submit", "ListBox", FormMethod.Post)) 
{ 
    @Html.ListBoxFor(m => m.SelectedNames, new SelectList(Model.Names)) 

    <input type="text" id="txt1" /> 
    <input type="button" value="Click" id="click1" /> 

    <input type="submit" value="submit"/> 
} 

在索引視圖，當你在文本框中輸入一個名稱，然後單擊按鈕「點擊」，它會被添加到列表框在客戶方 -

當您選擇列表框中的項目並點擊提交按鈕時，表單將被提交併將選定的值提交給列表框控制器的提交操作。

UPDATE

由於每個問題的更新，要發送的所有列表框項目到服務器，我們在表單中添加隱藏字段動態使用JQuery。

視圖 -

@model MVC.Controllers.ListBoxModel 

@{ 
    ViewBag.Title = "Index"; 
} 

<h2>View1</h2> 
<script src="~/Scripts/jquery-1.10.2.min.js"></script> 
<script> 

    $(function() { 
     $('#click1').click(function (e) { 

      var name = $("#txt1").val(); 
      $('#SelectedNames'). 
       append($("<option></option>"). 
       attr("value", name). 
       text(name)); 

      $('#hiddensq').append("<input name='UserValues' type='hidden' value='"+ name +"'/>"); 
     }); 
    }); 
</script> 

@using (Html.BeginForm("Submit", "ListBox", FormMethod.Post)) 
{ 
    <div id="hiddensq"> 
    </div> 

    for (int i = 0; i < Model.Names.Count; i++) 
    { 
     @Html.Hidden("UserValues", Model.Names[i]); 
    } 

    @Html.ListBoxFor(m => m.SelectedNames, new SelectList(Model.Names)) 

    <input type="text" id="txt1" /> 
    <input type="button" value="Click" id="click1" /> 

    <input type="submit" value="submit" /> 
} 

和Controller -

public ActionResult Submit(ListBoxModel model, IEnumerable<string> UserValues) 
    { 
     var c = Request.Form; 

     return null; 
    } 

輸出 - 所有選定值將在ListBoxModel現身，但所有的列表框項目將在UserValues參數現身。