DropdownList OnSelectedIndexChanged inside UpdatePanel

Question

I have an asp dropdownlist inside an update panel in my program. The function of OnSelectedIndexChanged event is working properly but the issue is the dropdownlist is not visible after post back. Following is my code.

                        <asp:UpdatePanel ID="updatePanel1" runat="server">
                         <ContentTemplate>
                         <div class="row cancel-paddings cancel-margins">
                                <div class="field">
                                 <asp:DropDownList ID="ddlDropdownSub1" EnableViewState="true" Visible="true"  runat="server" class="dropdown" OnSelectedIndexChanged="OnSelectedIndex_dropdownSub1" AutoPostBack="true"></asp:DropDownList>
                                </div>
                            </div>
                        <div class="card-content">
                            <div class="listview is-selectable custom-scroll-one" id="task-listview" data-tmpl="task-tmpl" data-dataset="demoTasks" tabindex="-1" role="listbox" aria-label="Tasks">
                                <ul role="presentation">
                                <asp:GridView ID="gvCaseCards" runat="server" AutoGenerateColumns="false">
                                <Columns>
                                    <asp:TemplateField >
                                        <ItemTemplate>
                                            <li  aria-posinset="1" aria-setsize="12" tabindex="0" class="centered-block" aria-selected="true">
                                            <asp:Label CssClass="listview-subheading" ID="lblCaseIdCaseCard" runat="server" Text=''></asp:Label><br />
                                            <asp:Label CssClass="listview-heading wrap-text" ID="lblDescCaseCard" runat="server" Text=''></asp:Label><br />
                                            <asp:Label CssClass="listview-subheading" ID="lblDueCaseCard" runat="server" Text=''></asp:Label><br /><br />
                                            </li>
                                        </ItemTemplate>
                                    </asp:TemplateField>
                                    </Columns>
                                </asp:GridView>
                                </ul>
                            </div>
                        </div>
                  </ContentTemplate>
            </asp:UpdatePanel>

In my OnSelectedIndex_dropdownSub1 function I could get values to gridview dynamically. My page load method is below.

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
    If Not IsPostBack Then
        Me.BindDataToDropDown1() 'fill data to dropdown 
        Me.BindDataToGridview() 'bind data to grid view
    End If
End Sub

Following is OnSelectedIndex_dropdownSub1 event

Protected Sub OnSelectedIndex_dropdownSub1(ByVal sender As Object, ByVal e As System.EventArgs) Handles ddlDropdownSub1.SelectedIndexChanged
    Me.BindDataToGridview()
End Sub

Following is my binddatatodropdown function

 Public Function BindDataToDropDown1()
    Dim ds As New DataSet
    Dim alUtil As New ALUtility
    Dim connString As String = AppSettings("conString")


    Using cnn As New SqlConnection(connString)
        cnn.Open()
        Using dad As New SqlDataAdapter("SELECT * FROM product", cnn)
            dad.Fill(ds)
        End Using
        cnn.Close()
    End Using
    ddlDropdownSub1.DataSource = ds
    ddlDropdownSub1.DataTextField = "product_name"
    ddlDropdownSub1.DataValueField = "product_id"
    ddlDropdownSub1.DataBind()

End Function

And BindDataToGrid function is bellow,

Public Function BindDataToGridview()
 Dim ds As New DataSet
    Dim alUtil As New ALUtility
    Dim connString As String = AppSettings("conString")

    Dim product_id As Integer = Convert.ToInt32(ddlDropdownSub1.SelectedValue)
    Using cnn As New SqlConnection(connString)
        cnn.Open()
        Using dad As New SqlDataAdapter(" Select * from Product Where product_id = " + product_id.ToString(), cnn)
            dad.Fill(ds)
        End Using
        cnn.Close()
    End Using
    gvCaseCards.DataSource = ds
    gvCaseCards.DataBind()

End Function

All functions are working properly except disappearance of the dropdown after postback.

Could anyone help me to solve that issue.

Answer 1

As far as I can see, there should be a couple of changes to the Update Panel. I really hate Update Panels generally, and think you should always try and use your own AJAX code.

First, I think you can just wrap the Gridview in the <ContentTemplate> tags, as that is only control which is being updated.

Then you need to add in a trigger, such as this:

<Triggers>
    <asp:AsyncPostBackTrigger ControlID="ddlDropdownSub1" EventName="SelectedIndexChanged" />
</Triggers>

This goes outside the <ContentTemplate> tags. I think you should also put in a UpdateMode="Conditional" on the UpdatePanel control.