我的页面显示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">
</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.
}
}
编辑:添加了面板代码。
答案 0 :(得分:0)
答案 1 :(得分:0)
试试这样: 100%工作和测试
onrowcommand="GridView1_RowCommand"
进行GridView display:none
代替Visible="false"
我评论了你的警报(在行中)它包含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">
</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
}