[Solution]Dropdownlist not retaining selected item on Postback

Introduction

In this article we will look into an alternative solution to the problem with dropdownlist where selecteditems are not retained on postback.

Problem Description

When we select an item in dropdownlist and do a postback(button click) then the value selected on dropdownlist will reset to the first item in dropdownlist.

demo

Usually this issue happens when we reload the items in dropdownlist on every postback. To resolve the issue we will load the dropdownlist inside the If(!IsPostBack) block.

   protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DropDownList2.Items.Insert(0, new ListItem("One", ""));
                DropDownList2.Items.Insert(1, new ListItem("Two", ""));
                DropDownList2.Items.Insert(2, new ListItem("Three", ""));
                DropDownList2.Items.Insert(3, new ListItem("Four", ""));
                DropDownList2.Items.Insert(4, new ListItem("Five", ""));
                DropDownList2.Items.Insert(5, new ListItem("Six", ""));
                DropDownList2.Items.Insert(6, new ListItem("Seven", ""));
                DropDownList2.Items.Insert(7, new ListItem("Eight", ""));
                DropDownList2.Items.Insert(8, new ListItem("Nine", ""));
                DropDownList2.Items.Insert(9, new ListItem("Ten", ""));
                DropDownList2.SelectedIndex = 4;
            }
        }

However if you see the code preceding, you will notice that the dropdownlist is populated inside if(!IsPostBack) block. Now what is causing the issue?

Solution:

On further analysis I noticed that while populating the dropdownlist, user is passing an empty string to “value” property of dropdownlist.  Dropdownlist will render on page at runtime without value being populated. This invalid code for dropdownlist caused the issue.

<select name="DropDownList2" id="DropDownList2">
<option value="">One</option>
<option value="">Two</option>
<option value="">Three</option>
<option value="">Four</option>
<option selected="selected" value=""> Five</option>
<option value="">Six</option>
<option value="">Seven</option>
<option value="">Eight</option>
<option value="">Nine</option>
<option value="">Ten</option>
</select>

To resolve the issue we need to provide an entry to “value” property in dropdownlist.

 protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                DropDownList2.Items.Insert(0, new ListItem("One", "1"));
                DropDownList2.Items.Insert(1, new ListItem("Two", "2"));
                DropDownList2.Items.Insert(2, new ListItem("Three", "3"));
                DropDownList2.Items.Insert(3, new ListItem("Four", "4"));
                DropDownList2.Items.Insert(4, new ListItem("Five", "5"));
                DropDownList2.Items.Insert(5, new ListItem("Six", "6"));
                DropDownList2.Items.Insert(6, new ListItem("Seven", "7"));
                DropDownList2.Items.Insert(7, new ListItem("Eight", "8"));
                DropDownList2.Items.Insert(8, new ListItem("Nine", "9"));
                DropDownList2.Items.Insert(9, new ListItem("Ten", "10"));
                DropDownList2.SelectedIndex = 4;
            }
        }

Demo

demo1

 

Advertisements

, , , ,

  1. Leave a comment

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

%d bloggers like this: