Hi,

I have an ASP.Net Ajax enabled site and have a small problem that I'm not sure how to resolve.

I'm using ASP.Net 2.0 and Ajax but not the Ajax toolkit.

I have an update panel with a series of dropdowns.  One dropdown is determined to be visible to the user or not, depending upon what the user selects from another dropdown.

That is, the choice made from the first drop down in the panel determines which one of two other possible dropdowns is displayed further down the page.  Basically, when an option is chosen from the first dropdown on the page, there is a partial page postback.  Upon the page reloading, the value of the dropdown is evaluated and the appropriate second dropdown is made visible.

The dropdowns are used to allow users to specify search criteria.  After selecting their choices, the user clicks a Submit button (which is an ASP.Net button), and the matching results displayed in another update panel on the webpage.

The problem is that, despite the partial page postback being fairly quick, sometimes users have selected an option from the first dropdown but then have managed to press the submit button before the postback from the dropdown has completed.  The end result is that the second drop down displayed is the wrong one.

I have thought about simply displaying both secondary drop downs but I think this would confuse some users, as the context and data of the drop downs is different depending upon what's chosen in the first drop down.

Is there some way I can prevent the user from clicking the submit button until the postback process from selecting from the first drop down has completed?

Or is there a way to display a "Please Wait" message somehow when the user has selected from the first drop down and the partial page postback has been initiated?

Any help appreciated.

Thank you.

I would not use updatepanel to wrap up controls to simply show or hide them. I think JavaScript is enough to handle this situation.

You may want to read this article for some ideas:

http://dotnetslackers.com/articles/aspnet/JavaScriptWithASPNETServerControls.aspx

Thanks for the reply.

I should point out that the UpdatePanel is being used for another reason also; it just so happens that the dropdowns are related also, and so in the same panel.

I will certainly look at the above link.

Would the solution offerred in the article work for my situation?  i.e., could I use the JavaScript in that way with the updatepanel still present?

Thanks,

Darren

 Then can you give more details of your application?

yes, you can always use javascript for this purpose, you just need to find the client id of your dropdown and toggle its appearance.

 Great, so long as I can apply this pattern when using an UpdatePanel, I think it could be a good solution.

Many thanks.

Ok.  I tried this but I am having trouble getting it to work.

Firstly, I'm adding the onclick attribute in the code behind.  Is there anywhere in particular I should do this?  I've tried this in the Page_Init and Page_Load event handlers.  Here's the code for this bit:

  string rentalDropDownClientID = RentalDropDown.ClientID;
  string priceDropDownClientID = PriceDropDown.ClientID;

  foreach (ListItem li in BuyLetDropDown.Items)
  {
         if (li.Value == "Buy" || li.Value == "Select")
         {
                li.Attributes.Add("Onclick",
                    "ShowHide('" + priceDropDownClientID + "','on');ShowHide('" + rentalDropDownClientID + "','off')");

         }

         else if (li.Value == "Rent")
         {
                li.Attributes.Add("Onclick",
                    "ShowHide('" + priceDropDownClientID + "','off');ShowHide('" + rentalDropDownClientID + "','on')");
         }

     }

Then, there's the JavaScript function, which I was a little unsure about:

function ShowHide(dropDownClientID, OnOff)
{ 
     var ele = document.getElementById(dropDownClientID); 
     if(ele != null)
     { 
       if(OnOff == "on") 
           {
            ele.style.visibility = "visible";
            ele.style.display = "block"; 
            }
       else
       { 
         ele.style.visibility = "hidden";
         ele.style.display = "none";
         }
        }
} 

The JavaScript function is on the webpage (rather than external file).

I changed the BuyLetDropDown's AutoPostBack to false.

However, when I try this out, it does not work.

I must be doing something wrong?  Unless it is related to the Ajax UpdatePanel?

The generated source for the dropdowns looks like this:

 <p class="db_sidebardropdowntext"> Buy/Let:<br /><select name="ctl00$ContentPlaceHolder2$BuyLetDropDown" id="ctl00_ContentPlaceHolder2_BuyLetDropDown" style="color:Blue;font-size:Smaller;width:90px;">
        <option selected="selected" value="Select" Onclick="ShowHide('ctl00_ContentPlaceHolder2_PriceDropDown','on');ShowHide('ctl00_ContentPlaceHolder2_RentalDropDown','off')">Select...</option>
        <option value="Buy" Onclick="ShowHide('ctl00_ContentPlaceHolder2_PriceDropDown','on');ShowHide('ctl00_ContentPlaceHolder2_RentalDropDown','off')">Buy</option>
        <option value="Rent" Onclick="ShowHide('ctl00_ContentPlaceHolder2_PriceDropDown','off');ShowHide('ctl00_ContentPlaceHolder2_RentalDropDown','on')">Rent</option>

    </select>
   </p>

 <select name="ctl00$ContentPlaceHolder2$PriceDropDown" id="ctl00_ContentPlaceHolder2_PriceDropDown" style="color:Blue;font-size:Smaller;width:128px;">
        <option selected="selected" value="Any">Any</option>
        <option value="&lt;=£50,000">&lt;=&#163;50,000</option>
        <option value="£50,001 - £100,000">&#163;50,001 - &#163;100,000</option>
        <option value="£100,001 - £175,000">&#163;100,001 - &#163;175,000</option>
        <option value="£175,001 - £250,000">&#163;175,001 - &#163;250,000</option>
        <option value="£250,001 - £300,000">&#163;250,001 - &#163;300,000</option>
        <option value="£300,001 - £400,000">&#163;300,001 - &#163;400,000</option>
        <option value="£400,001 - £500,000">&#163;400,001 - &#163;500,000</option>
        <option value="£500,000+">&#163;500,000+</option>

    </select>

When I test, only the priceDropDown is ever visible.

Any help appreciated.

Thank you.

The following code does not seem to be valid:

string rentalDropDownClientID = RentalDropDown.ClientID;
string priceDropDownClientID = PriceDropDown.ClientID;

foreach (ListItem li in BuyLetDropDown.Items)
{
  if (li.Value == "Buy" || li.Value == "Select")
  {
    li.Attributes.Add("Onclick",
    "ShowHide('" + priceDropDownClientID + "','on');ShowHide('" + rentalDropDownClientID + "','off')");
  }
  else if (li.Value == "Rent")
  {
    li.Attributes.Add("Onclick",
    "ShowHide('" + priceDropDownClientID + "','off');ShowHide('" + rentalDropDownClientID + "','on')");
  }
}

Basically you should not use the onclick on the items of the dropdownlist - you should use the onchange in the dropdownlist:

RentalDropDown.Attributes.Add("OnChange", ....);

Try that and let us know.

I forgot to mention: You can get rid of the loop completely.

Hi,

Thanks for the replies.

I could not get this method to work but using a slightly different approach I have now achieved the same result client-side with JavaScript that I'm happy with.

Thanks for your help on this.

Regards,

Darren