Posting a selected value from a dropdownlist with ASP.NET MVC

Recently I came across a quirk of posting a selected value of a drop down list element in my HTML markup to an action method in my controller.

I basically set up my action method to receive a class object called TrainingPackageDetailsModel. This action method will be invoked upon a http post action.

Using a strongly type view model approach to populate my view template, I have basically set up a SelectList property of type IEnumerable<string> and populated this SelectList with a list (array of strings) of training package type name descriptions. For simplicity sake, the SelectList was initialized to be {“TrainingPackageType1”, “TrainingPackageType2”, “TrainingPackageType3”}. I then set my SelectList to populate a property in my TrainingPackageDetailsModel called SelectedTrainingPackageType of type string. This values are set during SelectList constructor time or instantiation time.

By doing this, I was expecting ASP.NET MVC to be clever enough to decipher the text and value of this SelectList element to have text, “TrainingPackageType1” and its corresponding value, “TrainingPackageType1”, “TrainingPackageType2” will have its corresponding value, “TrainingPackageType2”.

Compiling and running this code in FF3.5  and calling TryUpdateModel on the TrainingPackageDetailsModel after a HTTP Post has occured, my SelectedTrainingPackageType property within my TrainingPackageDetailsModel was successfully populated with a value I selected in the drop down list. Keep in mind, I am using IEnumerable<string> to initialize the text of my drop down list in my markup.

As I was developing on a website which needed to be browser compatible with both IE and FireFox, I had to run this same piece of code in IE7.  To my amazement with IE7, TryUpdateModel fails to populate the SelectedTrainingPackageTypeProperty with a value I selected in the dropdownlist.

So I ventured out abit to view the page source of both FF and IE7, and voila, FF manages to populate the text and value attributes within the option tags that nests inside the rendered select tag element with the text, “TrainingPackageType1” and value “”TrainingPackageType1”. This repeats for the other remaining values. Hence, the select html element looks like this.

Rendering the same element in IE7, I noticed that there were NO values at all populated for the value attributes of the option tags nested within the select element. This may be a quirk with IE7 in terms of how it intends to render the markup for a Html.DropDownList of a type set to it as IEnumerable<string>.

In order to get around this issue with posting a selected value to an action method when you’re using a strongly typed object (passed through the action method), I will recommend creating a class that encapsulates two properties which can be called Text and Value respectively. Then, we pass a list of these classes to the SelectList element and set the property names accordingly to be the text and value inside the SelectList at constructor time. This is a good practice and is one that I have actually learnt from the NerdDinners tutorial when I first began learning ASP.NET MVC. Changing my code to use a List of classes encapsulating a Text and Value property as apposed to using IEnumerable<string> eventually solved my aching problem on both IE and Firefox.

Feel free to test this out in other browsers too. I am confident this is the most solid approach to solving this problem in all browsers and there is nothing better that what the guys at Microsoft propose with good practices such as illustrated in Nerd Dinner tutorial.

Wasted two hours on this problem. I am most confident it will work in all other browsers as well.

I will put my code snippets very soon to address this scenario and that developers can clearly understand what is the problem at hand.

One thought on “Posting a selected value from a dropdownlist with ASP.NET MVC

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.