ASP.NET MVC View User Control - how to set IDs?

Question

I need a dropdown list on my page that will allow a user to select their state. Since this is probably a control that will be used elsewhere, I thought it would be a good idea to create an MVC View User Control that could be reused.

I was thinking the control would look something like this:

<select name="" id="">
   <option value="AL">Alabama</option>
   <option value="AK">Alaska</option>
</select>

And the code in my view would be something like:

<%= Html.RenderPartial("StateDropdownControl") %>

My question is, what's the best way to set the name and id on the control? I'd want to make sure I could have multiple instances of this control on one page, if needed. Also, I'd want to be able to send in the state that should be selected by default.

Would I do it with ViewData somehow?

Answer 1

Well you can pass object data to the RenderPartial method in conjunction to the User Control to render, so you could easily do the following:

<%= Html.RenderPartial("/someDirectory/SomeControl.ascx", "MyID") %>

and in the UserControl do the following:

<select name="<%=ViewData.Model%>" id="<%=ViewData.Model%>">

....

Just to be sure, a better way to handle it is to make a simple DTO (data transfer object) to hold that information so you can pass more information to your user control, that you will inevitably need.

Example:

class ComboData 
{
   string ID {get;set;}
   string CssClass {get;set;}
   //Other stuff here
}

<%
var comboData = new ComboData {ID = "myID", CssClass = "comboStyle" }

%>

<%= Html.RenderPartial("/someDirectory/SomeControl.ascx", comboData) %>

<select name="<%=ViewData.Model.ID%>" id="<%=ViewData.Model.ID%>" class="<%=ViewData.Model.CssClass%>">

....

Make sure you set the Code behind for the user control to be a generic of type ComboData for this example.

Answer 2

Corey is on to the right solution. I think declaring specific Model objects for your view makes the views VERY simple and as a side bonus makes them dirt easy to test.

So instead of just passing the ID as the object, you'd probably want to create your own Model object to pass in.

It could look something like this:

public class StateDropDownPresentationModel
{
    public string DropDownID { get; set; }
    public string SelectedState { get; set; }
}

Obviously, keep adding whatever you need to this model to make your view correct.

Then, you could call it like this:

<%= Html.RenderPartial("/someDirectory/SomeControl.ascx", new StateDropDownPresentationModel { DropDownID = "MyID", SelectedState = "IL" } %>

Then just make sure you put in checks for things like ID being null/blank (that should probably throw an error) and SelectedState being null/blank.

Answer 3

Take a look at the Html.DropDownList helper method. It has a number of overloads that allow you to pass the list data and set the selected item. the simplest version just sets the name of the select.

<%= Html.DropDownList("SelectStates"); %>

If there is a value in the ViewData["SelectStates"] that is of type MultiSelectList then the list will be automatically populated.