Comment obtenir une table rafraîchie sans actualiser la page entière?

Je développe une application web intranet ASP.NET qui est un moteur de test. Depuis que je suis un nouveau développeur ASP.NET, j'ai une table qui montre des commentaires reçus des utilisateurs et l'administrateur a la possibilité d'accepter ou de rejeter ces commentaires en utilisant le DropDownList.Comment obtenir une table rafraîchie sans actualiser la page entière?

Sous ce tableau, il y a un accordéon JQuery qui, lorsque l'administrateur clique dessus, verra une table avec les commentaires reçus au cours des trois derniers mois. Mais quand l'administrateur accepte ou rejette l'un des commentaires, puis clique sur l'accordéon, il verra la table, mais sans ce retour, même si le retour est l'un des commentaires soumis le mois dernier. Cependant, lorsque vous actualisez la page, puis cliquez sur l'accordéon, il le verra.

Alors, y a-t-il une fonctionnalité qui m'aidera à obtenir une table de rafraîchissement automatique en rafraîchissant la page entière? Toute aide s'il vous plaît?

ASP.NET code:

<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>

code-behind:

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(); 
     } 

    }

MISE À JOUR: je contrôle UpdatePanel pour obtenir une mise à jour partielle, et je <triggers>, mais J'ai l'erreur suivante et je ne sais pas pourquoi:

Impossible de trouver un événement nommé 'Clic' sur le contrôle associé 'GridView2' pour le déclencheur dans 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>

Source

2012-03-10 Ali Ahmed

Dans le déclencheur que vous avez mentionné l'événement Click, mais dans le code derrière vous avez seul événement DropDownList_SelectedIndexChanged.

Au lieu de cela, vous pouvez déclencher l'événement SelectedIndexChanged pour le DropDownList comme

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

Vous avez juste besoin de déclencher un événement valide dans le code sous-jacent. Mise à jour: Puisque le SelectedIndexChanged met à jour la base de données, vous devez donc actualiser le DataGrid pour remplir les données mises à jour.

Ajouter ce code ligne à la fin de la méthode SelectedIndexChanged:

GridView2.DataBind();

Source

2012-03-10 10:46:47 Maxali

Juste actualiser la grille après la mise à jour. Vous pouvez utiliser GridView2.DataBind() – Maxali

Merci. J'apprécie vraiment votre aide. –

utiliser le panneau de mise à jour ajax cela peut aider http://ajax.net-tutorials.com/controls/updatepanel-control/

Source

2012-03-10 09:30:00 Karthik

Merci pour votre aide. Mais voulez-vous dire que je devrais mettre l'Accordéon Jquery dans le contrôle UpdatePanel seulement? ou devrais-je utiliser les déclencheurs, aussi? –

Vous devriez utiliser des déclencheurs aussi .. – Karthik

Pourriez-vous s'il vous plaît voir ma question mise à jour ci-dessus? –

Comment obtenir une table rafraîchie sans actualiser la page entière?

Répondre

Questions connexes