I have written a small post about dropdownlist template in ASP.NET MVC here : http://msprogrammer.serviciipeweb.ro/2010/05/30/mvc-helper-templates/
I think that the dropdownlist should be explained more – aand the example will be :
First, let’s say we have Employee and Department. And we have Employee that has a field, named IDDepartment.
When edit/create a user we want to display a dropdownlist for Department in order for the user to choose the department.
Step 1 : obtain from database a list of departments and transform into List<KeyValuePair<string,string>> – where the first string is DepartmentID and the second is Department Name.
Let’s say there is a method to do that : deptList.Values
Step 2 : display into the aspx/ascx file with List_KVP template
<%: Html.EditorFor(model => model.deptList.Values, “List_KVP”, “IDDepartment”, new { SelectedValue = Model.emp.IDDepartment })%>
Here is the weak part: the “IDDepartment” is not strongly typed. You can transform that …but it requires writing another extension. However, when you modify the code for
SelectedValue = Model.emp.IDDepartment
it is right nearby…
For reference, here is the List_KVP.ascx
<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<List<System.Collections.Generic.KeyValuePair<string,string>>>" %>
<%
string Val = "",style="";
if(ViewData.Values != null && ViewData.Values.Count > 0)
{
Val = (ViewData["SelectedValue"]??"").ToString();
style = (ViewData["Style"] ?? "").ToString();
}
if (style.Length > 0)
{
}
var id=ViewData.TemplateInfo.GetFullHtmlFieldId("") ;
id = id + "";
%>
<select id="<%:id %>" name="<%:ViewData.TemplateInfo.GetFullHtmlFieldName("") %>" style="<%: style %>">
<% foreach (var val in Model)
{ %>
<option value='<%: val.Key %>' <%:(val.Key == Val)?"selected=selected":"" %>><%: val.Value %></option>
<%} %>
</select>
<% if(Model.Exists(x=>x.Key ==Val) )
{
%>
<script type="text/javascript">
$(document).ready(function () {
$('#<%:id %>').change();
} );
</script>
<%
}
%>
Oh, and if you ask how to add a description , nothing more simple :
Step1 : add to dropdown an onchange event : onchange=’javascript:funcDepartmentRetrieve(this)”
Step 2: create a java script function that retrieves the long description from the id
<script type="text/javascript">
<%: Html.JavaScriptFind( Model.deptList.LongDescriptionValues, "funcDepartmentLong","notfoundDepartment") %>
</script>
Step 3 : Mix the 2 javascript functions
For your reference, the code for JavaScriptFind is
public static MvcHtmlString JavaScriptFind(this HtmlHelper hh, ICollection<KeyValuePair<string,string>> values, string Name, string NotFound)
{
string s = "function " + Name + "(value){ switch(value){";
string ret = "case '{0}' : return '{1}';" + Environment.NewLine;
foreach (var item in values)
{
//TODO : compensate for '
s += string.Format(ret, item.Key, item.Value);
};
s += string.Format("default : return '{0}' ;//+ value;" + Environment.NewLine, NotFound);
s += "};";//switch
s += "}";//function
return MvcHtmlString.Create(s);
}
