asp 元素 与html 元素的混合使用

asp 元素 与html 元素的混合使用

在编写asp.net 网面时，经常需要在<asp>的.CS文件中引用html元素，在html网页的javascript中又要引用asp 元素，通常cs文件中，html元素是不可见的，在javascript中，html元素也可见。

为此只有将html元素加上runat="server",在服务器侧的页面上this就能找到该控件（元素），同理，在JavaScript中，通常加上mainContent_前

<%@ Page Title="主页" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <script type="text/javascript">
       function bif() {
           document.getElementById("MainContent_ifr").src = "default4.aspx";           
       }
       function b2() {

           document.getElementById("MainContent_ifr").src = "default2.aspx";
       }
       function b3() {
           var b3 = top.document.getElementById("button1");

       }
       function list() {
           var sele = document.getElementById("Select1");
           document.cookie ="user=user";
           var i = sele.selectedIndex;
          // document.getElementById("b1").innerHTML ="b1-" +i.toString();
           var se = sele.options[i].value;
           
          //document.getElementById("b1").innerHTML = "b1-" + se.toString();
           switch (se) {
               case "b1":
                   this.bif();
                   
                   break;
               case "b2":
                   this.b2();
                   break;
               default:
                   document.getElementById("b1").innerHTML = "b1-" + se.toString();
                   break;
            }
       }
        function f(x) {
            switch (x) {
                case "b1":
                    this.bif();                 
                    break;
                case "b2":
                   this.b2();
                   break;
                default:
                   document.getElementById("b1").innerHTML = "b1-" + x;
                   break;
            }
        }  
          
       
   </script>
   
    <style type="text/css">
        #Select1
        {
            width: 70px;
        }
        #Select2
        {
            height: 78px;
            width: 205px;
        }
        #Button4
        {
            width: 185px;
        }
        #Button3
        {
            width: 187px;
        }
        #Button5
        {
            width: 185px;
        }
    </style>
   
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

    <div id="f1" 
        
        
        style=" float:left; width:15%;height:610px; background-color:#3399FF; top: auto; right: auto; bottom: auto; left: auto;">
       
        <asp:TreeView ID="TreeView1" runat="server" 
            onselectednodechanged="TreeView1_SelectedNodeChanged" Width="189px">
            <Nodes>
                <asp:TreeNode Text="b1" Value="b1"></asp:TreeNode>
                <asp:TreeNode Text="b2" Value="b2"></asp:TreeNode>
                <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
                <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode>
            </Nodes>
        </asp:TreeView>
       
    </div>
   <div id="D2" 
        style=" float:right; width:84%; height:610px; background-color:Blue">
       
    <iframe id="ifr" src="Default5.aspx"  style="padding: inherit; margin: auto; width: 99%; height: 95%; background-color: #AACCFF; position: relative; " 
            runat="server"  >
     </iframe> 
       <
    
       <input id="Button1" type="button" value="button1"  onclick="bif()"/>
       <input id="Button2" type="button" value="button2"  onclick="b2()"/>
       
       <select id="Select1" name="D1" onchange="list()" >
           <option  id="b1" value="b1"> 
            b1
           </option>
           <option  id="b2"  value="b2" >科目编辑</option>
          
       </select>
      
    </div>
</asp:Content>

缀，即在javascrip中就能引用。

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

public partial class _Default : System.Web.UI.Page
{
  
    protected void Page_Load(object sender, EventArgs e)
    {
        

    }

    protected void TreeView1_SelectedNodeChanged(object sender, EventArgs e)
    {
        string s = this.TreeView1.SelectedNode.Value;
       
        switch (s)
        { 
            case "b1":
                this.ifr.Attributes["src"] = "default5.aspx";
                break;
            case "b2":
                this.ifr.Attributes["src"] = "default4.aspx";
                break;
        }

    }
}