Html Id question

Question

I have something like this

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

Now I want to make a List of Reminder classes that contain what I have above.

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

Then in my view I would need to loop through them to generate the dropdown list. So the idea is that say if I want a user to be able to set 5 reminder then I just make sure my collection has 5 reminders.

If I want them only to have 1, I make sure the collection has one reminder. If I want 100 then I change it to a 100. So by doing this I future proofed that area as it can expand or decrease very easily.

Now before I try to go make this and try to figure out how to do it with automapper I am wondering how can I make each dropdown list have its own id? Like right now I can see they will all have same id("SelectedReminder").

Of course this is bad since you should only have one id per html page. So how can I make them have different ids?

Answer 1

If you are using an editor template you shouldn't worry about this because all naming convention will be handled correctly by the framework. You also shouldn't need to do any looping. So suppose that you have a controller action that returns an IEnumerable<Reminders> and you want to generate a list of dropdowns:

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

Then in your view you would simply:

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

and the corresponding editor template (~/Views/Home/EditorTemplates/Reminders.cshtml):

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

Because you sent 2 elements in the view model there will be 2 dropdowns generated each with a correct name so that when you post back you would get the corresponding selected values:

<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>