c# - How to update controls[DataGrid,TextBoxes and Label] based on a row selection made in DataGrid that resideds in a updatePan

admin管理员组

文章数量:1390399

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

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

• c#
• javascript
• asp
• asp-ajax
• updatepanel

Share Improve this question Follow edited May 14, 2011 at 0:19 NakedBrunch 49.4k1414 gold badges7474 silver badges9898 bronze badges asked May 10, 2011 at 12:44 manraj82manraj82 6,3352525 gold badges5858 silver badges8585 bronze badges 7

• When you say you want to "force a postback," do you mean that after clicking a row in Grid1, you want Grid1 to do some work within the update panel, then the page performs a full postback, and upon reloading of the page, Grid2 gets updated? – NakedBrunch Commented May 13, 2011 at 13:44
• @Alison please ignore the force postback bit.There are some lines of code that binds data to Grid2 in functionToBindDataToGrid2(),they are not working,they worked before I put Grid 1 in UpdatePanel. The data in Grid2 is based on the selection[via clicking the row] made in Grid 1. If you want I can post that code as well for you to have a look.Hope im making some sense – manraj82 Commented May 13, 2011 at 14:27
• This is a tricky situation. You are performing a partial postback of the UpdatePanel which will only update content that is inside of the update panel. Without a full postback, content outside of the updatepanel simply won't be updated. Is there a reason why you don't want to put Grid2 inside another UpdatePanel? It is not ideal but it should solve your problems. – NakedBrunch Commented May 13, 2011 at 14:34
• @Alison I know its tricky,the page is designed in a way such that you cant have the Grid2 in the same updatePanel.Yes it would work if i was to put it in the same update Panel or if i was to put Grid 2 in a separate update Panel.I have seen articles online how to update a single label or a single text control using RegisterDataIteme outside an UpdatePanel but nothing related to Grids.And I have got a dozen text/label controls to fill. – manraj82 Commented May 13, 2011 at 14:46
• I was looking something similar to this but for grids aspnetajaxtutorials./2011/02/… – manraj82 Commented May 13, 2011 at 14:56

 |  Show 2 more ments

4 Answers 4

Sorted by: Reset to default 4

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.

A GridView is a plex asp 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.

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/ajax/tutorials/understanding-asp-net-ajax-updatepanel-triggers

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);
}

本文标签：