如何从一个中继器控件检索细节显示在模态弹出
本文关键字:显示 细节 检索 模态 控件 中继器 一个 | 更新日期: 2023-09-27 18:17:20
我有一个重复器控件,它显示图像和一些基本信息,如日期时间和产品Id。在点击一个图像,我需要运行另一个查询,并在一个单独的弹出显示细节。我知道怎么做弹出窗口。我想知道如何从中继器获取DateTime和ProductId,并在图像的按钮单击事件中使用它们?
下面是我的中继器代码:
<asp:Repeater ID="rptMonitorSummary" runat="server" OnItemDataBound="rptMonitorSummary_OnItemDataBound">
<ItemTemplate>
<asp:Panel ID="Pnl" runat="server">
<li class="ui-widget-content ui-corner-tr">
<h5 class="ui-widget-header">
<%# Eval("Name").ToString().Length > 9 ? (Eval("Name") as string).Substring(0, 9) : Eval("Name")%>
</h5>
<div id="divHover">
<asp:ImageButton Width="80px" ID="btnPerformanceImage" onclick="btnPerformanceImage_Click" runat="server" Height="45px">
</asp:ImageButton>
</div>
<div class="tooltip" style="display: none">
<div style="text-align: center; font-weight: bold;">
<%# Eval("DateTime") %><br />
</div>
<div style="text-align: center; font-weight: normal">
ErrorRatingCalls =
<%# Eval("ProductId")%><br />
</div>
<div style="text-align: center; font-weight: normal">
TotalRatingCalls =
<%# Eval("TotalCalls")%>
<br />
</div>
<div style="text-align: center; font-weight: normal">
SuccessRate =
<%# Eval("PassPercentage") + "%" %>
</div>
</div>
</li>
</asp:Panel>
</ItemTemplate>
</asp:Repeater>
我也有按钮点击事件下面:
protected void btnPerformanceImage_Click(object sender, EventArgs e)
{
ScriptManager.RegisterStartupScript
(this, this.GetType(), "callScriptFunction", "ViewModelPopup1();", true);
}
我想知道的是如何获取已经绑定到repeater控件的值,当我点击repeater控件内的图像
与其处理点击按钮本身,不如使用Repeater
控件的ItemCommand
事件。作为CommandArgument
,您可以传递ProductId
,然后在处理程序中使用它从DB检索其余的信息。或者您甚至可以将所有需要的值作为单个字符串包含到CommandArgument
中,然后进行一些解析:
<asp:Repeater ... OnItemCommand="rptMonitorSummary_ItemCommand" ... >
...
<asp:ImageButton ... CommandName="ShowPopup" CommandArgument='<%# Eval("ProductId") + "," + Eval("DateTime") %>'>
</asp:ImageButton>
...
</asp:Repeater>
处理程序可能像这样:
protected void rptMonitorSummary_ItemCommand(object sender, RepeaterCommandEventArgs e)
{
string[] tokens = e.CommandArgument.ToString().Split(',');
int productId = int.Parse(tokens[0]);
DateTime dateTime = Date.Time.Parse(tokens[1]);
// the rest of the handling here
}
使用OnItemCommand事件从重复器控件中获取值。
<asp:Repeater ID="rptMonitorSummary" runat="server" OnItemDataBound="rptMonitorSummary_OnItemDataBound" OnItemCommand="rptMonitorSummary_ItemCommand">
。..
<asp:ImageButton Width="80px" ID="btnPerformanceImage" CommandName="Popup" runat="server" Height="45px"></asp:ImageButton>
。..
protected void rptMonitorSummary_ItemCommand(object source, RepeaterCommandEventArgs e)
{
if (e.CommandName == "Popup")
{
DataRowView row = ((DataRowView)e.Item.DataItem).Row;
string data1 = Convert.ToString(row["Data1"]);
string data2 = Convert.ToString(row["Data2"]);
ScriptManager.RegisterStartupScript
(this, this.GetType(), string.Format("callScriptFunction", "ViewModelPopup1('{0}','{1}');", data1, data2), true);
}
}
在你的Repeater中使用OnItemCommand="rptMonitorSummary_ItemCommand"而不是在你的Button中使用OnClick
然后是
后面的代码 protected void rptMonitorSummary_ItemCommand(object sender, RepeaterCommandEventArgs e)
{
// e.CommandName and e.CommandArgument will let you know what was clicked
}
你的按钮可以像这样
<asp:Button runat="server" ID="btnPerformanceImage" Text="Whatever" CommandName="OpenImage" CommandArgument='<%# DataBinder.Eval(Container.DataItem, "ProductId") %>' />
这样你就知道用户点击了什么并且可以改变弹出窗口来适应它
你可以为包含日期值和ProductId值的div标签设置一个类属性名,然后用jquery .find('classname')获取它们的值