如何在客户端 JavaScript 中侦听服务器（代码隐藏）所做的 DOM 更改？ （ASP.NET Framework 4.8 Web 应用程序）

Question

Context

I am working on a ASP.NET Framework 4.8 web application.

My Problem

I need to run a JavaScript function each time the server (code behind) changes the DOM, in this case adds- or removes rows from a Telerik RadGrid. I need some kind of listener on the client side or if there is a way in ASP.NET Framework 4.8 to notify the client.

Workflow and Steps

1: User clicks an "Add item"/"Remove item" link.

2: The server (code behind) gets notified with an OnClick event. It adds or removes the item to a RadGrid.

3: Now the JavaScript needs to know when the server (code behind) is done adding or removing that item. How is this achieved?

Code

the .ascx code containing the RadGrid that the user selects items from:

<telerik:RadGrid ID="rgPlayers" CssClass="data-table bottomSpace" runat="server" AutoGenerateColumns="False" Skin="Metro" Height="288px"
                            ForeColor="#333333" CellPadding="4" ShowFooter="false" GridLines="None" AllowSorting="true"
                            OnSortCommand="rgPlayers_Sorting" OnNeedDataSource="rgPlayers_NeedDataSource" OnItemDataBound="rgPlayers_RowDataBound"
                             onkeydown="gridKeyDown(event);">
                            <ClientSettings Selecting-AllowRowSelect="true" EnablePostBackOnRowClick="false" AllowKeyboardNavigation="true">
                                <KeyboardNavigationSettings EnableKeyboardShortcuts="false" AllowSubmitOnEnter="false" AllowActiveRowCycle="true" />
                                <Scrolling SaveScrollPosition="true" AllowScroll="true" UseStaticHeaders="true"></Scrolling>
                            </ClientSettings>
                            <MasterTableView ShowHeadersWhenNoRecords="true" DataKeyNames="ToPlsyer, PlayerNr ">
                                <Columns>
                                    <telerik:GridTemplateColumn HeaderStyle-Width="150px">
                                        <HeaderTemplate>
                                            <table id="tablePlayerNr">
                                                <tr>
                                                    <td>
                                                        <asp:LinkButton ID="lbPlayerNumber" CommandName="Sort" CommandArgument="PlayerNr" runat="server" Text="<%$Resources:PlayerNr%>"></asp:LinkButton>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <asp:TextBox ID="tbPlayerNumberSearch" runat="server" CssClass="rightSpace" onkeypress="return tbPlayerNumberSearch()"></asp:TextBox>
                                                    </td>
                                                </tr>
                                            </table>
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="lbLinkedPlayerNumber" runat="server" Text='<%# Bind("PlayerNr") %>'></asp:Label>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>

                                    <telerik:GridTemplateColumn HeaderStyle-Width="250px">
                                        <HeaderTemplate>
                                            <table id="tablePlayerDesc">
                                                <tr>
                                                    <td>
                                                        <asp:LinkButton ID="lbDescription" CommandName="Sort" CommandArgument="PlayerDescription" runat="server" Text="<%$Resources:Global, Description%>"></asp:LinkButton>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td>
                                                        <asp:TextBox ID="tbDescriptionSearch" runat="server" CssClass="rightSpace" onkeypress="return tbDescriptionSearch()"></asp:TextBox>
                                                    </td>
                                                </tr>
                                            </table>
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="lbLinkedPlayerDescription" runat="server" Text='<%# Bind("PlayerDescription") %>'></asp:Label>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridNumericColumn DataFormatString="{0:F0}" HeaderStyle-Width="80px" ItemStyle-Width="80px" DataField="BalanceAvailable" HeaderText="<%$Resources:BalanceAvailable%>" AllowSorting="false"></telerik:GridNumericColumn>
                                    <telerik:GridTemplateColumn HeaderStyle-Width="100px" ItemStyle-Width="100px">
                                        <ItemTemplate>
                                            <asp:LinkButton ID="lbPlayerAdd" runat="server" Text="<%$ Resources:Global, Add%>" OnClick="btnAddLinkedPlayer_Click"></asp:LinkButton>
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                </Columns>
                            </MasterTableView>
                        </telerik:RadGrid>

The RadGrid taht the selected items are added to- or removed from when the user selects an item:

<telerik:RadGrid ID="rgPlayers" CssClass="data-table bottomSpace" runat="server" AutoGenerateColumns="False" Skin="Metro" Height="200px" TabIndex="-1"
                            ForeColor="#333333" CellPadding="4" ShowFooter="false" GridLines="None" AllowAutomaticUpdates="true" AllowSorting="false"
                            OnItemDataBound="rgPlayers_RowDataBound" OnPreRender="rgPlayers_PreRender">
                            <ClientSettings Selecting-AllowRowSelect="true" Scrolling-SaveScrollPosition="true" Scrolling-AllowScroll="true" Scrolling-UseStaticHeaders="true">
                            </ClientSettings>
                            <MasterTableView ShowHeadersWhenNoRecords="true" TableLayout="Fixed" DataKeyNames="RowId">
                                <Columns>
                                    <telerik:GridBoundColumn DataField="RowId" />
                                    <telerik:GridBoundColumn DataField="SharedQuantity" />
                                    <telerik:GridBoundColumn HeaderStyle-Width="120px" DataField="PlayerNr" HeaderText="<%$Resources:PlayerNr%>" ReadOnly="True" />
                                    <telerik:GridBoundColumn HeaderStyle-Width="100%" ItemStyle-Width="100%" DataField="PlayerDescription" HeaderText="<%$Resources:Global, Description%>" ReadOnly="True" />
                                    <telerik:GridTemplateColumn HeaderStyle-Width="100px" ItemStyle-Width="100px">
                                        <HeaderTemplate>
                                            <asp:Label ID="lbHeaderQuantityText" runat="server" Text="<%$Resources:Global, Quantity%>"></asp:Label>
                                        </HeaderTemplate>
                                        <ItemTemplate>
                                            <asp:Label ID="lbQuantity" runat="server" Text='<%# Bind("Quantity") %>' CssClass="float-left" />
                                            <asp:ImageButton ID="btnAddQty" OnClick="btnAddQty_Click" CommandArgument='<%# Eval("RowId","{0}") %>' Height="18px" Width="18px" runat="server" CssClass="leftSpace float-left" ImageUrl="~/Images/plus.png" />
                                            <asp:ImageButton ID="btnRemoveQty" OnClick="btnRemoveQty_Click" CommandArgument='<%# Eval("RowId","{0}") %>' Height="18px" Width="18px" runat="server" CssClass="leftSpace float-left" ImageUrl="~/Images/minus.png" />
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>

                                    <telerik:GridNumericColumn HeaderStyle-Width="60px" ItemStyle-Width="60px" FooterStyle-HorizontalAlign="Right" HeaderStyle-HorizontalAlign="Right" ItemStyle-HorizontalAlign="Right" DataField="PriceInclVat" DataFormatString="{0:F2}" HeaderText="<%$Resources:Global, UnitPriceColumn%>" ReadOnly="True" />
                                    <telerik:GridNumericColumn HeaderStyle-Width="75px" ItemStyle-Width="75px" DataField="Balance" DataFormatString="{0:F0}" HeaderText="<%$Resources:BalanceAvailable%>" ReadOnly="True" />

                                    <telerik:GridTemplateColumn HeaderText="<%$Resources:ToPlsyer%>" HeaderStyle-Width="100%" ItemStyle-Width="100%" UniqueName="PlayerNr" DataField="ToPlsyer">
                                        <ItemTemplate>
                                            <telerik:RadTextBox runat="server" CssClass="integer" Text='<%#Eval("ToPlsyer") %>' OnTextChanged="OnTextChanged" AutoPostBack="True" ID="MainPlayerTextbox" />
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>

                                    <telerik:GridTemplateColumn HeaderStyle-Width="60px" ItemStyle-Width="80px">
                                        <ItemTemplate>
                                            <asp:LinkButton ID="lbRemove" CssClass="" runat="server" Text="<%$ Resources:Global, Delete%>" CommandArgument='<%# Eval("RowId","{0}") %>' OnClick="btnRemovePlayerItem_Click" />
                                        </ItemTemplate>
                                    </telerik:GridTemplateColumn>
                                </Columns>
                            </MasterTableView>
                        </telerik:RadGrid>

Method called in code behind when an "Add item" or "Remove item" link is clicked:

        protected async void btnAddLinkedPlayer_Click(object sender, EventArgs e)
        {
            ResetUnlinkedPlayerHtml();
            HideSearchPlayerhWarning();
            Player resultPlayer = null;
            string toPlayer = (string)((GridDataItem)((Control)sender).BindingContainer).GetDataKeyValue(nameof(Player.ToPlsyer));
            string playerNr = (string)((GridDataItem)((Control)sender).BindingContainer).GetDataKeyValue(nameof(Player.PlayerNr));

            if (!string.IsNullOrEmpty(playerNr))
            {
                resultPlayer = LinkedPlayers.Find(player => player.PlayerNr == playerNr);
            }

            if (resultPlayer != null)
            {
                PlayerOrderRow matchPlayer = PlayerOrderRows.Find(playerOrderRow => playerOrderRow.PlayerNr == resultPlayer.PlayerNr && playerOrderRow.ToPlsyer == toPlayer && resultPlayer.PlayerDescription == playerOrderRow.PlayerDescription && playerOrderRow.Unlinked == false);
                if (matchPlayer == null)
                {

                    try
                    {
                        resultPlayer.PriceInclVat = await GetPriceForPlayer(playerNr, 1, GetSetting().UserInformation, ddlDeliveryWH.SelectedItem.Value);
                    }
                    catch (Exception ex)
                    {
                        SetUserMessage(ex);
                    }

                    PlayerOrderRow row = new PlayerOrderRow(resultPlayer.PlayerNr, resultPlayer.PlayerDescription, 1, resultPlayer.BalanceAvailable, toPlayer, IsThisAWarrantyCase || IsThisAGoodwillCase ? 0 : resultPlayer.PriceInclVat, resultPlayer.PriceInclVat);
                    PlayerOrderRows.Add(row);
                }
                else
                {
                    matchPlayer.Quantity += 1;
                }

                BindSelectedPlayerOrderRowsToGrid(PlayerOrderRows, SessionConstants.CurrentPlayerNumber.TrimToEmpty(), SessionConstants.RepurchaseCaseReceipt);
            }
        }

Question and Final Thoughts

Is there any way for JavaScript on the client side to get notified when the server side (code behind) is done adding an item to the RadGrid?

Thanks!

Answer 1

What do you mean notified that the server code is done?

You can't run that server code behind as async. The event stub can CALL some other routine as async, but the server side code behind MUST ALWAYS 100% complete.

is there any way for JavaScript on the client side to get notified when the server side (code behind) is done

You already know!!! - if step one is to occur and run that event code behind, then that is HOW you know!!!

The code behind can't wait, nor can it run async. Your code behind MUST ALWAYS 100% finish its code, and then the whole web page is sent down back to the client side. the client side loads that whole page again, and then any JavaScript code such as page.load on OnReady starts running again.

So when you click a button? The WHOLE page travels up to the web server. The web server then loads - gets that class object and initializes it from scratch. (the values and variables in the code start from scratch each time you click a button and post- bck).

Your code behind then starts running and can ONLY modify that page in the very short time while the WHOLE web page is up on the server. When that code is done, the page THEN travels back to the client side.

Your code behind NEVER directly interacts with the user. It ONLY can modify the web page during that short time or so called "round trip" in which the page is now up on the server. This is also why your button click event code can't be async. The code behind can change things on the web page, but the user will not see anything until such time the code behind is 100% finished. When that code behind is 100% done?

THEN AND ONLY then does that whole web page now make the trip back to the client side. Then client side renders the results, and the JavaScript routines are re-loaded and also start running.

Now the JavaScript needs to know when the server (code behind) is done adding or removing that item. How is this achieved?

Because step one occurred - that's how you know. If step one never occurs, then nothing else will occur.

There is no possible way for the code behind to modify anything on the web page unless the page MAKES the round trip up to the server. And that code behind can thus only change things in that very small window while the web page is up on the server.

So, you know if something changed if step 1 occurs and that post back occurs. The JavaScript running on client side? It not going to know until that post back and web page returns back to the client. and when that occurs, the JavaScript is now starting over again - and only has the contents of the current page that just came back from the server - not the previous page and data - it is long gone. So there not a way to detect any changes, since you just sent a fresh whole new page back down to the client.

Now you can on button click do a ajax call. That means NO round trip, and no page post back. But then again, when you make such calls, then that code behind can't update the web page. You would have to write JavaScript code to get the results and re-plot the grid client side. but I don't see why just using code behind and the button click as the trigger to "assume" that the grid will have changed. I mean, unless the user clicks a button, then the grid not going to change, is it?