如何在代码后台文件中编写JavaScript？

Question

下面是我从GridView项目模板中获取的包含JavaScript的代码快照。它还包含了一个图像控件。

  <ItemTemplate>
    <a href="javascript:ShowChildGrid('div<%# Eval("ID#") %>');">
                        <img id="imgdiv<%# Eval("ID#") %>" alt="Click" border="0" src="plus.gif" />
    </a> </ItemTemplate>

该JS函数接受一个ID参数。现在，我如何在代码后台文件中编写JS？

这是必要的，因为我需要在gridview的行数据绑定事件中根据某些条件显示图像。

P.S.：我知道Register Startup Script和Client Script，但我不确定它们如何适合满足我的条件。

- xorpower

---

可能需要更详细的解释：DataBound事件是服务器端的事件/过程，而JavaScript仅在页面完全呈现并发送到浏览器后才能起作用。 - Hans Kesting

场景：Gridview包含一个单元格，如果变量持有值为1，则应显示加号图像（imgdiv），否则不显示图像。如果图像被显示，我将从JS（ShowChildGrid）打开子网格。此条件在gridview（Parent）rowdataBound事件中进行检查。图像的可见/隐藏也已完成。但是，如果图像可见，则子网格不会被显示，因为JS处理被遗漏了..有任何疑问，请告诉我。 - xorpower

Answer 1

如果您想在RowDataBound事件中为网格视图的每个单独项设置JS代码，您可以向ItemTemplate添加Hyperlink控件，并将此控件的NavigationUrl属性设置为JS

<ItemTemplate>
    <asp:Hyperlink runat="server" id="lnk" ImageUrl="..."/>
    ...
</ItemTemplate>

RowDataBound事件处理程序：

...
if (e.Row.RowType != DataControlRowType.DataRow)
    return;
string js = String.Format("javascript:ShowChildGrid('div{0}');", rowId);
var lnk = e.Row.FindControl("lnk") as Hyperlink;
if(lnk!=null)
{
    lnk.NavigationUrl = js;
    lnk.ImageUrl = ...;
}

当然，你也可以使用`runat`属性来使用`a`和`img`标签。

- Stephan Bauer

---

尽管我个人不喜欢使用var（如果类型已知），并且在a和img上使用runat="server"始终让我感觉像是一种hack。但您说的是正确的，您的答案是正确的。 - Bazzz

我认为OP不是在追求rowId，而是想获取字段ID的值。在这种情况下，OP仍然需要使用DataBinder.Eval(e.dataItem, "ID")来获取正确的ID值。 - Bazzz

Stephan：无法看到您在代码中所做的更改。此外，我的变量lnk也为空。为什么我的GV找不到控件？？ - xorpower

你检查了RowType吗？if (e.Row.RowType != DataControlRowType.DataRow) { return; }（我刚刚在我的代码中添加了这个）你的超链接的id是“lnk”吗？ - Stephan Bauer

这是一些非常突兀的JavaScript代码。你不能让他改变HTML并使用不显眼的JavaScript，而不是使用这种hack吗？ - Raynos

Stephan: 是的，我的超链接的ID是“lnk” @Raynos: 你能告诉我在这里应该做什么更改吗？ - xorpower

Answer 2

更改模板并使用非侵入式JavaScript。

<ItemTemplate>
    <button class="imgdiv-button" data-img-id='<%# Eval("ID#") %>'>
        <img class="imgdiv" alt="Click" border="0" src="plus.gif" />
    </button> 
</ItemTemplate>

$(".imgdiv-button").click(function() {
    ShowChildGrid($(this).data('img-id'));
});

基本上您想要一个按钮而不是链接（因为它是一个按钮）。而您只需将该img-id存储在数据属性中。

- Raynos