ASP.NET C#中无需刷新整页更新GridView的实现方案

我有一个包含GridView和数据插入按钮的用户控件，希望在提交数据后无需刷新整页即可更新GridView内容。

现有代码 #

GridView控件代码 #

<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" ClientIDMode="Static">
        <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="评论内容" DataField="StatusComment">
                <ItemStyle VerticalAlign="Middle" HorizontalAlign="Left" Wrap="true" />
                <HeaderStyle VerticalAlign="Middle" HorizontalAlign="Left" />
            </asp:BoundField>
            <asp:BoundField HeaderText="操作" DataField="Action" Visible="true">
                <ItemStyle VerticalAlign="Middle" HorizontalAlign="Left" Wrap="true" />
                <HeaderStyle VerticalAlign="Middle" HorizontalAlign="Left" />
            </asp:BoundField>
            <asp:BoundField HeaderText="添加时间" DataField="CreatedDate">
                <ItemStyle VerticalAlign="Middle" HorizontalAlign="Left" Width="100px" />
                <HeaderStyle VerticalAlign="Middle" HorizontalAlign="Left" Width="100px" />
            </asp:BoundField>
            <asp:BoundField HeaderText="添加人" 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="添加附加评论" 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" ClientIDMode="Static">
        <div style="padding: 10px;">
            <asp:Label runat="server" ID="MessageText1" Text="暂无记录"></asp:Label>
        </div>
    </asp:Panel>
</div>

AJAX提交代码 #

function ShowAdditionalcommentsdiv(Logid, Status, AdditionalNoteComments) {
    $.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) {
            if (data.d != 0) {
                alert("附加评论已添加");
                // 加载最新评论并更新表格
                loadComplianceComments(Logid);
            }
        }
    });
}

C#保存数据方法 #

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);
        response = logId;
    }
    catch (Exception ex)
    {
        SafetyLogger.Logger.WriteErrorLog(SafetyPortal.Loggers.LogEntity.LogTypes.Exception, "保存附加评论时出错", ex);
        response = 0;
    }
    return response;
}

无刷新更新GridView的实现步骤 #

1. 新增获取最新评论数据的Web方法 #

在DDetail.aspx.cs中添加静态Web方法，用于获取指定LogID的最新评论列表：

[WebMethod]
public static List<ComplianceComment> GetComplianceComments(int logId)
{
    try
    {
        DriverBasicInfoController controller = new DriverBasicInfoController(new DriverBasicInfoRepositary());
        // 替换为实际获取评论列表的业务逻辑
        return controller.GetComplianceCommentList(logId);
    }
    catch (Exception ex)
    {
        SafetyLogger.Logger.WriteErrorLog(SafetyPortal.Loggers.LogEntity.LogTypes.Exception, "获取评论列表时出错", ex);
        return new List<ComplianceComment>();
    }
}

// 定义对应的数据实体类（根据实际数据结构调整）
public class ComplianceComment
{
    public int ID { get; set; }
    public int LogID { get; set; }
    public string StatusComment { get; set; }
    public string Action { get; set; }
    public DateTime CreatedDate { get; set; }
    public string CreatedBy { get; set; }
}

2. 编写前端渲染函数 #

添加用于加载并渲染评论数据的JS函数，将返回的JSON数据动态生成表格行：

// 加载并渲染评论数据到GridView
function loadComplianceComments(logId) {
    $.ajax({
        type: "POST",
        url: "/Search/DDetail.aspx/GetComplianceComments",
        data: JSON.stringify({ logId: logId }),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data) {
            var grid = $("#GridViewComplianceComment");
            var tbody = grid.find("tbody");
            tbody.empty();

            if (data.d.length === 0) {
                // 显示无数据提示
                $("#Message").show();
                grid.hide();
                return;
            }

            $("#Message").hide();
            grid.show();

            // 遍历数据生成表格行
            $.each(data.d, function (index, item) {
                var row = $("<tr></tr>");
                // 对应GridView的列顺序（包含隐藏列）
                row.append($("<td style='display:none;'></td>").text(item.LogID));
                row.append($("<td style='display:none;'></td>").text(item.ID));
                row.append($("<td style='vertical-align:middle; text-align:left; width:100px;'></td>").text(item.LogID));
                row.append($("<td style='vertical-align:middle; text-align:left; white-space:pre-wrap;'></td>").text(item.StatusComment));
                row.append($("<td style='vertical-align:middle; text-align:left; white-space:pre-wrap;'></td>").text(item.Action));
                row.append($("<td style='vertical-align:middle; text-align:left; width:100px;'></td>").text(item.CreatedDate));
                row.append($("<td style='vertical-align:middle; text-align:left; width:100px;'></td>").text(item.CreatedBy));
                tbody.append(row);
            });
        }
    });
}

内容的提问来源于stack exchange，提问作者Chandra Shekhar Azad