Update panel refresh ASP.Net gridview

Question

I have a ASP.Net Grid view inside a Update Panel. I show the data in a Modalpopup extender. I am also using entity framework. The code below works but I need to ensure that I am using the best practices

The ASP.Net Gridview

 <asp:ScriptManager ID="ScriptManager1" runat="server">   </asp:ScriptManager>
 <asp:UpdatePanel ID="UpdatePanel1"  UpdateMode="Conditional" runat="server">
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="grdOutput" />
        <asp:AsyncPostBackTrigger ControlID="btnDelete"  />
        <asp:AsyncPostBackTrigger ControlID="btnSave"  />
    </Triggers>
    <ContentTemplate>
        <asp:Button ID="btnNew" OnClick="btnNew_Click" Text=" new"  runat="server"/>
            <asp:GridView ID="grdOutput" runat="server" Width="200px" AutoGenerateColumns="False"  DataKeyNames="Id" >
                <Columns>
                    <asp:BoundField DataField="Id" HeaderText="Id" ReadOnly="True" SortExpression="Id" />
                    <asp:BoundField DataField="Name" HeaderText="Name" SortExpression="Name" />
                    <asp:TemplateField HeaderText="Edit">
                        <ItemTemplate>
                            <asp:LinkButton ID="lnkEdit" runat="server" OnClick="lnkEdit_Click">Edit</asp:LinkButton>
                        </ItemTemplate>
                    </asp:TemplateField>
                </Columns>
            </asp:GridView>
         <asp:EntityDataSource ID="EntityDataSource1" runat="server" ConnectionString="name=FMPEntities" DefaultContainerName="FMPCommsEngEntities" EnableFlattening="False" EntitySetName="OutputTypes" EntityTypeFilter="OutputType">
         </asp:EntityDataSource>
         <asp:Panel ID="pnlEdit" runat="server" CssClass="modalPopup" style = "display:none">
     <table >
        <tr><td colspan="2"> Output Type Details</td></tr>
        <tr>
            <td>
                <asp:Label ID="lblOutputTypeID" runat="server" Text="ID"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtOutPutTypeID" runat="server"></asp:TextBox>
            </td>
       </tr>
       <tr>
            <td>
                <asp:Label ID="lblName" runat="server" Text="Name"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtOutputTypeName" runat="server"></asp:TextBox>
            </td>

       </tr>
       <tr>
           <td> <asp:Button ID="btnSave" runat="server" OnClick="Save" Text="Save" /></td>
           <td><asp:Button ID="btnCancel" runat="server" Text="Cancel"  /></td>
           <td><asp:Button Id="btnDelete" runat="server" Text="Delete" OnClick="Delete" /></td>
       </tr>
    </table>
</asp:Panel> 
<asp:Panel ID="pnlAdd" runat="server" CssClass="modalPopup" style = "display:none">
    <table >
        <tr><td colspan="2"> Output Type Details</td></tr>
        <tr>
            <td>
                <asp:Label ID="lblADDName" runat="server" Text="Name"></asp:Label>
            </td>
            <td>
                <asp:TextBox ID="txtAddName" runat="server"></asp:TextBox>
            </td>
        </tr>
       <tr>
           <td> <asp:Button ID="btnADDSave" runat="server" OnClick="Insert" Text="Save" /></td>
           <td><asp:Button ID="btnCancel1" runat="server" Text="Cancel"  /></td>
       </tr>
    </table>
</asp:Panel>
<cc1:ModalPopupExtender ID="popup" runat="server" CancelControlID="btnCancel" DropShadow="false"                                     PopupControlID="pnlEdit" TargetControlID = "link" BackgroundCssClass="modalBackground">
</cc1:ModalPopupExtender>
<cc1:ModalPopupExtender ID="AddPopup" runat="server" CancelControlID="btnCancel1" DropShadow="true" PopupControlID="pnlAdd" TargetControlID = "Addlink" BackgroundCssClass="modalBackground" >     </cc1:ModalPopupExtender> 
</ContentTemplate>
</asp:UpdatePanel>

I need to refresh the gridview after the insert , update and delete.

Below is the code I used. Is there a better way of refreshing the datasource. I set the gridview datasource to an entitydatasource and databind it after the after each save, insert and delete.

Protected Sub Save(sender As Object, e As EventArgs)
    UpdateOutputType(Integer.Parse(txtOutPutTypeID.Text), txtOutputTypeName.Text)
    grdOutput.DataSource = EntityDataSource1
    grdOutput.DataBind()

End Sub
Protected Sub Delete(sender As Object, e As EventArgs)
    DeleteOutputType(Integer.Parse(txtOutPutTypeID.Text))
    grdOutput.DataSource = EntityDataSource1
    grdOutput.DataBind()
End Sub

I tried to use UpdatePanel1.update() but the gridview did not refresh .

What is the best way to refresh the gridview?.

This has nothing to do with Classic ASP. Please remove the tag. — Paul

ElimGarak ElimGarak · Accepted Answer · 2015-11-28T14:35:05

The UpdatePanel1.update() will not update your grid. The way you have it in your Save/Delete methods is correct. You need to rebind it. Since you have the update panel trigger coded the update panel refresh will happen automatically.

Update panel refresh ASP.Net gridview

1 Answers