Using GridView inside UpdatePanel

问题:

I have an Updatepanel and Gridview inside it.

<asp:UpdatePanel ID="uplPanel" UpdateMode="Conditional" runat="server" OnLoad="uplPanel_Load">
<ContentTemplate>
 <asp:GridView ID="gvPrList" runat="server" AutoGenerateColumns="false" AllowPaging="false"
       AllowSorting="false" CssClass="list-table" HeaderStyle-CssClass="header">
       <Columns>
     <ItemTemplate>
               <asp:Button ID="btnEdit" runat="server" Text="Edit" CssClass="button save" OnCommand="onPrItemCmd"
                   CommandName="editRow" CommandArgument='<%#Bind("ID") %>' Style="width: 80px" />
               <asp:Button ID="btnDelete" runat="server" Text="Delete" CssClass="button save" OnCommand="onPrItemCmd"
                   CommandName="deleteRow" CommandArgument='<%#Bind("ID") %>' Style="width: 80px" />
           </ItemTemplate>
       </asp:TemplateField>
   </Columns>

When I click on my buttons inside the Griview, it does not fire the events. Any idea?

回答1:

You need to add OnCommand event of GridView and then handle that inside that event like this:

OnRowCommand="gvPrList_OnRowCommand" 

or alternatively add a click event for the individual button and then handle in the code behind file:

<asp:Button ID="btnEdit" runat="server" OnClick="btnEdit_Click" Text="Edit" CssClass="button save"
                   OnCommand="onPrItemCmd" CommandName="editRow" CommandArgument='<%#Bind("ID") %>' Style="width: 80px" />

回答2:

I did the following and it works

I replace asp button with html button and call javascript method to fire Update Panal Load event.

<input id="btnDelete1" type="button" onclick="javascript:DeletePrItem('<%# Eval("ID") %>');" value="Delete" class="button save" style="width: 80px" />

My Js :

    function DeletePrItem(_Id) {
        __doPostBack('<%= uplPanel.ClientID %>', _Id);
    }

My Code behind :

    protected void uplPanel_Load(object sender, EventArgs e)
    {
        var arg = Request.Params.Get("__EVENTARGUMENT");

        if (arg != null)
        {
            if (arg != "")
            {
                string recordId = arg.ToString();
                //Do deletetion and rebind data grid

    }
     }
}

回答3:

I had the same issue where column buttons with a OnClick were causing a postback but the OnClick method was not being hit. When I commented out the update panel and it all worked.

I resolved this issue by adding a postback trigger for the grid within the update panel:

</ContentTemplate>
   <Triggers>
       <asp:PostBackTrigger ControlID="uxWebDataGrid" />
   </Triggers>
</asp:UpdatePanel>

Hope this helps someone else!

回答4:

I had a similar issue.

Depending on your situation, as in mine...All of the clickable controls inside of the update panel I will want to be triggers; So i was simply able to use the UpdatePanel property 'ChildrenAsTriggers="true"' so solve the issue.

    <asp:UpdatePanel runat="server" ID="UPCommunicationlogForm" ChildrenAsTriggers="true" >

This solved my issue, now my edit and delete buttons that are generated from the ItemTemplate inside my gridview call their respective methods on the server.

回答5:

Please add this code into the UpdatePanel.

</ContentTemplate> 
 <Triggers>
   <asp:PostBackTrigger ControlID="gvPrList" EventName="Click" />
 </Triggers>
 </asp:UpdatePanel>

回答6:

This would be the Event Handler for your command in the codebehind:

protected void onPrItemCmd(object sender, CommandEventArgs e)
    {
        //do whatever you want
        //probably you will need the "ID" or "CommandArgument":
        string myArgumentID = e.CommandArgument.ToString();

        uplPanel.Update(); //since the UpdatePanel is set *UpdateMode="Conditional"*
    }

UPDATE:

Probably, you might be doing some validation when you click on buttons. If so, you need to add CausesValidation="false" in your buttons or links properties

回答7:

I added an OnRowCommand Event and add this trigger to the UpdatePanel:

<Triggers>
    <asp:AsyncPostBackTrigger ControlID="gvPrList" EventName="RowCommand" />
</Triggers>

Note that it's an Async trigger.