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>

Well sir you even can not use javascript with it, a good option for that is do not use it. I tried once to do that but could not find a proper solution to it — KhawajaAtteeq, Jan 12 '16 at 11:50
@KhawajaAtteeq: I want to do it as it is a requirement for me. I need to find some solution — Nad, Jan 12 '16 at 11:50
Dear UpdatePanel has have to reload because JS is not allowed in it so webforms has to postback it to load with new data .. This link might help http://encosia.com/easily-refresh-an-updatepanel-using-javascript/ — KhawajaAtteeq, Jan 12 '16 at 11:55

guestdj · Accepted Answer · 2016-01-12T12:15:00.643

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.

Exclude AutoPostback using update Panel in asp.net

1 Answers1