如何在ASP.NET中结合Facebox与OnSelectedIndexChanged函数？

我懂你现在的困扰——想在ASP.NET里把GridView的OnSelectedIndexChanged事件和Facebox弹窗结合起来对吧？其实核心逻辑就是当用户选中GridView的某一行时，后台先拿到选中的数据，再通过注册客户端脚本来触发Facebox弹出你想要的内容。给你整理了一套可行的步骤和代码示例：

1. 先给GridView加上选中触发的入口 #

首先得确保用户能触发选中事件，你可以直接开启GridView的自动生成选择按钮，或者自己手动加一个Select按钮列：

方式一：自动生成选择按钮 #

<asp:GridView runat="server" ID="GridView1" AutoGenerateColumns="False" 
    class="table table-bordered data-table" 
    OnSelectedIndexChanged="OnSelectedIndexChanged"
    AutoGenerateSelectButton="True">
    <Columns>
        <asp:TemplateField HeaderText="No." ItemStyle-HorizontalAlign="center">
            <ItemTemplate>
                <%# Container.DataItemIndex + 1%>
            </ItemTemplate>
        </asp:TemplateField>
        <!-- 这里放你的其他业务列 -->
        <asp:BoundField DataField="UserName" HeaderText="User Name" />
        <asp:BoundField DataField="Email" HeaderText="Email Address" />
    </Columns>
</asp:GridView>

方式二：手动添加Select按钮列 #

如果你想自定义按钮样式，也可以自己加一个TemplateField：

<asp:GridView runat="server" ID="GridView1" AutoGenerateColumns="False" 
    class="table table-bordered data-table" 
    OnSelectedIndexChanged="OnSelectedIndexChanged">
    <Columns>
        <asp:TemplateField HeaderText="No." ItemStyle-HorizontalAlign="center">
            <ItemTemplate>
                <%# Container.DataItemIndex + 1%>
            </ItemTemplate>
        </asp:TemplateField>
        <!-- 自定义Select按钮列 -->
        <asp:TemplateField HeaderText="Action">
            <ItemTemplate>
                <asp:LinkButton runat="server" ID="lnkSelect" Text="Select" 
                    CommandName="Select" CssClass="btn btn-sm btn-primary"></asp:LinkButton>
            </ItemTemplate>
        </asp:TemplateField>
        <!-- 其他业务列 -->
        <asp:BoundField DataField="UserName" HeaderText="User Name" />
        <asp:BoundField DataField="Email" HeaderText="Email Address" />
    </Columns>
</asp:GridView>

2. 确保Facebox的资源正确引入 #

Facebox依赖jQuery，所以要先引入jQuery，再引入Facebox的CSS和JS文件（路径根据你的项目实际位置调整）：

<!-- 引入Facebox样式 -->
<link rel="stylesheet" href="~/Content/facebox.css" />
<!-- 引入jQuery -->
<script src="~/Scripts/jquery-3.6.0.min.js"></script>
<!-- 引入Facebox脚本 -->
<script src="~/Scripts/facebox.js"></script>
<!-- 初始化Facebox（可选，配置关闭/加载图片） -->
<script>
    $(document).ready(function() {
        $.facebox.settings.closeImage = '~/Images/closelabel.png';
        $.facebox.settings.loadingImage = '~/Images/loading.gif';
    });
</script>

3. 后台处理OnSelectedIndexChanged事件 #

在后台的事件方法里，我们先获取选中行的数据，构造弹窗内容，然后注册客户端脚本来触发Facebox：

protected void OnSelectedIndexChanged(object sender, EventArgs e)
{
    // 获取当前选中的行
    GridViewRow selectedRow = GridView1.SelectedRow;
    if (selectedRow == null) return;

    // 从选中行提取数据，注意Cells的索引要和你GridView的列顺序对应
    string rowNumber = selectedRow.Cells[0].Text;
    string userName = selectedRow.Cells[2].Text; // 对应上面自定义按钮列后的UserName列
    string email = selectedRow.Cells[3].Text;

    // 构造弹窗的HTML内容，一定要用Server.HtmlEncode防止XSS攻击
    string popupContent = $"<div class='facebox-popup'>" +
                          $"<h3>Selected Row #{rowNumber}</h3>" +
                          $"<p><strong>User Name:</strong> {Server.HtmlEncode(userName)}</p>" +
                          $"<p><strong>Email:</strong> {Server.HtmlEncode(email)}</p>" +
                          $"</div>";

    // 构造触发Facebox的脚本
    string popupScript = $"$.facebox('{Server.HtmlEncode(popupContent)}');";

    // 判断是否在UpdatePanel中，用对应的方式注册脚本
    if (ScriptManager.GetCurrent(this) != null && ScriptManager.GetCurrent(this).IsInAsyncPostBack)
    {
        ScriptManager.RegisterStartupScript(this, this.GetType(), "FaceboxPopup", popupScript, true);
    }
    else
    {
        ClientScript.RegisterStartupScript(this.GetType(), "FaceboxPopup", popupScript, true);
    }
}

几个关键注意点 #

• ViewState要开启：确保GridView的EnableViewState属性为true（默认就是true，不要手动改成false），否则回发后选中行的状态会丢失，导致拿不到正确的数据。
• XSS防护不能少：对从GridView提取的所有文本都做Server.HtmlEncode处理，避免恶意脚本被注入执行。
• UpdatePanel兼容：如果你的GridView放在UpdatePanel里，必须用ScriptManager.RegisterStartupScript注册脚本，否则异步回发后脚本不会执行。
• 资源路径要正确：Facebox的CSS、JS和相关图片的路径一定要对应项目实际位置，不然弹窗样式会错乱甚至弹不出来。

内容的提问来源于stack exchange，提问作者Amarul Samsudin