My standard way to work with dropdown box in ASP.NET MVC – 2 steps (or 3 if you want to add long description)

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

&lt;%@ Control Language=&quot;C#&quot; Inherits=&quot;System.Web.Mvc.ViewUserControl&lt;List&lt;System.Collections.Generic.KeyValuePair&lt;string,string&gt;&gt;&gt;&quot; %&gt;
&lt;%
    string Val = &quot;&quot;,style=&quot;&quot;;
    if(ViewData.Values != null &amp;&amp; ViewData.Values.Count &gt; 0)
    {
        Val = (ViewData[&quot;SelectedValue&quot;]??&quot;&quot;).ToString();
        style = (ViewData[&quot;Style&quot;] ?? &quot;&quot;).ToString();
    }
    if (style.Length &gt; 0)
    {

    }
    var id=ViewData.TemplateInfo.GetFullHtmlFieldId(&quot;&quot;) ;
    id = id + &quot;&quot;;
    %&gt;

&lt;select id=&quot;&lt;%:id %&gt;&quot; name=&quot;&lt;%:ViewData.TemplateInfo.GetFullHtmlFieldName(&quot;&quot;) %&gt;&quot; style=&quot;&lt;%: style %&gt;&quot;&gt;
    &lt;% foreach (var val in Model)
       { %&gt;
            &lt;option  value='&lt;%: val.Key %&gt;' &lt;%:(val.Key == Val)?&quot;selected=selected&quot;:&quot;&quot; %&gt;&gt;&lt;%: val.Value %&gt;&lt;/option&gt;
    &lt;%} %&gt;
&lt;/select&gt;
&lt;% if(Model.Exists(x=&gt;x.Key ==Val) )
{
       %&gt;
       &lt;script type=&quot;text/javascript&quot;&gt;
   $(document).ready(function () {

       $('#&lt;%:id  %&gt;').change();
   }     );
      &lt;/script&gt;
      &lt;%
}
    %&gt;

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

 &lt;script type=&quot;text/javascript&quot;&gt;
         &lt;%: Html.JavaScriptFind( Model.deptList.LongDescriptionValues,&quot;funcDepartmentLong&quot;,&quot;notfoundDepartment&quot;) %&gt;
        &lt;/script&gt;
  

Step 3 : Mix the 2 javascript functions

For your reference,the code for JavaScriptFind is

 public static MvcHtmlString JavaScriptFind(this HtmlHelper hh,ICollection&lt;KeyValuePair&lt;string,string&gt;&gt; values,string Name,string NotFound)
        {
            string s = &quot;function &quot; + Name + &quot;(value){  switch(value){&quot;;
            string ret = &quot;case '{0}' : return '{1}';&quot; + Environment.NewLine;
            foreach (var item in values)
            {
                //TODO : compensate for '
                s += string.Format(ret,item.Key,item.Value);
            };
            s += string.Format(&quot;default : return '{0}' ;//+ value;&quot;  + Environment.NewLine,NotFound);
            s += &quot;};&quot;;//switch
            s += &quot;}&quot;;//function
            return MvcHtmlString.Create(s);
        }

Posted

in

,

by

Comments

4 responses to “My standard way to work with dropdown box in ASP.NET MVC – 2 steps (or 3 if you want to add long description)”

  1. […] This post was mentioned on Twitter by ignatandrei, Hire ASP.Net Experts. Hire ASP.Net Experts said: EN blog:: My standard way to work with dropdown box in ASP.NET MVC – 2 steps (or 3 if you want to add long description) http://bit.ly/cv1OHg […]

  2. Mihai Avatar
    Mihai

    And you don’t think there are any code smells in there ?

    I could name ViewData usage as one. Magic strings anyone?. Hardcoded javascript WTF 😮

    You should have a DropDownListViewModel with all existing ViewData values.
    What do you do when you have more then one ListView on the page? How do you pass those values to the user control ? do you create inside you html page a ViewDataDictionary to be passed in RenderControl?

    I would not recommend this to anyone. If this is the standard you work in… I would not want to be the one who has to maintain the project after you’ve abandoned it.

  3. asp.net ecommerce development Avatar

    I was looking for this coding since from many days. I am glad to have found this post. Thanks. Keep posting!

  4. admin Avatar
    admin

    Mihai
    I do not think so. The purpose of re-using templates is very near of the MVC
    More, I do not see where do you think I have “hardcoded javascript” .
    And for your remark about ViewData – please think again. ViewData is hardcoded ….

    For passing more than 1 ListView- I will have in my ViewModel more
    > – that’s the purpose of a ViewModel!

    How I pass those values ? I will have the View inherit from the ViewModel and pass via Html.EditorFor – shown in the post.

    About not recommending – your choice. After you have done testing with ViewData for dropdownlist, please come back and test my code…

Leave a Reply

Your email address will not be published. Required fields are marked *