用服务器控件在后台调用前台客户端JS方法

今天试着研究了一下服务器控件来控制JS代码(可见不仅仅HTML控件可以调用JS方法,服务器控件也可以调用JS方法),

本人觉得有点实用,现分享如下:

前台代码如下:

 js方法:<script language="javascript">
function check()
{
    if(document.all("CheckBox1").checked==true)
    {
       alert("OK");
      //document.getElementById('TextBox1').style.visibility="hidden";
      document.all('TextBox1').style.display="none"; //两种方法均可控制TextBox的显示与隐藏。
    }
    else
    {
     //document.getElementById('TextBox1').style.visibility="visible";
     document.all('TextBox1').style.display="block";  //两种方法均可控制TextBox的显示与隐藏。
    }
}
</script>

一个TextBox和一个CheckBox。效果通过点击CheckBox来控制TextBox的显示与隐藏。

<body>
    <form id="form1" runat="server">
    <div>
        <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:CheckBox ID="CheckBox1" runat="server" />
    </div>
    </form>
</body>

在后台页面来调用JS方法,如下:

protected void Page_Load(object sender, EventArgs e)
    {
        CheckBox1.Attributes.Add("onclick","check()");
    }

 

 

一般常用的客户端调用的方法如下:

JS方法不变,只是修改控件为HTML控件即可:

<body>
    <form id="form1" runat="server">
    <div>
        &nbsp;<input id="TextBox1" type="text" />
        <input id="Checkbox1" type="checkbox" onclick="check()" />

    </div>
    </form>
</body>

 

 另外还有两种方法,

(1).直接在服务器控件后面加上onclick事件,后台不写代码。也行,如下:

<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
        <asp:CheckBox ID="CheckBox1" runat="server" onclick="check()" />

(2).在工具箱中拖两个HTML控件,然后鼠标右键,选“作为服务器控件运行”如下:

     <input id="TextBox1" type="text" runat="server" />
     <input id="Checkbox1" type="checkbox"  runat="server" />

然后再在后台页面来调用JS方法,如下:

protected void Page_Load(object sender, EventArgs e)
    {
        CheckBox1.Attributes.Add("onclick","check()");
    }

posted @ 2009-05-17 15:20  Daniel_Lu  阅读(505)  评论(0编辑  收藏  举报