A Static DropDownList for ASP.Net MVC

     When creating a static dropdowns list in Asp.net MVC, I have a two approaches that I like to commonly use. I know there are many ways to achieve this UI structure and I don't consider either one of the following approaches to be the final solution. However for awhile now I have been using these two approaches and I think they are much simpler and easier to maintain compared to other ways that I have seen. Rather than writing out the HTML select tag and all the options I take advantage of the Html Helper Dropdownlist. I avoid model bind since it is static and I don't want create the list outside of the view. I think this would only create more work to maintain and confusion for other coders if they new to my applications.  I did not come up with either solution completely on my own and I actually forget where I saw them since it did take a while to find these approach in my research. What's important to take away in this article is that if you look carefully you will see both solutions are very similar but have a distinct advantage for different situations.

The First Way
@Html.DropDownList("Example", new SelectList(new List<string>{
 "1", "2", "3" }, "Select"))

Html Result

     In this Example what I am doing is creating a string list with the three values as "1", "2", "3". What this does in html is create the options with the same keys set in their options. Note that it does have a "value" set and by default this would take the key as a value when submitting a form. Which is really helps if you don't have a difference from key to the "values" in the option when you submit the form. When I talk about Keys and "Values" I am talking about the html select format which is <option value="">Key</option>. So in this situation there is no set value for any of the keys and again may be what you want if your value would just be the same as your key. Just a notes for myself with you cannot use IList. This is because you cannot create an instance using abstract classes or interfaces. 
Another Note: "The <option> tag can be used without any attributes, but you usually need the value attribute, which indicates what is sent to the server."

Final Result (try me)

The Second Way
 @Html.DropDownList("Status", new SelectList(new[] { new { 
Value = "1",Text = "Text for 1" } }, "Value", "Text"), "Select")

Html Result


You might already know how this code works and I did when I first looked it seemed pretty
straight forward but at the end of the day sometimes the brain isn't running at top speed. So I'm
going to explain what this code does as well as compare it to other way. Without "Value" and 
"Text" at the end you get the whole value of the array item in to the option's text and value. "Value
", "Text" So don't forget this part, which the two can be reorder them in any way but not providing
them makes the whole array to appear in your text field. For this example we are creating a array 
2d array where was mapping out for the SelectList's item. I give my fields the name "Value" and "
Text" but you can name them anything. The last part is just is "Select" and just makes a default opti
on for the user. What I like to do is in jquery disable this option so when the user clicks on the dro
pdown they can not go back to "Select".

Note: That "Select" does not have a value set and in jquery using $('#Status').val(''); does not set it to the Select option. Instead creates a option that has a value blank as well as the text (strange).
What I did what simply reset the form as a whole, found in the same article shown earlier.

Final Result (try me)

Where I use them
I've probably given away when I use this but just to be a little more clear, I use the first method 
for when I don't have a change for options between their keys and values. For the second method
which I use more often when I have a difference between the keys and values but also when I 
need a value set for a option.

Research

Popular posts from this blog

UI-Bootstrap Collapsible Sticky Footer

Installing Windows on Acer chromebook 15 cb3-532

Aspetcore: NLog with Postgresql