How can I fire Selected Index Changed event without any postback using UpdatePanel?

Question

I have a SignIn page that has a SignInUserControl page and is inside a MasterPage. Inside the SignIn page I have 2 drop down lists

ddlCountry

ddlCity

I want to change the country and it automaticly load the cities. Using this code:

 <li>
    <label>Your Country:</label>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
            <asp:DropDownList ID="ddlCountry" runat="server" Width="356px"
                DataTextField="Country" DataValueField="CodCountry"
                OnSelectedIndexChanged="ddlCountry_SelectedIndexChanged" AutoPostBack="true" />
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ddlCountry" EventName="SelectedIndexChanged" />
        </Triggers>
    </asp:UpdatePanel>
</li>
<li>
    <label>Your City:</label>
    <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
            <asp:DropDownList ID="ddlGestor" runat="server" Width="356px" DataTextField="City" DataValueField="CodCity" />
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="ddlCountry" EventName="SelectedIndexChanged" />
        </Triggers>
    </asp:UpdatePanel>
</li>

the cities get loaded but AutoPostBack="True" calls the SignIn Page_Load(), the MasterPage Page_Load() and the SignInUserControl Page_Load(). And by the way I have other functions inside these Page_Load(), so they are also being called

Is there any way to avoid this? It seems like UpdatePanel is not a real Ajax because to work it has to send to the server all those pages and not only the block of code that I want

Answer 1

yes you can achive it by using ajax cascading drop -down

by using it you can achive the binding without any postback firing up

follow up this link

http://www.ajaxcontroltoolkit.com/CascadingDropDown/CascadingDropDown.aspx