如何从中继器控件中检索详细信息以在模式弹出窗口中显示

Question

我有一个中继器控件，该控件显示图像和一些基本信息，例如DateTime和Prouct 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);
}

我想知道的是，当我单击转发器控件内的图像时，如何获取已经绑定到转发器控件的值。

Answer 1

使用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);
    }  
}

Answer 2

而不是在Button内部使用OnClick，请在中继器中使用OnItemCommand =“ rptMonitorSummary_ItemCommand”

然后在后面的代码上

    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") %>' />

这样您就知道用户单击了什么，并可以更改弹出窗口以适合它

Answer 3

与其处理单击按钮本身的问题，不如使用Repeater控件的ItemCommand事件。 作为CommandArgument您可以传递ProductId ，然后在处理程序内部使用它从数据库检索其余信息。 或者甚至可以将所有需要的值作为单个字符串包含在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
}

Answer 4

您可以为两个div标签设置一个类属性名称，其中包含日期值和ProductId值，然后使用jquery .find（'classname'）获取它们以获取它们的值。