Dropdownlist(ddlState) value loss after AsyncPostBackTrigger in update panel

Question

5.00/5 (1 vote)

See more:

i have ddlCountry dropdownlist and ddlState dropdownlist.. ddlState is in update panel. On selection of country i have populated its states using selectedindexchanged event of ddlCountry. i have added start value "-1" to both dropdown after bind...and check in javascript if dropdownlist content is [Select] value"-1" then alert and return false...But Validation is proper for ddlCountry and for ddlState its value becomes "blank" after ajax update panel fires and validation fail..How should i resolve them..I dont know why ddlState value loss after AsyncPostBackTrigger

XML

//javascript validation

    function validateForm()
            {
                if (ddlCountry .value == "-1")
                {
                    alert("Country  should not be blank.");
                    ddlCountry .focus();
                    return false;
                }
                if (ddlState .value == "-1")
                {
                    alert("State should not be blank.");
                    ddlState .focus();
                    return false;
                }

                return true;
            }
    //Aspx code
             <asp:UpdatePanel ID="updatePanelState" runat="server">
                                                <ContentTemplate>
                    <asp:DropDownList ID="ddlState " runat="server" CssClass="csstextbox" Width="177px">
                                                    </asp:DropDownList>
                                                </ContentTemplate>
                                                <Triggers>
                                                    <asp:AsyncPostBackTrigger ControlID="ddlCountry" EventName="SelectedIndexChanged" />
                                                </Triggers>
                                            </asp:UpdatePanel>
        //Code Behind

         protected void Page_Load(object sender, EventArgs e)
	{
         if(!IsPostBack)
         {
           BindCountry()
           {
               strSQL = @"SELECT Country_ID,Country_Desc
                            FROM Country_Master";
                           

                DataTable dataTableState = null;
                dataTableState = objSqlDbComm.ExecuteDatasetQuery(strSQL).Tables[0];

                var dictioneryCountry = new Dictionary<int, string>();
                foreach(DataRow dr in dataTableStudy.Rows)
                {
                    dictioneryCountry .Add(Convert.ToInt32(dr["Country_ID"]), dr["Country_Desc"].ToString());
                }

                ddlCountry.DataTextField = "Value";
                ddlCountry.DataValueField = "Key";
                ddlCountry.DataSource = dictioneryCountry;
                ddlCountry.DataBind();
                ddlCountry.Items.Insert(0, new ListItem("[Select]", "-1"));
                ddlCountry.Items[0].Selected = true;

           }
         }
        }
        protected void ddlCountry_SelectedIndexChanged(object sender, EventArgs e)
            {
                int countryID = Convert.ToInt32(ddlCountry.SelectedItem.Value);

                ifcountryID == -1)
                {
                    return;
                }

                strSQL = @"SELECT State_ID,State_Desc
                            FROM State_Master
                            WHERE countryID = '" + countryID + @"';

                DataTable dataTableState = null;
                dataTableState = objSqlDbComm.ExecuteDatasetQuery(strSQL).Tables[0];

                var dictioneryState = new Dictionary<int, string>();
                foreach(DataRow dr in dataTableStudy.Rows)
                {
                    dictioneryState .Add(Convert.ToInt32(dr["State_ID"]), dr["State_Desc"].ToString());
                }

                ddlState.DataTextField = "Value";
                ddlState.DataValueField = "Key";
                ddlState.DataSource = dictioneryState;
                ddlState.DataBind();
                ddlState.Items.Insert(0, new ListItem("[Select]", "-1"));
                ddlState.Items[0].Selected = true;

            }

Posted 16-May-12 0:32am

Nikhil Dayalpawar

Updated 16-May-12 1:19am

v5

Add a Solution

Comments

MAKReddy 16-May-12 6:40am

hi try this property for dropdownlist has autopostback=true

[no name] 16-May-12 6:49am

i have tried earlier but not working

MAKReddy 16-May-12 7:09am

ok

bhagirathimfs 16-May-12 7:13am

I think you have assigned the selected Index or selected value of a drop down to some value in the page_load event.Use ispostback in page load.

and also use autopostback property of the dropdown.

Can you share your page_load event ???
so that we can find the error.

[no name] 16-May-12 7:14am

i have add page load code...ok

4 solutions

Solution 3

I guess this has to do with how UpdatePanel works. After asyncpostback all content inside updatepanel is deleted from DOM and re-created from AJAX response.
Thes means that original country and state dropdowns are deleted, and new ones created. So in your javaScript you'll have invalid references to ddlCountry and ddlState. The solution is to update these references after asyncpostback.

Put this script just below your ddlStateDropDownList:

JavaScript

<script type="text/javascript">
	var ddlState = document.getElementById('<%= ddlState.ClientID %>');
</script>

Posted 21-May-12 1:39am

sjelen

Updated 21-May-12 2:15am

v3

Comments

[no name] 21-May-12 7:47am

How can i update Please give me solution in brief..with code

sjelen 21-May-12 8:16am

I've updated the answer, take a look.

[no name] 21-May-12 8:20am

I have already declare ddlState on body load event of javascript..i think body load event not fired using asyncPostback thats y have to declare again on validateform() function..whats ur opinion

sjelen 21-May-12 8:34am

DOM body load event is not fired for partial page updates (using UpdatePanel).
Correct way to handle this would be to use PageRequestManager and it's pageLoaded event, here is example:
http://msdn.microsoft.com/en-us/library/bb386417.aspx
Alse take a look at this nice article explaining ASP.NET AJAX framework:
http://www.codeproject.com/Articles/22384/ASP-NET-AJAX-Controls-and-Extenders

[no name] 21-May-12 8:56am

can i explicitly fire body_load event of javascript after ddlSelectediNdexchanged event fire did it will works?

sjelen 21-May-12 9:42am

I don't think you can fire DOM body_load event, nut you could call event handler directly form a script (similar to example above) if it's named function (not anonymous).

[no name] 21-May-12 10:03am

then i have to declare two times document.getElementById('<%= ddlState.ClientID %>' in validateform(); and body_onload event is this right coding practice

sjelen 21-May-12 10:42am

You can declare it only once - in validateform().
(if you do not use it somewhere else in your code)

[no name] 23-May-12 6:00am

One Problem if i have to use ddlstate value in multiple function in javascript page then i have to declare every time in function what is the best way to declare..?????

Solution 4

You need to actually hold the values from client side in a array and put it in hidden field ,split then using c sharp and again bind the drop down ,it worked for me simple

Posted 26-Mar-14 1:27am

Lalit Yadav-The Vemp

Solution 1

I did a quick test with following code, and it works all good:

C#

var dictioneryState = new Dictionary<int, string>();

        for (int i = 0; i < 5; i++)
        {
            dictioneryState.Add(i, "value" + i.ToString());
        }


        ddlState.DataTextField = "Value";
        ddlState.DataValueField = "Key";
        ddlState.DataSource = dictioneryState;
        ddlState.DataBind();
        ddlState.Items.Insert(0, new ListItem("[Select]", "-1"));
        ddlState.Items[0].Selected = true;

Please check the values being transferred from database.

Posted 16-May-12 1:14am

Sandeep Mewara

Comments

[no name] 16-May-12 7:27am

Sandeep:i am inserting value of ddlState correct way...Actually value is loss after AsyncPostBackTrigger i have did using PostBackTrigger value is not loss...my problem is i have to retain value of ddlState and use in javascript after asyncpostback

Sandeep Mewara 16-May-12 12:44pm

As much I see here, your ddlState is getting populated based on the AsyncTrigger! What do you mean it is lost? Are you somewhere rebinding the ddlState dropdown?

[no name] 17-May-12 1:32am

No i am not rebinding ddlState dropdown in any other event or function i m binding on selectedindechanged event of ddlCountry only.....ddlState dropdown value checking in javascript if it is "-1" then generate alert..when i check value in javascript it showing me blank value ""...but when i use Postbacktrigger for ddlState value is getting in javascript and all work is fine...but smoothness of page using async is better than Postbacktrigger...thts y i use async trigger...My main problem is ddlState value is not getting in javascript when i use async trigger but using Postback trigger value is getting......

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Nikhil Dayalpawar · Accepted Answer · 2012-05-21T01:06:00

Solution 2

I have taken hiddenfield value in code behind assign to ddlstate.selectedItem.value and onselectedindexchanged Event of ddlState again assign hidden value
and check hiddenfield.value in javaascript

Posted 21-May-12 1:06am

Nikhil Dayalpawar