GridView TemplateField中的ImageButton不会显示AJAX弹出模式

本文关键字：AJAX 模式显示 TemplateField 中的 ImageButton GridView | 更新日期: 2023-09-27 18:24:51

我有一个显示包含ImageButton TemplateField的GridView的页面。我的目标是在单击其中一个按钮时显示AJAX模式弹出窗口，同时显示按下按钮的行。问题是，当我点击一个按钮时，它不会显示模式弹出。我试着使用这个教程，并在这个网站上阅读了几篇关于这个问题的文章，但都无济于事。如何正确地触发按钮事件并显示弹出窗口？

以下是网格视图的片段：

   <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
            Width="505px" DataSourceID="SqlDataSource1">
            <Columns>
                <asp:BoundField DataField="ItemDesc" 
                    SortExpression="ItemDesc" ItemStyle-Width="100px" ItemStyle-Height="100px">
    <ItemStyle Height="100px" Width="100px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="Price" SortExpression="Price" 
                    ItemStyle-Width="100px" ItemStyle-Height="100px">
    <ItemStyle Height="100px" Width="100px"></ItemStyle>
                </asp:BoundField>
              <asp:TemplateField>
                <EditItemTemplate>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                </EditItemTemplate>
                <ItemTemplate>
                    <asp:Image ID="Image1" runat="server" Height="200px" 
                        ImageUrl='<%# Eval("ImagePath") %>' Width="200px" />
                </ItemTemplate>
            </asp:TemplateField>
                <asp:TemplateField ShowHeader="False">
                    <ItemTemplate>
                        <asp:ImageButton ID="ImageButton1" runat="server" CommandName="atc"         ImageUrl="~/App_Themes/img/shop/addtocart.png" 
                            Text="Add to Cart" CommandArgument="<%# ((GridViewRow)     Container).RowIndex %>"/>
                    </ItemTemplate>
                    <ControlStyle Height="30px" Width="105px" />
                    <ItemStyle Width="105px" />
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
...
<asp:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="HiddenField1" PopupControlID="Panel1" BackgroundCssClass="modalBg" CancelControlID="btnClose">
</asp:ModalPopupExtender>
<asp:HiddenField ID="HiddenField1" runat="server" />
<asp:Panel ID="Panel1" runat="server" Width="500" Height="500" Visible="False" 
    style="background-color:#6f95f4; color:#000000;">
    <div class="style1">
    <br />
    <br />
    <br />
    <br />
    <br />
        <table style="width: 90%; height: 71px;">
            <tr>
                <td>
                    Item Name</td>
                <td>
                    <asp:Label ID="lblItemName" runat="server" Text="Label"></asp:Label>
                </td>
            </tr>
            <tr>
                <td>
                    Price</td>
                <td>
                    <asp:Label ID="lblPrice" runat="server" Text="Label"></asp:Label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    &nbsp;</td>
            </tr>
            <tr>
                <td>
                    Quantity</td>
                <td>
                    <asp:TextBox ID="TextBox2" runat="server" Type="Number" Min="1"     MaxLength="100" 
                        Width="75px" Height="23px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Total Price</td>
                <td>
                    <asp:Label ID="lblTotalPrice" runat="server" Text="Label"></asp:Label>
                </td>
            </tr>
        </table>
        <br />
        <br />
                    <asp:Button ID="btnAddToCart" runat="server" Text="Add to Cart" 
            onclick="btnAddToCart_Click" />
        <br />
        <br />
        <asp:Button ID="btnClose" runat="server" onclick="btnClose_Click" Text="Close" 
            Width="199px" />
    </div>
</asp:Panel>

这是我的活动代码：

 protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
    {
        if (e.CommandName.Equals("atc"))
        {
            ModalPopupExtender1.Show();
            //// Retrieve the row index stored in the 
            //// CommandArgument property.
            int index = Convert.ToInt32(e.CommandArgument);
            //// Retrieve the row that contains the button 
            //// from the Rows collection.
            GridViewRow row = GridView1.Rows[index];
            lblItemName.Text = row.Cells[0].Text;
            lblPrice.Text = row.Cells[1].Text;
            Response.Write("<script>alert('" + row.Cells[0].Text + "'n" + row.Cells[1].Text +     "');</script>");
            //// Add code here to add the item to the shopping cart.
        }
    }

编辑：添加了面板代码。

GridView TemplateField中的ImageButton不会显示AJAX弹出模式

这样尝试：100%工作并经过测试的

将onrowcommand="GridView1_RowCommand"用于GridView
在面板中使用display:none而不是Visible="false"

我评论了你的警报（在rowbound中），它包含js错误

        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" Width="505px"
        onrowcommand="GridView1_RowCommand"
            >
            <Columns>
                <asp:BoundField DataField="ItemDesc" SortExpression="ItemDesc" ItemStyle-Width="100px"
                    ItemStyle-Height="100px">
                    <ItemStyle Height="100px" Width="100px"></ItemStyle>
                </asp:BoundField>
                <asp:BoundField DataField="Price" SortExpression="Price" ItemStyle-Width="100px"
                    ItemStyle-Height="100px">
                    <ItemStyle Height="100px" Width="100px"></ItemStyle>
                </asp:BoundField>
                <asp:TemplateField>
                    <EditItemTemplate>
                        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
                    </EditItemTemplate>
                    <ItemTemplate>
                        <asp:Image ID="Image1" runat="server" Height="200px" ImageUrl='<%# Eval("ImagePath") %>'
                            Width="200px" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField ShowHeader="False">
                    <ItemTemplate>
                        <asp:ImageButton ID="ImageButton1" runat="server" CommandName="atc" 
                        CausesValidation="false"
                            Text="Add to Cart" CommandArgument="<%# ((GridViewRow)     Container).RowIndex %>" />

                    </ItemTemplate>
                    <ControlStyle Height="30px" Width="105px" />
                    <ItemStyle Width="105px" />
                </asp:TemplateField>
            </Columns>
        </asp:GridView>
    </div>
    <ajax:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Panel1" 
    PopupControlID="Panel1" OnOkScript="okClick();" 
    OnCancelScript="cancelClick();" 
     OkControlID="btnAddToCart"   CancelControlID="btnClose">
</ajax:ModalPopupExtender>

<asp:HiddenField ID="HiddenField1" runat="server" />
    <asp:Panel ID="Panel1" runat="server" Width="500" Height="500" 
    style="background-color:#6f95f4; color:#000000;display:none">
    <div class="style1">
    <br />
    <br />
    <br />
    <br />
    <br />
        <table style="width: 90%; height: 71px;">
            <tr>
                <td>
                    Item Name</td>
                <td>
                    <asp:Label ID="lblItemName" runat="server" Text="Label"></asp:Label>
                </td>
            </tr>
            <tr>
                <td>
                    Price</td>
                <td>
                    <asp:Label ID="lblPrice" runat="server" Text="Label"></asp:Label>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    &nbsp;</td>
            </tr>
            <tr>
                <td>
                    Quantity</td>
                <td>
                    <asp:TextBox ID="TextBox2" runat="server" Type="Number" Min="1"     MaxLength="100" 
                        Width="75px" Height="23px"></asp:TextBox>
                </td>
            </tr>
            <tr>
                <td>
                    Total Price</td>
                <td>
                    <asp:Label ID="lblTotalPrice" runat="server" Text="Label"></asp:Label>
                </td>
            </tr>
        </table>
        <br />
        <br />
                    <asp:Button ID="btnAddToCart" runat="server" Text="Add to Cart" 
            onclick="btnAddToCart_Click" />
        <br />
        <br />
        <asp:Button ID="btnClose" runat="server" onclick="btnClose_Click" Text="Close" 
            Width="199px" />
    </div>
</asp:Panel>




  protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
            {
    if (e.CommandName.Equals("atc"))
    {
    ModalPopupExtender1.Show();
    int index = Convert.ToInt32(e.CommandArgument);
        GridViewRow row = GridView1.Rows[index];

       ImageButton ImageButton1=(ImageButton)row.FindControl("ImageButton1");

           // Response.Write("<script>alert('" + row.Cells[0].Text + "'n" + row.Cells[1].Text + "');</script>");  comment this 

        }

您没有设置GridView的OnRowCommand属性，因此单击图像按钮时不会触发GridView1_RowCommand方法。以下是的操作方法

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
    Width="505px" DataSourceID="SqlDataSource1"
    OnRowCommand="GridView1_RowCommand">

请参阅此处了解更多详细信息。