Partial PostBack and actions on client side

Question

I've got two DropDownLists. First is visible and second is not. I'd like to have something like this:

1. Select value from first DDL.
2. Then partial postback occurs - the data is retrieved from DB based on selection.
3. Second DDL is populated
4. Second DDL is shown with i.e. slide effect (javascript)

I don't want to have full postback. The final effect should be:

Select value from first DDL and then below, slides down second DDL which is populated.

I don't have a clue how to start.

Answer 1

You can start by using UpdatePanel. You can update events to update only the content included in the UpdatePanel.

Offical Link ASP UpdatePanel Overview

Answer 2

Using an UpdatePanel is an easy way to get AJAX behavior in ASP.NET. The UpdatePanel will handle most of the AJAX for you.

Here's a good tutorial:

http://www.asp.net/Ajax/Documentation/Live/tutorials/IntroductionUpdatePanel.aspx

Answer 3

You should look at

Cascading Drop Down

and using jQuery to change the div of the second dropdown, See here

and the relevant jQuery

<script type="text/javascript">
$(document).ready(function(){

$(".btn-slide").click(function(){
 $("#panel").slideToggle("slow");
 $(this).toggleClass("active"); return false;
});


});

Answer 4

Since it sounds like your using webforms the first step to solving your problem would be for you to first research the ASP.Net UpdatePanel control and the options it provides.

http://msdn.microsoft.com/en-us/library/system.web.ui.updatepanel.aspx

Word of Advice though, UpdatePanel looks great at first glance but it sends 100 times more data across the wire than necessary and quickly becomes a slow performing mess the more Ajax stuff you do. You can really code yourself into tight corners because of the performance issues once the functionality gets complicated.

I'd take a look at the great tutorials on encosia.com on how to use jQuery with Asp.net WebForms and see if you can learn that method instead. UpdatePanel isn't that great of a tool and you'll be amazed with what jQuery can provide.

http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/

Also you mentioned you wanted a "slide" effect. I think to do that you'll have to dive into the asp.net ajax animation extenders stuff and that framework is not pretty or pleasant to work with.

Answer 5

Maybe Cascading Dropdown control from Ajax control toolkit can help you:
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CascadingDropDown/CascadingDropDown.aspx

Answer 6

You can see the link below

http://asimsajjad.blogspot.com/2009/08/populate-dropdown-based-on-selection-of.html

Hope that will help. as it is easy to use by using Json.

Answer 7

You can see the link below

http://asimsajjad.blogspot.com/2009/08/populate-dropdown-based-on-selection-of.html

Hope that will help. as it is easy to use by using Json.