模态弹出窗口上的按钮单击事件，未触发网格视图

Question

I'm having problems with the following.

The scenario: I have a asp grid with a few columns that bind to data. The last column has been converted to a template-field. In this template-field is a button with a modal popup extender attached to it. Hidden inside this field is a modal popup. This modal popup is used to add a new account. it contains 2 text boxes, drop down lists and buttons("Add" and "Cancel"). When "add" is clicked the modal should close after the inserting of the new account in the code behind.

The Problem: I get the popup to display and load the Drop down lists from the cache, without problem. How do I get the button click event to fire in the code behind. I've tried using a JavaScript function that performs a _doPostBack('btnAddAcc','') but it keeps returning the error "JavaScript error: Object expected". I gathered after about 1 hour on Google that it is because "btnAddAcc' is not found because it is actually within the grid-view cell and can't be directly accessed. Using page methods and ajax calls is a last resort as the company has a strict policy against this and only allowes this after a bunch of paperwork.

The Code:

<asp:GridView ID="gvNEA" runat="server" CssClass="gridA_Orange" 
AutoGenerateColumns="False" AllowPaging="True" 
EmptyDataText="No transactions with 'Non Existent Account(s)'" 
ShowHeaderWhenEmpty="True" Width="945px">
<Columns>
    <asp:BoundField HeaderText="Transaction Date" DataField="Transaction_Date" />
    <asp:BoundField HeaderText="Account Number" DataField="Account_Number" />
    <asp:BoundField HeaderText="Description" DataField="Description"/>
    <asp:BoundField HeaderText="Amount" DataField="Amount"/>
    <asp:BoundField HeaderText="Offset Account" DataField="OffsetAccount" />
    <asp:BoundField HeaderText="File Name" DataField="FileName" />
    <asp:BoundField HeaderText="Transaction Type" DataField="TransType" />
    <asp:TemplateField ShowHeader="False">
        <ItemTemplate>
            <asp:Button ID="btnAdd" runat="server" CausesValidation="false" 
                OnClientClick="showPopUp('pupAddAcc');" Text="Add Account" CssClass="ButtonStyle_Gray" />
            <asp:ModalPopupExtender ID="mpeAddAcc" runat="server" 
                BackgroundCssClass="modalBackground" TargetControlID="btnAdd"
                PopupControlID="pnlAddAcc"
                CancelControlID="btnCancelAddAcc" DropShadow="True" 
                Enabled="True">
            </asp:ModalPopupExtender>
            <div id="pupAddAcc">
                <asp:Panel ID="pnlAddAcc" runat="server" BackColor="White" 
                    BorderColor="White" BorderStyle="Solid" BorderWidth="1px" Width="430">                
                    <table align="center" id="tblAddAcc" class="BasicHTMLTable">
                    <asp:HiddenField ID="hfTransType" runat="server" Value='<%# Bind("TransType") %>' />
                        <tr align="center" >
                            <td colspan="2">
                                <asp:Label ID="lblAccountHeader" runat="server" width="390px" Text="Add Account" 
                                CssClass="ButtonStyle_Orange" Height="25px" Font-Bold="true" Font-Size="Large" />
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="PopupCol">Account Number</td>
                            <td align="left" ><asp:Label ID="lblAccNumber" runat="server" Width="165px" 
                                    Text='<%# Bind("Account_Number") %>' /></td>
                        </tr>
                        <tr>
                            <td align="right" class="PopupCol" >Name</td>
                            <td align="left" ><asp:TextBox ID="txtName" runat="server" Width="165px" />
                                <asp:RequiredFieldValidator ID="rfvName" runat="server" 
                                    ControlToValidate="txtName" Text="*" ValidationGroup="acc" />
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="PopupCol" >Search Name</td>
                            <td align="left" ><asp:TextBox ID="txtSearchName" runat="server" Width="165px" />
                                <asp:RequiredFieldValidator ID="rfvSName" runat="server" 
                                    ControlToValidate="txtSearchName" 
                                    Text="*" ValidationGroup="acc" />
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="PopupCol" >Group</td>
                            <td align="left" >
                                <asp:DropDownList ID="ddlGroup" runat="server" Width="170">                                
                                </asp:DropDownList>
                            </td>
                        </tr>
                        <tr>
                            <td align="right" class="PopupCol" >Currency</td>                                    
                            <td align="left" >
                                <asp:DropDownList ID="ddlCurrency" runat="server" Width="170px">
                                </asp:DropDownList>
                            </td>
                        </tr> 
                        <tr>
                            <td align="center" colspan="2">
                                <asp:Button ID="btnAddAcc" runat="server" Text="Add Account" 
                                    CssClass="ButtonStyle_Orange" OnClientClick="javascript:addAccount()" 
                                    ValidationGroup="acc" />  
                                &nbsp&nbsp                      
                                <asp:Button ID="btnCancelAddAcc" runat="server" Text="Cancel" CssClass="ButtonStyle_Orange" />
                            </td>
                        </tr>
                    </table>                
                </asp:Panel>
            </div>
        </ItemTemplate>
    </asp:TemplateField>
    <asp:BoundField HeaderText="RecId" DataField="RecId" Visible="False"/>
</Columns>

I open the popup with this JavaScript function:

function showPopUp(p) {
        var Popup = document.getElementById(p);
        Popup.style.visibility = "visible";
        Popup.style.display = "";
    }

The function when btnAddAcc is clicked:

function addAccount() {
        _doPostBack('btnAddAcc', '');
    };

The code behind function

Protected Sub btnAddAcc_Click(sender As Object, e As System.EventArgs)
    'Code for inserting new account goes here
End Sub

Thank you in advance for any help and proposals. Regards

Answer 1

What happens if you set the OnClick to your server-side event?

<td align="center" colspan="2"> 
  <asp:Button ID="btnAddAcc" runat="server" Text="Add Account"  
     CssClass="ButtonStyle_Orange" OnClick="btnAddAcc_Click"  
     ValidationGroup="acc" />   
  &nbsp&nbsp                       
  <asp:Button ID="btnCancelAddAcc" runat="server" Text="Cancel" CssClass="ButtonStyle_Orange" /> 
</td> 

But... the correct way to get an event reference (ie the '__doPostback' thing) is to get it server-side with ClientScript.GetPostBackEventReference

Answer 2

I found the answer eventually. I had to use the gridview.RowCommand event. It handles all button related events inside a cell of a gridview.

Have a look at the msdn documentation. It should explain most of this command.

GridView.RowCommand

Regards George