Dropdownlist value loss after AsyncPostBackTrigger in update panel in asp.net

Question

I have two DropdownLists. I want to bind the second one on the selection change of first one.

Here's my code:

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdatePanel ID="upCategory" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:MultiView ID="mvSuggestions" ActiveViewIndex="0" runat="server">
            <asp:View ID="vManageCategory" runat="server">
                <table width="100%">
                    <tr>
                        <td style="text-align:center;"> <span class="BlockHeader"><span>Suggestions</span></span>
                        </td>
                    </tr>
                    <tr>
                        <td> <span class="ButtonInput">
                    <span>             

                    <asp:Button ID="btnCreateNew" runat="server" TabIndex="2" 
            Text="Create New Suggestions" onclick="btnCreateNew_Click"  />


                    </span></span>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:GridView ID="gvSuggestion" runat="server" AllowPaging="true" AutoGenerateColumns="false" DataKeyNames="id" Width="285px">
                                <Columns>
                                    <asp:boundfield datafield="suggestion_area" headertext="Suggestions" />
                                    <asp:boundfield datafield="active_closed" headertext="status" />
                                    <asp:boundfield datafield="date_creation" headertext="created date" />
                                </Columns>
                            </asp:GridView>
                        </td>
                    </tr>
                </table>
            </asp:View>
            <asp:View ID="vCreateSuggestions" runat="server">
                <table width="100%">
                    <tr>
                        <td colspan="2" style="text-align:center;"> <span class="BlockHeader"><span>Suggestions</span></span>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2"> <span class="ButtonInput">
                    <span>                                
                    <asp:Button ID="btnShowCategory" runat="server" TabIndex="2" 
            Text="Show Suggestions" onclick="btnShowCategory_Click"  />          
                    </span></span>
                        </td>
                    </tr>
                    <tr>
                        <td rowspan="2">Suggestion Subject</td>
                        <td rowspan="2">
                            <asp:TextBox ID="txtSuggestionSubject" runat="server" TextMode="MultiLine"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="rfvSuggestionSubject" runat="server" ControlToValidate="txtSuggestionSubject" ValidationGroup="Blank" ErrorMessage="Category can not blank!" Display="None" SetFocusOnError="true"></asp:RequiredFieldValidator>
                            <ajaxToolkit:ValidatorCalloutExtender ID="vceSubCategory" TargetControlID="rfvSuggestionSubject" runat="server" Width="120px"></ajaxToolkit:ValidatorCalloutExtender>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblCategory" runat="server" Text="Category"></asp:Label>
                        </td>
                        <td>**
                            <asp:DropDownList ID="ddlCategory" runat="server" Height="16px" ValidationGroup="Blank" OnSelectedIndexChanged="ddlCategory_SelectedIndexChanged" Width="210px" AutoPostBack="true"></asp:DropDownList>**
                            <asp:RequiredFieldValidator ID="rfvCategory" runat="server" ControlToValidate="ddlCategory" ValidationGroup="Blank" ErrorMessage="Please select category!" Display="None" InitialValue="0" SetFocusOnError="true"></asp:RequiredFieldValidator>
                            <ajaxToolkit:ValidatorCalloutExtender ID="cveCategory" TargetControlID="rfvCategory" runat="server" Width="230px"></ajaxToolkit:ValidatorCalloutExtender>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <asp:Label ID="lblSubCategory" runat="server" Text="Sub Category"></asp:Label>
                        </td>
                        <td>
                            <asp:DropDownList ID="ddlSubCategory" runat="server" Width="203px"></asp:DropDownList>
                            <asp:RequiredFieldValidator ID="rfvSubCategory" runat="server" ControlToValidate="ddlSubCategory" ValidationGroup="Blank" ErrorMessage="Please select sub category!" Display="None" InitialValue="0" SetFocusOnError="true"></asp:RequiredFieldValidator>
                            <ajaxToolkit:ValidatorCalloutExtender ID="cveSubCategory" TargetControlID="rfvSubCategory" runat="server" Width="230px"></ajaxToolkit:ValidatorCalloutExtender>
                        </td>
                    </tr>
                    <tr>
                        <td rowspan="2">Suggestion</td>
                        <td rowspan="2">
                            <asp:TextBox ID="txtSuggestion" runat="server" TextMode="MultiLine" Height="75px"></asp:TextBox>
                            <asp:RequiredFieldValidator ID="rfvSuggestion" runat="server" ControlToValidate="txtSuggestion" ValidationGroup="Blank" ErrorMessage="Suggestion can not blank!" Display="None" SetFocusOnError="true"></asp:RequiredFieldValidator>
                            <ajaxToolkit:ValidatorCalloutExtender ID="vceSuggestion" TargetControlID="rfvSuggestion" runat="server" Width="120px"></ajaxToolkit:ValidatorCalloutExtender>
                        </td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td></td>
                        <td></td>
                    </tr>
                    <tr>
                        <td align="right" colspan="2" style=" padding-right:150px;"> <span class="ButtonInput"><span>
            <asp:Button ID="btnSubmit" runat="server" onclick="btnSubmit_Click" 
                TabIndex="2" Text="Submit" ValidationGroup="Blank" />
            </span></span>
                        </td>
                    </tr>
                </table>
            </asp:View>
        </asp:MultiView>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="btnCreateNew" EventName="click" />
        <asp:AsyncPostBackTrigger ControlID="btnShowCategory" EventName="click" />
        <asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="click" />**
        <asp:AsyncPostBackTrigger ControlID="ddlCategory" EventName="SelectedIndexChanged" />**</Triggers>
</asp:UpdatePanel>

When I change the dropdownlist ddlCategory, the dropdownlist ddlCategory loses its value and shows blank and also does not fire the SelectionIndexChanged event.

Answer 1

Controls inside update panel will trigger asynchronous call by default. You dont need to anything for that. And AsyncPostBackTrigger is for controls outside the UpdatePanel to trigger an asynchronous postback, which is not your case. So remove the following lines:

<asp:AsyncPostBackTrigger ControlID="btnCreateNew" EventName="click" />
<asp:AsyncPostBackTrigger ControlID="btnShowCategory" EventName="click" />
<asp:AsyncPostBackTrigger ControlID="btnSubmit" EventName="click" />
<asp:AsyncPostBackTrigger ControlID="ddlCategory"  EventName="SelectedIndexChanged" />

For a better understanding I would suggest reading AsyncPostBackTrigger vs PostBackTrigger and What is the different between AsyncPostBackTrigger & PostBackTrigger really?.