How to update controls[DataGrid,TextBoxes and Label] based on a row selection made in DataGrid that resideds in a updatePanel?

问题

I have got a grid[Grid1] that build its dataRows when a button[search] is clicked, I managed to Ajaxify it by placing it in an UpdatePanel and it worked fine. Before Ajaxifying Grid 1, another grid[Grid2] and some other controls[Text and Labels] used to get populated/updated when a row in Grid 1 was clicked .

The Grid2 and other controls used to get populated/updated on the OnItemCommand Event of Grid 1.Its the code in the OnItemCommand that binds the related data to Grid2 and other controls.

After I placed the Grid 1 in the update panel,they stopped updating. It will work fine if I place Grid2 and other controls in the same Update Panel but the page is designed in a way that I cant have those controls in the same UpdatePanel as the first Grid nor I dont intend to use another Update Panel.

I hope I'm making some sense. I'm a newbie in .Net so please excuse. Please find the code below.

 <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>

The code below in the code behind stopped working

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','')");
     }

回答1:

A GridView is a complex asp.net server control. You will have a lot of difficulty updating Grid2 after Grid1 is updated inside of the UpdatePanel. However, it is possible to a execute JavaScript on the client after Grid1 is updated. You could update Grid1 inside of the update panel, execute JavaScript after Grid1 has been updated that will update HTML on the page. The problem is that updating Grid2 with Javascript is going to be a nightmare amount of work.

Here's an example of what I'm talking about: Ajax Enabled Gridview using JavaScript in ASP.NET. It is a total hack, a huge amount of work, and your co-workers will hate you when they have to maintain it.

If you wanted to update a label or a dropdown list then that would be possible but updating a GridView using Javascript and having those updates persist across postbacks is a daunting challenge.

回答2:

In the properties for the UpdatePanel, set the update mode to "Conditional" and ChildrenAsTriggers to "true".

Another option would be to move the button inside the update panel so that you wouldn't have to have the trigger.

回答3:

Use multiple UpdatePanels on one page. It won't affect the layout.

You can then use triggers (for the panels) in order to affect which controls you want affected.

Here's a page that will help you understand.

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

回答4:

Your problem is down to the way you are triggering the postback on row click, i.e.: this method

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','')");
}

Manually writing the __doPostBack script is generally always a bad idea. I believe what you need to use instead is ClientScriptManager.GetPostBackEventReference which will create a similar looking postback script for you, but will take into account all sorts of other things including AJAX-ification of the control.

Try something like this instead:

protected void grdJobs_ItemDataBound(object sender, DataGridItemEventArgs e)
{
  e.Item.Attributes.Add("onclick", ClientScriptManager.GetPostBackEventReference(e.Item, string.Empty);
}

来源：https://stackoverflow.com/questions/5950206/how-to-update-controlsdatagrid-textboxes-and-label-based-on-a-row-selection-ma

标签

javascript

ASP.NET

asp.net-ajax

updatepanel