¿Cómo obtener una tabla actualizada sin actualizar toda la página?

I am developing an ASP.NET intranet web application which is a Quiz Engine. Since I am a new ASP.NET developer, I have a table that shows some feedback received from the users and the admin has the ability to accept or reject these feedback using the DropDownList.

Under this table, there is a JQuery Accordion that when the Admin clicks on it, he will see a table with the received feedback for the last three months. But when the admin accepts or rejects one of the feedback and then clicks on the Accordion, he will see the that table but without that feedback even if the feedback is one of the feedbacks submitted last month. However, when you refresh the page and then clicks on the Accordion, he will see it.

So is there any functionality that will help me to get an auto-refresh table with refreshing the whole page? Any help please?

Código ASP.NET:

<asp:GridView ID="GridView1" runat="server" AllowPaging="True" 
                        AllowSorting="True" AutoGenerateColumns="False" DataKeyNames="ID" 
                        width="950px" CssClass="mGrid"
                        AlternatingRowStyle-CssClass="alt" 
                        RowStyle-HorizontalAlign="Center" 
                        DataSourceID="SqlDataSource1" 
                        OnRowDataBound="GridView1_RowDataBound" >
            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
            <HeaderStyle Font-Bold = "true" ForeColor="Black" Height="20px"/> 
            <Columns>
                <asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False" 
                    ReadOnly="True" SortExpression="ID" />
                <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
                <asp:BoundField DataField="Description" HeaderText="Description" 
                    SortExpression="Description" />
                <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                <asp:BoundField DataField="Username" HeaderText="Username" 
                    SortExpression="Username" />
                <asp:BoundField DataField="DivisionShortcut" HeaderText="Division" 
                    SortExpression="DivisionShortcut" />
                <asp:TemplateField HeaderText="Status">
                    <ItemTemplate>
                        <asp:DropDownList ID="DropDownList" runat="server" DataSourceID="SqlDataSource2"
                                          Font-Bold="True" ForeColor="#006666" AppendDataBoundItems="false" 
                                          DataTextField="Status" DataValueField="ID" AutoPostBack="true" 
                                          OnDataBound="DropDownList_DataBound" OnSelectedIndexChanged ="DropDownList_SelectedIndexChanged">
                        </asp:DropDownList>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
            ConnectionString="<%$ ConnectionStrings:testConnectionString %>" 
            SelectCommand="SELECT     dbo.SafetySuggestionsLog.ID, dbo.SafetySuggestionsLog.Title, dbo.SafetySuggestionsLog.Description, dbo.employee.Name, dbo.SafetySuggestionsLog.Username, 
                      dbo.Divisions.DivisionShortcut
FROM         dbo.employee INNER JOIN
                      dbo.SafetySuggestionsLog ON dbo.employee.Username = dbo.SafetySuggestionsLog.Username INNER JOIN
                      dbo.Divisions ON dbo.employee.DivisionCode = dbo.Divisions.SapCode"
                      FilterExpression="[DivisionShortcut] like '{0}%'">

                      <FilterParameters>
                        <asp:ControlParameter ControlID="ddlDivision" Name="DivisionShortcut" 
                                                 PropertyName="SelectedValue" Type="String" />
                    </FilterParameters>
        </asp:SqlDataSource>

        <%--For the DropDownList--%>
        <asp:SqlDataSource ID="SqlDataSource2" runat="server"
                            ConnectionString="<%$ ConnectionStrings:testConnectionString %>" 
                            SelectCommand="SELECT * FROM [SafetySuggestionsStatus]">
        </asp:SqlDataSource>

        <%--Filtering by Division--%>
        <asp:SqlDataSource ID="sqlDataSourceDivision" runat="server" 
        ConnectionString="<%$ ConnectionStrings:testConnectionString %>" 
        SelectCommand="SELECT [DivisionShortcut] FROM [Divisions]"></asp:SqlDataSource>

<dl id="jfaq">
            <br />
                <dt>Safety Suggestions List (for the last three months)</dt>
                    <dd> 
                        <br />
                        <asp:Panel ID="Panel1" runat="server">
                        <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" 
                                      AllowSorting="True" CssClass="mGrid"
                                      AlternatingRowStyle-CssClass="alt" 
                                      RowStyle-HorizontalAlign="Center" 
                                      DataSourceID="SqlDataSource4">
                            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                            <HeaderStyle Font-Bold = "true" ForeColor="Black" Height="20px"/> 
                            <Columns>
                                <asp:BoundField DataField="SubmittedMonth" HeaderText="Submitted Month" 
                                    SortExpression="SubmittedMonth" ReadOnly="True" />
                                <asp:BoundField DataField="DivisionShortcut" HeaderText="Division" 
                                    SortExpression="DivisionShortcut" />
                                <asp:BoundField DataField="Username" HeaderText="Username" 
                                    SortExpression="Username" />
                                <asp:BoundField DataField="Name" HeaderText="Name" 
                                    SortExpression="Name" />
                                <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
                                <asp:BoundField DataField="Description" HeaderText="Description" 
                                    SortExpression="Description" />
                                <asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" />
                                <asp:BoundField DataField="Status" HeaderText="Status" 
                                    SortExpression="Status" />
                            </Columns>
                                <RowStyle HorizontalAlign="Center"></RowStyle>
                        </asp:GridView>
                        </asp:Panel>
                        <asp:SqlDataSource ID="SqlDataSource4" runat="server" 
                            ConnectionString="<%$ ConnectionStrings:testConnectionString %>" SelectCommand="SELECT     TOP (100) PERCENT LEFT(DATENAME(month, dbo.SafetySuggestionsLog.DateSubmitted), 3) + '-' + DATENAME(year, dbo.SafetySuggestionsLog.DateSubmitted) 
                      AS SubmittedMonth, dbo.Divisions.DivisionShortcut, dbo.SafetySuggestionsLog.Username, dbo.employee.Name, dbo.SafetySuggestionsLog.Title, 
                      dbo.SafetySuggestionsLog.Description, dbo.SafetySuggestionsType.Type, dbo.SafetySuggestionsStatus.Status
FROM         dbo.Divisions INNER JOIN
                      dbo.employee ON dbo.Divisions.SapCode = dbo.employee.DivisionCode INNER JOIN
                      dbo.SafetySuggestionsLog ON dbo.employee.Username = dbo.SafetySuggestionsLog.Username INNER JOIN
                      dbo.SafetySuggestionsType ON dbo.SafetySuggestionsLog.TypeID = dbo.SafetySuggestionsType.ID INNER JOIN
                      dbo.SafetySuggestionsStatus ON dbo.SafetySuggestionsLog.StatusID = dbo.SafetySuggestionsStatus.ID
WHERE     (DATEDIFF(month, dbo.SafetySuggestionsLog.DateSubmitted, GETDATE()) &lt; 3)
ORDER BY dbo.SafetySuggestionsLog.DateSubmitted DESC">
                       </asp:SqlDataSource>

                       <asp:Button ID="btnPrint" runat="server" Text="Print" OnClick="btnPrint_Click" />
                       </dd>
                 </dl>

Código detrás:

protected void DropDownList_SelectedIndexChanged(object sender, EventArgs e)
    {
        DropDownList ddl = (DropDownList)sender;
        int suggestionStatus = int.Parse(ddl.SelectedValue);
        GridViewRow row = (GridViewRow)ddl.NamingContainer;
        string strID = GridView1.DataKeys[row.RowIndex]["ID"].ToString();
        int ID = Int32.Parse(strID);
        //For inserting the status in the database
        string connString = "Data Source=localhost\\sqlexpress;Initial Catalog=psspdbTest;Integrated Security=True";
        string updateCommand = "UPDATE SafetySuggestionsLog  SET [StatusID] = @StatusID WHERE [ID] = @ID";
        using (SqlConnection conn = new SqlConnection(connString))
        {
            conn.Open();
            using (SqlCommand cmd = new SqlCommand(updateCommand, conn))
            {
                cmd.Parameters.Clear();
                cmd.Parameters.AddWithValue("@StatusID", suggestionStatus);
                cmd.Parameters.AddWithValue("@ID", ID);
                cmd.ExecuteNonQuery();
            }
            conn.Close();
        }

    }

ACTUALIZACIÓN: I used the UpdatePanel control to get a partial update, and I used <triggers>, but I got the following error and I don't know why:

Could not find an event named 'Click' on associated control 'GridView2' for the trigger in UpdatePanel 'UpdatePanel1'.

<asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="GridView2" EventName="Click" />
    </Triggers>
    <ContentTemplate>
       <dl id="jfaq">
            <br />
                <dt>Safety Suggestions List (for the last three months)</dt>
                    <dd> 
                        <br />
                        <asp:Panel ID="Panel1" runat="server">
                        <asp:GridView ID="GridView2" runat="server" AutoGenerateColumns="False" 
                                      AllowSorting="True" CssClass="mGrid"
                                      AlternatingRowStyle-CssClass="alt" 
                                      RowStyle-HorizontalAlign="Center" 
                                      DataSourceID="SqlDataSource4">
                            <AlternatingRowStyle BackColor="White" ForeColor="#284775" />
                            <HeaderStyle Font-Bold = "true" ForeColor="Black" Height="20px"/> 
                            <Columns>
                                <asp:BoundField DataField="SubmittedMonth" HeaderText="Submitted Month" 
                                    SortExpression="SubmittedMonth" ReadOnly="True" />
                                <asp:BoundField DataField="DivisionShortcut" HeaderText="Division" 
                                    SortExpression="DivisionShortcut" />
                                <asp:BoundField DataField="Username" HeaderText="Username" 
                                    SortExpression="Username" />
                                <asp:BoundField DataField="Name" HeaderText="Name" 
                                    SortExpression="Name" />
                                <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" />
                                <asp:BoundField DataField="Description" HeaderText="Description" 
                                    SortExpression="Description" />
                                <asp:BoundField DataField="Type" HeaderText="Type" SortExpression="Type" />
                                <asp:BoundField DataField="Status" HeaderText="Status" 
                                    SortExpression="Status" />
                            </Columns>
                                <RowStyle HorizontalAlign="Center"></RowStyle>
                        </asp:GridView>
                        </asp:Panel>
                        <asp:SqlDataSource ID="SqlDataSource4" runat="server" 
                            ConnectionString="<%$ ConnectionStrings:testConnectionString %>" SelectCommand="SELECT     TOP (100) PERCENT LEFT(DATENAME(month, dbo.SafetySuggestionsLog.DateSubmitted), 3) + '-' + DATENAME(year, dbo.SafetySuggestionsLog.DateSubmitted) 
                      AS SubmittedMonth, dbo.Divisions.DivisionShortcut, dbo.SafetySuggestionsLog.Username, dbo.employee.Name, dbo.SafetySuggestionsLog.Title, 
                      dbo.SafetySuggestionsLog.Description, dbo.SafetySuggestionsType.Type, dbo.SafetySuggestionsStatus.Status
FROM         dbo.Divisions INNER JOIN
                      dbo.employee ON dbo.Divisions.SapCode = dbo.employee.DivisionCode INNER JOIN
                      dbo.SafetySuggestionsLog ON dbo.employee.Username = dbo.SafetySuggestionsLog.Username INNER JOIN
                      dbo.SafetySuggestionsType ON dbo.SafetySuggestionsLog.TypeID = dbo.SafetySuggestionsType.ID INNER JOIN
                      dbo.SafetySuggestionsStatus ON dbo.SafetySuggestionsLog.StatusID = dbo.SafetySuggestionsStatus.ID
WHERE     (DATEDIFF(month, dbo.SafetySuggestionsLog.DateSubmitted, GETDATE()) &lt; 3)
ORDER BY dbo.SafetySuggestionsLog.DateSubmitted DESC">
                       </asp:SqlDataSource>

                       <asp:Button ID="btnPrint" runat="server" Text="Print" OnClick="btnPrint_Click" />
                       </dd>
                 </dl>

       </ContentTemplate>
    </asp:UpdatePanel>

preguntado el 10 de marzo de 12 a las 09:03

2 Respuestas

In the trigger you mentioned Click event, but in the code behind you have only DropDownList_SelectedIndexChanged event.

Instead you can trigger the SelectedIndexChanged event for the DropDownList as

    <asp:AsyncPostBackTrigger ControlID="DropDownList" EventName="SelectedIndexChanged" />

You just need to trigger a valid event in the code behind.

Update: Since the SelectedIndexChanged updates the database, so you need to refresh the DataGrid to populate the updated data.

Add this line code at the end of SelectedIndexChanged method:

    GridView2.DataBind();

respondido 10 mar '12, 11:03

Just refresh the Grid after updating. You may use GridView2.DataBind() - Maxali

Gracias. Realmente aprecio tu ayuda. - Ali Ahmed

respondido 10 mar '12, 09:03

Thanks for your help. But do you mean that I should put the Jquery Accordion inside the UpdatePanel control only? or should I use the Triggers, too? - Ali Ahmed

@AliAhmed change the control id in trigger to the name of control which causes grid view binding i think in your case its the drop downlist..and change the event name to SelectedIndexChanged - Karthik

Gracias. Realmente aprecio tu ayuda. - Ali Ahmed

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.