Exclude AutoPostback using update Panel in asp.net

Question

I have two dropdownlist for which on first OnSelectedIndexChanged I am getting the second dropdownlist value.

Currently my code includes AutoPostBack = true which causes the whole page to postback.

I don't want the page to get Postback and at the same time get the second dropdownlist value also.

I have heard about UpdatePanel but I am unaware of how to use it exactly, but I gave it a try from here but it didn't resolved my issue.

Here is my html. Kindly suggest how to do this

<tr>
        <td class="label" style="width: 7%; font-size: 120%; font-family: Courier New">
            Project
        </td>
        <td class="field" style="width: 7%">
            <asp:DropDownList ID="ddlProject" runat="server" Width="250" OnSelectedIndexChanged="ddlProject_OnSelectedIndexChanged"
                AutoPostBack="true">
                <asp:ListItem Value="--- Select ---">--- Select ---</asp:ListItem>
            </asp:DropDownList>
        </td>
    </tr>
    <tr>
        <td class="label" style="width: 7%; font-size: 120%; font-family: Courier New">
            Building No
        </td>
        <td class="field" style="width: 7%">
            <asp:DropDownList ID="ddlBuilding" runat="server" AutoPostBack="true" Width="250"
                OnSelectedIndexChanged="ddlBuilding_OnSelectedIndexChanged">
                <asp:ListItem Value="--- Select ---">--- Select ---</asp:ListItem>
            </asp:DropDownList>
        </td>
    </tr>

Answer 1

Add a script manager from ajax extension to design page

<asp:UpdatePanel ID="updFilter" runat="server">
<ContentTemplate>
<tr>
    <td class="label" style="width: 7%; font-size: 120%; font-family: Courier New">
        Project
    </td>
    <td class="field" style="width: 7%">
        <asp:DropDownList ID="ddlProject" runat="server" Width="250" OnSelectedIndexChanged="ddlProject_OnSelectedIndexChanged"
            AutoPostBack="true">
            <asp:ListItem Value="--- Select ---">--- Select ---</asp:ListItem>
        </asp:DropDownList>
    </td>
</tr>
<tr>
    <td class="label" style="width: 7%; font-size: 120%; font-family: Courier New">
        Building No
    </td>
    <td class="field" style="width: 7%">
        <asp:DropDownList ID="ddlBuilding" runat="server" AutoPostBack="true" Width="250"
            OnSelectedIndexChanged="ddlBuilding_OnSelectedIndexChanged">
            <asp:ListItem Value="--- Select ---">--- Select ---</asp:ListItem>
        </asp:DropDownList>
    </td>
</tr></ContentTemplate></asp:UpdatePanel>

In ddlProject_OnSelectedIndexChanged method, call loadddlBuilding method which loads data to ddlBuilding based on ddlProject selected value.