如何在ASP.NET MVC中使用SelectListItem來通過列表框或檢查列表框顯示選擇

-2

我一直在閱讀關於如何向用戶展示選擇的幾篇文章。有些使用ListBoxFor，有些使用CheckBoxFor，然後有這種叫做MultiSelectList的東西。如何在ASP.NET MVC中使用SelectListItem來通過列表框或檢查列表框顯示選擇

我很困惑的是，每個例子似乎都做了一個完全不同的方式，沒有一個實際使用內置的「SelectListItem」類，而是總是創建它們自己的。

因此，我原本打算髮表一個問題，要求進行一般性澄清，但我認爲它只是代表所有其他各種帖子和重複。

讓我重新說一句：你如何使用「列表」或「多選列表」向用戶顯示選項列表，包括將它們顯示爲複選框列表的選項？換句話說，如果我的模型中有以下兩個項目，我將如何將它們中的每一個顯示爲典型的選擇列表框或典型的檢查列表框？

public List<SelectListItem> Widgets1 { get; set; } 
public MultiSelectList Widgets2 { get; set; }

來源

2016-04-21 da_jokker

你還沒有問一個問題！這個問題或任何你的答案都不會幫助任何人。 –

你是對的。我看到堆棧溢出向我展示了一個「回答你自己的問題並分享知識」的選項，所以我猜這就是這篇文章的內容。 –

如果你真的回答了一個問題，那就沒問題了，但是沒有問題，所以你的自己的回答沒有意義 –

-1

所以讓我們從模型開始吧。這是非常基本的，你可以看到我只創建了3個存儲相同數據的列表。

主要在這裏不同的是，所有的我讀的例子，人們在那裏創造自己的產品類別，在這裏我想簡單地使用內置的「SelectListItem」類

public class FooModel 
{ 
    [Display(Name = "WidgetCheckList")] 
    public List<SelectListItem> WidgetsAsCheckList { get; set; } 

    [Display(Name = "WidgetListBox")] 
    public List<SelectListItem> WidgetsAsListBox { get; set; } 

    [Display(Name = "WidgetMultiSelectList")] 
    public MultiSelectList WidgetMultiSelectList { get; set; } 

    //We have to create a bucket that not only some how 
    //auto-magically knowns what has been pre-selected in the 
    //original list, but provides the view something to store 
    //the new selections in when returning to the controller. 
    //I have to admit, I have no idea how this knows what was 
    //pre-selected, but being new at MVC, there are things I 
    //just have to leave it as a mystery becuase it just works. 

    [HiddenInput(DisplayValue = false)] 
    public List<string> userSelectionsAsListBox { get; set; } 

    [HiddenInput(DisplayValue = false)] 
    public List<string> userSelectionsAsMultiSelectList { get; set; } 

    public FooModel() 
    { 
    this.WidgetsAsCheckList = new List<SelectListItem>(); 
    this.WidgetsAsListBox = new List<SelectListItem>(); 
    this.WidgetMultiSelectList = new MultiSelectList(new List<SelectListItem>()); 
    } 
}

對於控制器，因爲這是一個學習測試，我只是編寫了數據。這裏的關鍵是我構建了一個SelectListItem列表，然後使用該列表來填充模型的所有3個演示字段，以顯示3種不同的方式來處理相同的數據。

// ------------------------------------------------------------------------ 
[HttpGet]  //Display the Edit view 
public ActionResult Edit() 
{ 
    FooModel myModel = new FooModel; 

    //For testing, here I'm going to Inject some Choices 
    //So first we build a list of them 
    List<SelectListItem> myChoices = new List<SelectListItem>(); 
    for (Int32 myIndex = 1; myIndex < 15; myIndex++) 
    { 
     SelectListItem myChoice = new SelectListItem(); 
     myChoice.Value = myIndex.ToString(); 
     myChoice.Text = "Choice " + myIndex.ToString(); 
     if ((myIndex % 2) == 0) 
     { 
      myChoice.Selected = true; 
     } 
     else 
     { 
      myChoice.Selected = false; 
     } 
     myChoices.Add(myChoice); 
    } 

    String[] mySelections = myChoices.Where(x => x.Selected == true).ToArray().Select(x => x.Value).ToArray(); 

    //Now we use that same list to populate all 3 variations in our model 
    myModel.WidgetsAsCheckList.AddRange(myChoices); 
    myModel.WidgetsAsListBox.AddRange(myChoices); 
    myModel.WidgetMultiSelectList = new MultiSelectList(myChoices, "Value", "Text", mySelections); 

    return View(myModel); 
}

現在查看，我顯示每個列表。首先當然是一個複選框，並在第二個和第三個列表框，但使用不同的基礎對象...

@* This displays the "list" of SelectListItems as Checkboxes but we have to do alot more work *@ 
<div class="form-group"> 
    @Html.LabelFor(model => model.WidgetsAsCheckList, htmlAttributes: new { @class = "control-label col-md-2" }) 
    <div class="col-md-10"> 
     <div class="form-control" style="overflow-y: scroll; height: 25em; width:280px;"> 
      @for (var myIndex = 0; myIndex < Model.WidgetsAsCheckList.Count; myIndex++) 
      { 
       @Html.CheckBoxFor(cc => cc.WidgetsAsCheckList[myIndex].Selected, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.HiddenFor(cc => cc.WidgetsAsCheckList[myIndex].Value, new { htmlAttributes = new { @class = "form-control" } }) 
       @Html.DisplayFor(cc => cc.WidgetsAsCheckList[myIndex].Text, new { htmlAttributes = new { @class = "form-control" } }) 
       <br /> 
      } 
     </div> 
    </div> 

</div> 

@* This displays the "list" of SelectListItems as list box that does all the work for us *@ 
<div class="form-group"> 
    @Html.LabelFor(model => model.WidgetsAsListBox, htmlAttributes: new { @class = "control-label col-md-2" }) 
    <div class="col-md-10">     
     @Html.ListBoxFor(model => model.userSelectionsAsListBox, Model.WidgetsAsListBox, new { @class = "form-control", size = 25 }) 
    </div> 
</div> 

@* This displays the "MultiSelectList" as list box that does all the work for us *@ 
<div class="form-group"> 
    @Html.LabelFor(model => model.WidgetMultiSelectList, htmlAttributes: new { @class = "control-label col-md-2" }) 
    <div class="col-md-10"> 
     @Html.ListBoxFor(model => model.userSelectionsAsMultiSelectList, Model.WidgetMultiSelectList, new { @class = "form-control", size = 25 }) 
    </div> 
</div>

最後，當用戶自己選擇（或採取預先選定的）和點擊提交，我們可以得到的控制器簡單地由結果...

// --------------------------------------------------------------------- 
[HttpPost]  
[ValidateAntiForgeryToken] 
public ActionResult Edit(FooModel myFooModel) 
{ 

    List<string> SelectedItemsFromListBox = myFooModel.userSelectionsAsListBox; 

    List<string> SelectedItemsFromMultiSelectList = myFooModel.userSelectionsAsMultiSelectList; 

    List<string> SelectedItemsFromCheckList = myFooModel.WidgetsAsCheckList.Where(x => x.Selected == true).ToList().Select(x => x.Value).ToList(); 

}

來源

2016-04-21 22:35:46

我無法在您的問題中發現問題... – DSN

警告......只是想指出的是，一旦你得到太多的選擇「複選框」選項基本上掛起。（例如，將我的循環更改爲500），它基本上不會提交。

該問題追溯到CheckBoxFor行的驗證。這可以通過改變一條線是固定的...

     @Html.CheckBoxFor(cc => cc.WidgetsAsCheckList[myIndex].Selected, new { data_val = "false", htmlAttributes = new { @class = "form-control" } })

如果我這樣做，我可以有1500項的檢查清單，並提交發生在不足3秒的

來源

2016-04-22 14:18:17

如何在ASP.NET MVC中使用SelectListItem來通過列表框或檢查列表框顯示選擇

回答

相關問題