再谈客户端脚本与 WebControl

在 asp.net 中，在为服务器端控件添加客户端脚本（比如 onclick 事件）时，比较常用的方法就是设置此服务器端控件的 Attributes。比如： control.Attributes["onclick"] = "return(window.confirm('....'));"; 。然而，在使用上述方法的时候，我们必须要拥有此控件的引用。可是，在某些情况下，我们是不太好获取（或者说获取非常麻烦）所需要的控件的引用的。比如在一个 DataGrid 控件中，需要为一个用于删除的控件添加确认的脚本：

<asp:DataGrid runat="server" >
  <Columns>
    <asp:TemplateColumn>
      <ItemTemplate>
        <asp:LinkButton runat="server" CommonName="Delete"> 删除 <asp:LinkButton>
      </ItemTemplate>
    </asp:TemplateColumn>
  </Columns>
</asp:DataGrid>

要实现上述的功能，我们当然希望像普通 html 控件那样设置一下某个属性就可以了。可是，大家也知道，asp.net 会将设置的 onclick属性之当成是服务器的方法而不能编译成功。最后，可能还需要使用 DataGrid.ItemCreate 等，非常麻烦。

再仔细想想，其实我们的目的只是需要在此 LinkButton 控件被显示（也就是在 Render 方法被执行）之前在它的 Attributes 属性里面设置 onclick。既然这样，我们可以写一个从 System.Web.UI.WebControls.LinkButton 类继承的子类，它负责设置 onclick 值的这个工作。代码如下：

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace Chenglin.WebControls
{
  [ToolboxData("<{0}:ScriptLinkButton runat=server />")]
  public class ScriptLinkButton : System.Web.UI.WebControls.LinkButton
  {
    private string _script;
    private string eventType;

    [ Category("Appearance") ]
    [ DefaultValue("") ]
    public string EventType
    {
      get { return eventType;   }
      set { eventType = value;  }
    }

    [ Bindable(true) ]
    [ Category("Appearance") ]
    [ DefaultValue("") ]
    public string Script
    {
      get { return _script;   }
      set { _script = value;  }
    }

    protected override void Render(HtmlTextWriter writer)
    {
      if( EventType!=null && EventType.Length>0 ) {
        Attributes[ EventType ] = Script;
      }
      base.Render( writer );
    }

  }
}

使用上面的控件，我们就可以将上述代码改写成：

<asp:DataGrid runat="server" >
  <Columns>
    <asp:TemplateColumn>
      <ItemTemplate>
        <chenglin:ScriptLinkButton
          EventType="onclick"
          Script="return(window.confirm('Are you sure?'));"
          runat="server" CommonName="Delete"> 删除 <chenglin:ScriptLinkButton>
      </ItemTemplate>
    </asp:TemplateColumn>
  </Columns>
</asp:DataGrid>

现在看起来，整个代码就清爽很多了 :)