How to refresh gridview without reloading whole page in ASP.net C#

Question

I have a user control in which there is a gridview and a button that is used to insert data, I want to update the grid view after the submission of the data without reloading the whole page. This is my user control's gridview code. <div id="ComplianceCommentDiv" style="border-width: 0px; border-spacing: 2px; border-style: solid; border-color: #abab9d; overflow: auto; vertical-align: top;">

        <asp:GridView ID="GridViewComplianceComment" runat="server" DataKeyNames="ID" AutoGenerateColumns="false" AllowPaging="false" Width="100%" CssClass="Gridtbl" CellPadding="2"
            OnRowDataBound="GridViewComplianceComment_RowDataBound" OnRowEditing="btnAdditionalNotes_Click">
            <Columns>
                <asp:TemplateField Visible="false">
                    <HeaderStyle HorizontalAlign="Left" />
                    <ItemStyle HorizontalAlign="Left" />
                    <ItemTemplate>
                        <asp:Label runat="server" ID="lblID" Text='<%#Eval("LogID") %>'></asp:Label>
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField HeaderText="ID" DataField="ID" Visible="false">
                    <ItemStyle VerticalAlign="Middle" HorizontalAlign="Left" />
                    <HeaderStyle VerticalAlign="Middle" HorizontalAlign="Left" />
                </asp:BoundField>
                <asp:BoundField HeaderText="Log ID" DataField="LogID">
                    <ItemStyle VerticalAlign="Middle" HorizontalAlign="Left" Width="100px" />
                    <HeaderStyle VerticalAlign="Middle" HorizontalAlign="Left" Width="100px" />
                </asp:BoundField>
                <asp:BoundField HeaderText="Comments" DataField="StatusComment">
                    <ItemStyle VerticalAlign="Middle" HorizontalAlign="Left" Wrap="true" />
                    <HeaderStyle VerticalAlign="Middle" HorizontalAlign="Left" />
                </asp:BoundField>
                <asp:BoundField HeaderText="Action" DataField="Action" Visible="true">
                    <ItemStyle VerticalAlign="Middle" HorizontalAlign="Left" Wrap="true" />
                    <HeaderStyle VerticalAlign="Middle" HorizontalAlign="Left" />
                </asp:BoundField>
                <asp:BoundField HeaderText="Date Added" DataField="CreatedDate">
                    <ItemStyle VerticalAlign="Middle" HorizontalAlign="Left" Width="100px" />
                    <HeaderStyle VerticalAlign="Middle" HorizontalAlign="Left" Width="100px" />
                </asp:BoundField>
                <asp:BoundField HeaderText="Created By" DataField="CreatedBy">
                    <ItemStyle VerticalAlign="Middle" HorizontalAlign="Left" Width="100px" />
                    <HeaderStyle VerticalAlign="Middle" HorizontalAlign="Left" Width="100px" />
                </asp:BoundField>
                <%--                 <asp:TemplateField HeaderText="" ItemStyle-Width="100">
        <ItemTemplate>
            <asp:Button ID="btnAdditionalNotes" runat="server" Text="Additional Notes" Visible= false OnClick="btnAdditionalNotes_Click"/>
        </ItemTemplate>
    </asp:TemplateField>--%>
            </Columns>
        </asp:GridView>
        <asp:Button ID="btnAdditionalNotes" runat="server" Text="Additional Notes" Visible="false" Style="float: right; border-left: 2px solid white; border-radius: 5px;" CssClass="bt-or" OnClick="btnAdditionalNotes_Click" />

        <asp:Panel runat="server" ID="Message" Visible="False">
            <div style="padding: 10px;">
                <asp:Label runat="server" ID="MessageText1" Text="No records found."></asp:Label>
            </div>
        </asp:Panel>
    </div>

this is my AJAX to save data and the C# code

function ShowAdditionalcommentsdiv(Logid, Status, AdditionalNoteComments) {
    //debugger;
    $.ajax({
        type: "POST",
        url: "/Search/DDetail.aspx/SaveAdditionalNote",
        data: JSON.stringify({
            logId: Logid,
            status: Status,
            additionalNoteComments: AdditionalNoteComments,
            comment: ""
        }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            //debugger;
            if (data.d != 0) {
                alert("Additional comment added");
                /*window.location.reload();*/

                //ReloadGridView()
            }
        }
    });
}

public static int SaveAdditionalNote(int logId, string status, string additionalNoteComments, string comment) { int response = 98169; try { DriverBasicInfoController _driverbasicinfocontroller = new DriverBasicInfoController(new DriverBasicInfoRepositary()); _driverbasicinfocontroller.UpdateComplianceStatusComment(logId, status, additionalNoteComments, comment); //return JsonConvert.SerializeObject(additionalNoteComments); response = logId; //ComplianceAdditionalCommentList(logId); } catch (Exception ex) { SafetyLogger.Logger.WriteErrorLog(SafetyPortal.Loggers.LogEntity.LogTypes.Exception, "Some Error Occured in getOwnerDetails", ex); response = 0; } return response; }

score 0 · Answer 1 · answered Apr 03 '23 at 17:01

Do you really think it going to be worth all that effort and time to do this?

Why not consider just wrapping the whole gridview in a update panel?

that way, you free to re-load the gv, but the page will "seem" like, and "look" like no post-back has occurred.

and to add a new row? I suggest NOT adding to the gv, but to open up a area on the form (even hide the gv) for editing/adding the one row. if user hits cancel, then you don't even need to update the gv anyway.

Try this working URL of mine - see how the editing works, and see if the fact of re-loading the gv is a issue, (hint: it not a problem).

http://www.kallal.ca/Website11/WebForm2

The above works/looks like this:

The re-fresh of the grid is simply not a issue. And the reason why is that I just wrapped the gridview inside of a update panel.

So, give the above link a try - come back and tell us here that the fact of the gridview being re-loaded (refreshed) from code behind (server side) is a issue?

It's not really. so, you can save a boatload of work here - consider a update panel for that grid view.

How to refresh gridview without reloading whole page in ASP.net C#

1 Answers1