Partial PostBack and Client Side Actions
I have two DropDownLists. The first is visible, but the second is not. I would like to have something like this:
- Select a value from the first DDL.
- Then there is a partial postback - the data is fetched from the DB based on the selection.
- The second DDL is populated.
- Second DDL shown using slide effect (javascript)
I don't want to have a full postback. The final effect should be:
Select the value from the first DDL and then below, slide the second DDL that is populated.
I have no clue how to start.
a source to share
Since this is similar to using web forms, the first step to solving your problem would be to first examine 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, although the UpdatePanel looks great at first glance, it sends 100 times more data over the wire than needed and quickly becomes a slow executing mess the more you do Ajax. You can actually code yourself in tight corners due to performance issues when the functionality gets tricky.
I would look at the great tutorials on encosia.com on how to use jQuery with WebForms Asp.net and see if you can learn the technique. UpdatePanel is not that great and you will be surprised at what jQuery can provide.
http://encosia.com/2008/05/29/using-jquery-to-directly-call-aspnet-ajax-page-methods/
You also mentioned that you want a "slide" effect. I think you will need to dive into asp.net ajax animators and this structure is not very nice or pleasant to work with.
a source to share
You can start by using UpdatePanel. You can update events to update only the content included in the UpdatePanel.
Official link ASP UpdatePanel Overview
a source to share
Using UpdatePanel is an easy way to get AJAX behavior in ASP.NET. UpdatePanel will handle most of the AJAX for you.
Here's a good tutorial:
http://www.asp.net/Ajax/Documentation/Live/tutorials/IntroductionUpdatePanel.aspx
a source to share
You should look
and using jQuery to change the div of the second dropdown, See here
and the corresponding jQuery
<script type="text/javascript">
$(document).ready(function(){
$(".btn-slide").click(function(){
$("#panel").slideToggle("slow");
$(this).toggleClass("active"); return false;
});
});
a source to share
Maybe cascading Dropdown control from Ajax control toolkit can help you:
http://www.asp.net/AJAX/AjaxControlToolkit/Samples/CascadingDropDown/CascadingDropDown.aspx
a source to share