Asp.Net 和 Shadowbox答案

【问题标题】：Asp.Net and ShadowboxAsp.Net 和 Shadowbox
【发布时间】：2009-09-21 15:58:58
【问题描述】：

尝试从 asp:gridview 数据行中使用 Jquery 弹出一个 IFrame Shadowbox。我无法在字符串中得到正确的引号：

<asp:ImageButton ID="btnEdit" runat="server"
    OnClientClick='<%# "javascript:popAccount(\'"+ 
    Eval("id", "Popup.aspx?id={0}")+"\');" %>' />

解析器错误消息：服务器标签格式不正确。

没有转义的单引号（不能工作，但可以正确解析）：

<asp:ImageButton ID="btnEdit" runat="server"
    OnClientClick='<%# "javascript:popAccount("+ 
    Eval("id", "Popup.aspx?id={0}")+");" %>' />

客户端 HTML，正如预期的那样：

onclick="javascript:popAccount(Popup.aspx?id=3ce3b19c-1899-4e1c-b3ce-55e5c02f1);"

如何在 Javascript 中获取引号？

编辑：添加解决方案。这不是很通用，因为必须知道数据绑定类型才能访问 id 属性。键（在 GrodView 的 DataKeyNames 参数中定义）似乎没有在事件参数中公开。但它有效。

    protected void editGrid_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        // do not look at header or footer
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            ImageButton btn = e.Row.FindControl("btnPopup") as ImageButton;
            if (btn != null)
            {
                btn.OnClientClick = 
                "javascript:popAccount('EditAccountPopup.aspx?"+
                Constants.acctidParam+"="+
                ((tb_account)(e.Row.DataItem)).id.ToString()+"');";
            }
        }

【问题讨论】：

标签： asp.net javascript data-binding

【解决方案1】：

在代码隐藏中的 GridView 的 rowdatabound 事件中选择 ImageButton，并从那里添加属性。

但是您确定需要使用服务器控件吗？只是一个普通的图像怎么样？如果您要“替换” ImageButton 的点击行为，那么您似乎根本不需要它。

更新：

对于代码隐藏解决方案，我编写了这个小示例（在 VB.NET 中，抱歉）：

  Private Sub gridview1_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs) Handles gridview1.RowDataBound
    Select Case e.Row.RowType
      Case DataControlRowType.DataRow
        Dim btnEdit As ImageButton = CType(e.Row.Cells(0).FindControl("btnEdit"), ImageButton)
        Dim strID As String = CType(e.Row.DataItem, Guid).ToString

        btnEdit.Attributes.Add("onclick", String.Format("javascript:popAccount('Popup.aspx?id={0}');", strID))
    End Select
  End Sub

但是，我仍然建议您使用更简单的方法，jQuery 在这里非常出色。不需要代码隐藏中的任何代码：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
  <title></title>

  <script src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.3.2.min.js" type="text/javascript"></script>

  <script type="text/javascript" language="javascript">
    $(document).ready(function() {

      $("img.edit").click(function() {
        var sID = this.id.replace('btnEdit_', '');
        alert(sID); // Add your popup opening logic here...
      });
    });
  </script>

</head>
<body>
  <form id="form1" runat="server">
  <div>
    <asp:GridView ID="gridview2" AutoGenerateColumns="false" runat="server">
      <Columns>
        <asp:TemplateField>
          <ItemTemplate>
            <img id="btnEdit_<%#Container.DataItem %>" class="edit" />
          </ItemTemplate>
        </asp:TemplateField>
      </Columns>
    </asp:GridView>
  </div>
  </form>
</body>
</html>

【讨论】：

感谢您接受的回答。我更新了我的帖子以包含对使用代码隐藏的解决方案的建议，以及使用 jQuery 的更简单版本。

【解决方案2】：

如果您想保持代码原样，为什么不这样做呢？

<asp:ImageButton ID="btnEdit" runat="server"
    OnClientClick='<%# "javascript:popAccount(&quot"+ 
    Eval("id", "Popup.aspx?id={0}")+"&quot);" %>' />

【讨论】：

我在 IE8 兼容模式下尝试了各种文档类型（严格/过渡），但我从这一行得到了一个例外。它在标准模式下工作。