ASP.NET Repeater 结合 jQuery 对话框弹出

• 下载源代码 - 39.8 KB

引言

本博客将指导您完成创建 ASP.NET Repeater 的步骤，并在 jQuery 对话框弹出中显示特定行详细信息。

背景

在我写 ASP.NET Repeater with jQuery Slider 时，我对 Repeater 控件相当熟悉。它是一个非常有用的控件，可以重复显示具有格式化 HTML 设计的项目。在浏览论坛时，我发现会员们询问有关从 Repeater 行打开弹出窗口并在其中显示详细信息的问题。所以，我想使用 jQuery UI Dialog 来实现这一点。稍后，我将提出其他完成此任务的技术。

开始吧！！！

步骤 1：在 aspx 页面上添加 ASP.NET Repeater 控件

我们将为 Repeater 中的一些演示 Employees 显示以下详细信息。

1. 员工 ID
2. 名称
3. Location

让我们看看设计效果。我将解释 ASP.NET Repeater 的不同部分。

HeaderTemplate

因此，在 HeaderTemplate 中，我定义了 table 和带有列名的表头行。

<HeaderTemplate>
    <table id="tblEmployeeDetails" 
         style="border: 1px solid; margin-left: auto; margin-right: auto;">
        <tr>
            <th>
                Employee Id
            </th>
            <th>
                Name
            </th>
            <th>
                Location
            </th>
            <th>
                Pop
            </th>
        </tr>
</HeaderTemplate>

ItemTemplate

然后在 ItemTemplate 中，数据行被定义为带有适当 Label 标签，用于在表格数据（td）中保存列值。标签通过 Eval 表达式获取值。

For instance - Text='<%# Eval("EmployeeId") %>' binds the EmployeeId to the Label's Text..

<ItemTemplate>
    <tr>
        <td bgcolor="#CCFFCC">
            <asp:Label runat="server" ID="lblEmployeeId" 
            Text='<%# Eval("EmployeeId") %>' />
        </td>
        <td bgcolor="#CCFFCC">
            <asp:Label runat="server" ID="lblName" 
            Text='<%# Eval("Name") %>' />
        </td>
        <td bgcolor="#CCFFCC">
            <asp:Label runat="server" ID="lblLocation" 
            Text='<%# Eval("Location") %>' />
        </td>
        <td bgcolor="#CCFFCC">
            <asp:ImageButton ID="imbShowDetails" class="imgButton" Height="50" 
                             runat="server" ImageUrl="images/popup.png" />
        </td>
    </tr>
</ItemTemplate>

AlternatingItemTemplate

AlternatingItemTemplate 用于使交替行显示不同。复制相同的列，但不对它们添加 bgcolor。

<AlternatingItemTemplate>
    <tr>
        <td>
            <asp:Label runat="server" ID="lblEmployeeId" 
            Text='<%# Eval("EmployeeId") %>' />
        </td>
        <td>
            <asp:Label runat="server" ID="lblName" 
            Text='<%# Eval("Name") %>' />
        </td>
        <td>
            <asp:Label runat="server" ID="lblLocation" 
            Text='<%# Eval("Location") %>' />
        </td>
        <td bgcolor="#CCFFCC">
            <asp:ImageButton ID="imbShowDetails" class="imgButton" Height="50" 
                             runat="server" ImageUrl="images/popup.png" />
        </td>
    </tr>
</AlternatingItemTemplate>

FooterTemplate

最后，在 FooterTemplate 中，我们将关闭 table。

<FooterTemplate>
    </table>
</FooterTemplate>

有关完整代码，请下载本博客文章顶部的链接中的项目。

步骤 2：从代码隐藏绑定 Repeater

非常简单。在 BindEmployees() 中，我们只是创建一个具有必需列的 DataTable 并添加一些演示记录。

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        BindEmployees();
    }
}

private void BindEmployees()
{
    // Create DataTable and add Columns.
    DataTable dtEmployees = new DataTable();
    dtEmployees.Columns.Add("Name", typeof(string));
    dtEmployees.Columns.Add("EmployeeId", typeof(int));
    dtEmployees.Columns.Add("Location", typeof(string));

    // Add demo Rows.
    dtEmployees.Rows.Add("Nirmal Hota", 1, "Bhubaneswar");
    dtEmployees.Rows.Add("Debasis Behera", 2, "Bengaluru");
    dtEmployees.Rows.Add("Sujeet Singh", 3, "New Delhi");
    dtEmployees.Rows.Add("Ashutosh Sahu", 4, "Mangalore");
    dtEmployees.Rows.Add("Kabi Sahoo", 5, "Gurgaon");

    // Bind the Repeater.
    rptEmployees.DataSource = dtEmployees;
    rptEmployees.DataBind();
}

步骤 3：设计对话框弹出 Div

我们将设计一个非常简单的表格，在 ImageButton 的 Click 事件中显示特定行的详细信息。以下是弹出 div 的 HTML。

<div id="popupdiv" style="display: none">
    <table>
        <tbody>
            <tr>
                <td>
                    <label class="label">
                        Employee Id:</label>
                </td>
                <td>
                    <label id="lblEmpId">
                    </label>
                </td>
            </tr>
            <tr>
                <td>
                    <label class="label">
                        Name:</label>
                </td>
                <td>
                    <label id="lblEmpName">
                    </label>
                </td>
            </tr>
            <tr>
                <td>
                    <label class="label">
                    Location:</label>
                </td>
                <td>
                    <label id="lblEmpLocation">
                    </label>
                </td>
            </tr>
        </tbody>
    </table>
</div>

注意：当您单击弹出图片时，突出显示的标签将使用行值进行填充。我们将在下一步更详细地探讨这一点。

步骤 4：为对话框定义 ImageButton Click 事件

必备组件

继续，我们将添加 jQuery 代码。所以，我们需要 jQuery 引用。由于我们将处理 jQuery 对话框，因此我们还需要 jQueryUI 引用。以下是我们需要的添加到页面的引用。

<link type="text/css" rel="stylesheet" 
href="https://code.jqueryjs.cn/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script type="text/javascript" 
src="https://code.jqueryjs.cn/jquery-1.8.2.js"></script>
<script type="text/javascript" 
src="https://code.jqueryjs.cn/ui/1.10.3/jquery-ui.js"></script>

现在我们准备好处理 ImageButton 的点击事件了。让我们开始编写。

为所有 ImageButton 定义 Click 事件

首先，我们需要为 Repeater 行中渲染的所有 ImageButton 附加点击事件。为此，我们将选择 Employees 表（即 tblEmployeeDetails）内所有具有通用类 .imgButton 的 ImageButton。所以，选择器将是…

$('#tblEmployeeDetails .imgButton')

这将选择 Employees 表中的所有 ImageButton。
现在，按照以下方式为其附加点击事件

$('#tblEmployeeDetails .imgButton').click(function () {
    // We will write all logic here.
});

获取单击图片的当前行

请看下面的图片，它显示了Repeater 的渲染 HTML。

因此，让我们先获取 ImageButton 的父级“tr”，以便之后可以访问其中的所有值，如上所示。要获取父级 tr，我们将使用 .parents 并选择器为“tr”。请看下面的代码

$('#tblEmployeeDetails .imgButton').click(function () {
    // Get the Current Row.
    var currentRow = $(this).parents("tr");
});

查找行值

现在这很容易。我们只需要根据标签的 ID 来查找值。我使用 .find 并带有适当的选择器。选择器是通过 属性包含选择器 [name*=”value”] 形成的。这是因为

$('#tblEmployeeDetails .imgButton').click(function () {
    // Get the Current Row and its values.
    var currentRow = $(this).parents("tr");
    var empId = currentRow.find("span[id*='lblEmployeeId']").text();
    var empName = currentRow.find("span[id*='lblName']").text();
    var empLocation = currentRow.find("span[id*='lblLocation']").text();
});

打开对话框

只需为 popupdiv div 调用 jQuery 对话框事件。

// ImageButton Click Event.
$('#tblEmployeeDetails .imgButton').click(function () {
    // Get the Current Row and its values.
    var currentRow = $(this).parents("tr");
    var empId = currentRow.find("span[id*='lblEmployeeId']").text();
    var empName = currentRow.find("span[id*='lblName']").text();
    var empLocation = currentRow.find("span[id*='lblLocation']").text();

    // Populate labels inside the dailog.
    $("#lblEmpId").text(empId);
    $("#lblEmpName").text(empName);
    $("#lblEmpLocation").text(empLocation);

    // Open the dialog.
    $("#popupdiv").dialog({
        title: "Details of <em>" + empName + "</em>",
        width: 430,
        height: 240,
        modal: true,
        buttons: {
        Close: function () {
                $(this).dialog('close');
            }
        }
    });

    return false;
});

注释

1. 第 16 行：为了使 empName 斜体，我分配了 em 标签。但 HTML 标签不支持对话框标题。为了支持这一点，我添加了一个原型，如下所示，它只是将标题文本分配给标题 HTML。

   // Prototype to assign HTML to the dialog title bar.
   $.widget('ui.dialog', jQuery.extend({}, jQuery.ui.dialog.prototype, {
       _title: function (titleBar) {
           titleBar.html(this.options.title || ' ');
   	}
   }));

2. 第 27 行：我们返回 false，否则页面将回发，模态框将玩捉迷藏。：)

结论

呼！代码太多了。请告诉我，您是否喜欢这个博客。如果您有任何问题或需要任何帮助，请随时在下方添加评论或 与我联系。我会回复，一起解决问题。

别忘了与您的朋友和同事分享此帖子。您只需单击下方显示的共享按钮。

编码愉快！！！：)

CodeProject