GridView TemplateField中的ImageButton不会显示AJAX Popup Modal

时间:2014-09-27 14:41:34

标签: c# asp.net ajax gridview modalpopupextender

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

以下是gridview的代码段:

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

    }

编辑:添加了面板代码。

2 个答案:

答案 0 :(得分:0)

您未设置OnRowCommand的{​​{1}}属性,因此单击图像按钮时不会触发GridView方法。这是你如何做的

GridView1_RowCommand

有关详细信息,请参阅here

答案 1 :(得分:0)

试试这样: 100%工作和测试

  1. 使用onrowcommand="GridView1_RowCommand"进行GridView
  2. 使用display:none代替Visible="false"
  3. 我评论了你的警报(在行中)它包含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 
    
    
            }