服务器控件与JavaScript

服务器控件与JavaScript
    我们用js访问服务器Button控件，
    Function AspButtonClick(){document.form1.Button1.value="我被单击了"; }
    这段js是放在<head></head>里的。
    <form id="form2" runat="server">
    <div>
      <asp:Button ID="Butt1on1" runat="server" Text="我是AspButton" OnClick="AspButtonClick()" />
    </div>
    </form>
    这样做的话会得到以下错误：
    CS0117: “ASP.default13_aspx”并不包含“AspButtonClick”的定义
    为什么会得到这样的错误呢？我认为是这个button是服务器的，在服务器上运行，而js是在浏览器上运行的，所以会找不到函数AspButtonClick。
    1.如果我们把<asp:Button ID="Butt1on1" runat="server" Text="我是AspButton" OnClick="AspButtonClick()" />换成<input type="button" ID="Button1" runat="server" value="我是服务器Button" onclick="AspButtonClick()" />
      就可以正确执行了。注意那个runat="sever";<input type="button" />加上不加都可以正确运行。
      如果你双击那个input，会在.cs文件里产生这样的事件protected void Button1_ServerClick(object sender, EventArgs e){}，我在里面这样做，Response.Write("你好，Web");
      但是这样会有两个单击事件处理，虽然可以理解为一个是客户端单击事件，一个是服务器单击事件，
      但结果被证实：两个事件都不能正常执行。两者只要去掉任何一个就可以正确执行。
    2.如果我们去掉单击事件，把<script language="javascript" type="text/javascript">document.form1.Button1.value="我被单击了";
    </script>
    放在<asp:Button ID="Butt1on1" runat="server" Text="我是AspButton" />的后面，代码就可以正确执行。
   对于asp:Button控件，它的单击事件也可以这样做（注意：查看—>>源文件中的javascript代码的位置）
   protected void Page_Load(object sender, EventArgs e)
    {
        Button1.Attributes.Add("onclick",
           "javascript:alert('多加注意！！！')");
    }或者
    Page.ClientScript.RegisterStartupScript(this.GetType(), "MyScript",
   "function AlertHello() { alert('你好，ASP.NET'); }", true);
Button1.Attributes["onclick"] = "AlertHello()";
Button2.Attributes["onclick"] = "AlertHello()";

   看msdn的一个例子：
   <div>
    <p>
       <asp:ImageButton id="ImageButton1"
        onmouseover="this.src='button2.gif'"
        onclick="ImageButton1_Click"
        onmouseout="this.src='button1.gif'" runat="server"
        ImageUrl="button1.gif"></asp:ImageButton>
    </p>
    <p>
       <asp:Label id="Label1" runat="server" />
    </p>
    </div>

    protected void Page_Load(object sender, EventArgs e)
{
       Page.RegisterClientScriptBlock("MyScript", _
           "if (document.images) {" +
           "MyButton = new Image;" +
           "MyButtonShaded = new Image;" +
           "MyButton.src = 'button1.gif;" +
           "MyButtonShaded.src = 'button2.gif;" +
           "}" +
           "else {" +
           "MyButton = '';" +
           "MyButtonShaded = '';" +
           "}", true);

       ImageButton1.Attributes.Add("onmouseover",
          "this.src = MyButtonShaded.src;" +
          "window.status='是的！请单击此处！';");
       ImageButton1.Attributes.Add("onmouseout",
          "this.src = MyButton.src;" +
          "window.status='';");
    }

protected void ImageButton1_Click(object sender, ImageClickEventArgs e)
{
     Label1.Text = "回发！";
}

-->
     

<head runat="server">
    <title>无标题页</title>
    <script language="javascript" type="text/javascript">
       function checkAll()
       {
           //alert(document.getElementById("CheckBoxList1").getElementsByTagName("input").length);
           for(var i=0;i<document.getElementById("CheckBoxList1").getElementsByTagName("input").length;i++)
           {
               document.getElementById("CheckBoxList1_"+i).checked=true;
           }
       }
       function deleteAll()
       {
           for(var i=0;i<document.getElementById("CheckBoxList1").getElementsByTagName("input").length;i++)
           {
               document.getElementById("CheckBoxList1_"+i).checked=false;
           }
       }
       function reverseAll()
       {
           for(var i=0;i<document.getElementById("CheckBoxList1").getElementsByTagName("input").length;i++)
           {
               var objCheck=document.getElementById("CheckBoxList1_"+i);
               if(objCheck.checked)
                   objCheck.checked=false;
               else objCheck.checked=true;
           }
       }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:CheckBoxList ID="CheckBoxList1" runat="server">
            <asp:ListItem >1232</asp:ListItem>
            <asp:ListItem >254</asp:ListItem>
            <asp:ListItem Value="5643">5643</asp:ListItem>
            <asp:ListItem>789</asp:ListItem>
            <asp:ListItem>654</asp:ListItem>
            <asp:ListItem>564</asp:ListItem>
            <asp:ListItem>8564</asp:ListItem>
            <asp:ListItem>8564</asp:ListItem>
            <asp:ListItem>5452</asp:ListItem>
            <asp:ListItem>5641</asp:ListItem>
        </asp:CheckBoxList>
    </div>
    <div>
         <input type="button" onclick="checkAll()" value="全选"/>
         <input type="button" onclick="deleteAll()" value="取消" />
         <input type="button" onclick="reverseAll()" value="反选" />
    </div>
    </form>
</body>
</html>

posted on 2009-01-09 12:32 几度夕阳红了阅读(836) 评论(0) 编辑收藏举报