如何根据驻留在 updatePanel 中的 DataGrid 中所做的行选择来更新控件 [DataGrid、TextBoxes 和标签]？

Posted 2023-02-22

【中文标题】如何根据驻留在 updatePanel 中的 DataGrid 中所做的行选择来更新控件 [DataGrid、TextBoxes 和标签]？

【英文标题】：How to update controls[DataGrid,TextBoxes and Label] based on a row selection made in DataGrid that resideds in a updatePanel?

【发布时间】：2011-08-22 10:54:18

【问题描述】：

我有一个网格 [Grid1]，当单击按钮 [搜索] 时构建它的 dataRows，我设法通过将其放置在 UpdatePanel 中来对其进行 Ajaxify，它工作正常。在 Ajaxifying Grid 1 之前，另一个 grid[Grid2] 和一些其他控件 [Text and Labels] 用于在单击 Grid 1 中的一行时填充/更新。

用于填充/更新网格 1 的 OnItemCommand 事件的 Grid2 和其他控件。它是 OnItemCommand 中将相关数据绑定到 Grid2 和其他控件的代码。

在我将 Grid 1 放入更新面板后，他们停止了更新。如果我将 Grid2 和其他控件放在同一个更新面板中，它会正常工作，但页面的设计方式是我不能将这些控件与第一个 Grid 放在同一个 UpdatePanel 中，也不打算使用另一个更新面板。

我希望我说得有道理。我是.Net的新手，所以请原谅。请在下面找到代码。

 <asp:ScriptManager EnablePartialRendering="true" ID="ScriptManager1" runat="server"></asp:ScriptManager>
     <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers ="True">
      <ContentTemplate>
       <asp:DataGrid ID="grdJobs" runat="server" AllowPaging="true" 
        AlternatingItemStyle-CssClass="gridAltItemStyle"
        AutoGenerateColumns="False" CellPadding="0" 
        DataKeyField="code"
        CssClass="datagridBox" 
        GridLines="horizontal" 
        PagerStyle-Mode="NumericPages"
        HeaderStyle-CssClass="gridHeaderStyle" 
        ItemStyle-CssClass="gridItemStyle"
        PagerStyle-CssClass="gridPagerStyle" 
        Width="445px" OnPageIndexChanged="grdJobs_PageIndexChanged" OnItemCreated="grdJobs_ItemCreated" OnItemCommand="grdJobs_ItemCommand"             OnItemDataBound="grdJobs_ItemDataBound">
         <Columns>
          <asp:BoundColumn  DataField="J_ID" HeaderText="Job"></asp:BoundColumn>
          <asp:BoundColumn  DataField="Contract" HeaderText="Contract" ReadOnly="True"></asp:BoundColumn>
          <asp:BoundColumn  DataField="J_Fault_Line1" HeaderText="Fault" ReadOnly="True"></asp:BoundColumn>
          <asp:BoundColumn  DataField="j_p_id" HeaderText="Fault" Visible="false" ></asp:BoundColumn>
          <asp:ButtonColumn Text="<img src=images/addFeedback.gif style=border: 0px; alt=Add Feedback>" ButtonType="LinkButton"  HeaderText="Add"                   CommandName="Load" ItemStyle-cssClass="Col_9_Item_2"></asp:ButtonColumn>
         </Columns>
        </asp:DataGrid>
       <asp:ImageButton ID="cmdLkp"  ImageUrl="Images/search.gif" runat="server" OnClick="cmdLkp_Click" />

       </ContentTemplate>
      </asp:UpdatePanel>

后面的代码中的代码停止工作

protected void grdJobs_ItemCommand(object source, DataGridCommandEventArgs e)
    

        if (e.CommandName == "Load")
        
            functionToBindDataToGrid2();
            functionToBindDataToOtherControls();
        


 protected void grdJobs_ItemDataBound(object sender, DataGridItemEventArgs e)
    
      e.Item.Attributes.Add("onclick", "javascript:__doPostBack('grdJobs$ctl" + ((Convert.ToInt32(e.Item.ItemIndex + 3).ToString("00"))) + "$ctl00','')");
     

【问题讨论】：

当您说要“强制回发”时，您的意思是在单击 Grid1 中的一行后，您希望 Grid1 在更新面板中做一些工作，然后页面执行完整的回发，并在重新加载页面时，Grid2 得到更新？

@Alison 请忽略强制回发位。在函数ToBindDataToGrid2() 中有一些代码行将数据绑定到Grid2，它们不工作，在我将Grid 1 放入UpdatePanel 之前它们工作。 Grid2 中的数据基于 Grid 1 中所做的选择[通过单击行]。如果您愿意，我也可以发布该代码供您查看。希望我有一些意义

这是一个棘手的情况。您正在执行 UpdatePanel 的部分回发，这只会更新更新面板内的内容。如果没有完整的回发，更新面板之外的内容将不会被更新。您是否有理由不想将 Grid2 放在另一个 UpdatePanel 中？这并不理想，但应该可以解决您的问题。

@Alison 我知道这很棘手，该页面的设计方式使得您不能将 Grid2 放在同一个 updatePanel 中。是的，如果我将它放在同一个更新面板中或如果我要将 Grid 2 放在单独的更新面板中。我在网上看过文章如何使用 UpdatePanel 外部的 RegisterDataIteme 更新单个标签或单个文本控件，但与 Grids 无关。而且我有十几个文本/标签控件填写。

我正在寻找类似的东西，但对于网格aspnetajaxtutorials.com/2011/02/…

【参考方案1】：

在 UpdatePanel 的属性中，将更新模式设置为“Conditional”，将 ChildrenAsTriggers 设置为“true”。

另一种选择是将按钮移动到更新面板内，这样您就不必使用触发器了。

【讨论】：

@epotter 感谢您的建议，但它不起作用。触发器工作正常，网格中的事件不起作用。在我将它们放入更新面板之前，它们曾经工作过>

@manraj82 答案的重要部分是设置ChildrenAsTriggers="true"。

伙计们，它仍然无法正常工作，我尝试了您的建议，但没有运气。当我将鼠标悬停在按钮列上时，我可以看到 __doPostBack() 但它似乎没有做任何事情，之前的网格用于回发并填充第二个网格和控件。您是否有任何指向更新面板中关注数据网格的教程或文章的链接

@epotter ，这让它工作了，它没有做 postBack，一旦我添加了这个代码，它就开始做 PostBack。你认为我会仍然需要 ChildrenAsTriggers="False" UpdateMode="Conditional" ??

@manray82 - 如果您在 grdJobs_ItemCommand 中设置断点，如果单击该行中的按钮，它会被命中吗？

【参考方案2】：

GridView 是一个复杂的 asp.net 服务器控件。在 UpdatePanel 中更新 Grid1 后，您将很难更新 Grid2。但是，可以在 Grid1 更新后在客户端上执行 JavaScript。您可以在更新面板中更新 Grid1，在 Grid1 更新后执行 JavaScript，这将更新页面上的 html。问题是使用 Javascript 更新 Grid2 将是一项噩梦般的工作。

这是我所说的一个例子：Ajax Enabled Gridview using JavaScript in ASP.NET。这完全是 hack，工作量很大，当你的同事必须维护它时，他们会讨厌你。

如果您想更新标签或下拉列表，那么这是可能的，但使用 Javascript 更新 GridView 并使这些更新在回发中持续存在是一项艰巨的挑战。

【讨论】：

上面的重点是'让这些更新在回发中持续存在......'。我解决这个问题的方法是始终使用客户端 JS 模板和 JSON 从客户端构建“子”网格。对于新手开发人员来说，有很多事情要搞清楚，但它可以提供易于维护的代码。这样做了，当然，解决最初的问题是微不足道的。

我同意有许多“更好”的方法可以做到这一点，并且需要经验丰富的前端和后端开发人员才能做到这一点。将 Grid2 放入更新面板将解决所有 OP 的问题。我们真正应该讨论的是为什么他不能使用更新面板然后解决这个问题。

对不起，我回复你的答案迟了，我欠你 75 分。我必须通过将两个网格都放在更新面板中来使它工作，就像你说的那样，更新网格是一个令人生畏的任务使用 javascript...

@manraj82：没问题。我希望我能给你一个比“不要这样做。它做不到”更好的答案。

【参考方案3】：

在一页上使用多个更新面板。它不会影响布局。

然后您可以使用触发器（用于面板）来影响您想要影响的控件。

这里有一个页面可以帮助你理解。

http://www.asp.net/ajax/tutorials/understanding-asp-net-ajax-updatepanel-triggers

【参考方案4】：

您的问题在于您在行点击时触发回发的方式，即：此方法

protected void grdJobs_ItemDataBound(object sender, DataGridItemEventArgs e)

  e.Item.Attributes.Add("onclick", "javascript:__doPostBack('grdJobs$ctl" + ((Convert.ToInt32(e.Item.ItemIndex + 3).ToString("00"))) + "$ctl00','')");

手动编写__doPostBack 脚本通常总是一个坏主意。我相信您需要改用ClientScriptManager.GetPostBackEventReference，它会为您创建一个外观相似的回发脚本，但会考虑到各种其他因素，包括控件的 AJAX 化。

试试这样的方法：

protected void grdJobs_ItemDataBound(object sender, DataGridItemEventArgs e)

  e.Item.Attributes.Add("onclick", ClientScriptManager.GetPostBackEventReference(e.Item, string.Empty);