HTML的id問題

Question

我有這樣的事情

public class Reminders() 
{ 
    public List<SelectListItem> Reminder { get; set; } 
    public string SelectedReminder { get; set; } 
} 

現在，我想使含有上面我所提醒類的列表。

List<Reminders> reminders = new List<Reminders>(); 
// add SelectListItems somehow through auto mapper(not sure how to do) 
// add reminders into my viewModel 

然後在我看來，我需要通過循環來產生下拉列表。所以想法是，如果我想讓用戶能夠設置5提醒，那麼我只是確保我的收藏有5個提醒。

如果我想讓他們只有1，我確保收集有一個提醒。如果我想要100，那麼我將它改爲100.所以通過這樣做，我將來可以證明這個區域，因爲它可以非常容易地擴大或縮小。

現在，在我嘗試去做這件事，並試圖找出如何用automapper做到這一點我想知道我怎樣才能讓每個下拉列表有自己的ID？就像現在我可以看到他們都會有相同的ID（「SelectedReminder」）。

當然這是不好的，因爲你應該每個html頁面只有一個id。那麼我怎樣才能讓他們擁有不同的ID？

Answer 1

如果您使用的是編輯器模板，您不應該擔心這一點，因爲框架會正確處理所有命名約定。你也不應該做任何循環。因此，假設你有一個返回值IEnumerable<Reminders>控制器動作和要生成的下拉菜單列表：

public ActionResult Index() 
{ 
    var reminders = new[] 
    { 
     new Reminders 
     { 
      Reminder = new List<SelectListItem> 
      { 
       new SelectListItem { Value = "1", Text = "reminder 1" }, 
       new SelectListItem { Value = "2", Text = "reminder 2" }, 
      }, 
     }, 
     new Reminders 
     { 
      Reminder = new List<SelectListItem> 
      { 
       new SelectListItem { Value = "1", Text = "reminder 1" }, 
       new SelectListItem { Value = "2", Text = "reminder 2" }, 
       new SelectListItem { Value = "3", Text = "reminder 3" }, 
      }, 
     } 
    }; 
    return View(reminders); 
} 

然後在你看來，你只想：

@model IEnumerable<AppName.Models.Reminders> 
@using (Html.BeginForm()) 
{ 
    @Html.EditorForModel() 
    <input type="submit" value="OK" /> 
} 

和相應的編輯器模板（ ~/Views/Home/EditorTemplates/Reminders.cshtml）：

@model AppName.Models.Reminders 
@Html.DropDownListFor(
    x => x.SelectedReminder, 
    new SelectList(Model.Reminder, "Value", "Text") 
) 

因爲你發送2種元素在視圖模型會有2個下拉列表中產生的每一個與一個correc t的名稱，以便當你回發你會得到相應的選定的值：

<select name="[0].SelectedReminder"> 
    <option value="1">reminder 1</option> 
    <option value="2">reminder 2</option> 
</select> 

<select name="[1].SelectedReminder"> 
    <option value="1">reminder 1</option> 
    <option value="2">reminder 2</option> 
    <option value="3">reminder 3</option> 
</select>