ASP.Net中修改div中的内容的方法

最新推荐文章于 2025-09-19 10:15:00 发布

原创最新推荐文章于 2025-09-19 10:15:00 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

本文介绍了一个简单的ASP.NET应用案例，通过点击不同按钮来动态改变页面中div元素的内容，实现显示不同iframe源的功能。该方法利用了HtmlGenericControl类的InnerHtml属性来直接操作DOM。

先简单介绍一下，下列代码的目的是通过点击按钮来实现更改div中的内容。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;    //自己添加的，这个命名空间里包含InnerHtml的方法

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

    }

    protected void  Button4_Click(object sender, EventArgs e)
    {
        this.right_content.InnerHtml = "<iframe src='program1.aspx'" + "style='width: 100%;height: 100%;'" + "></iframe>";
    }//要修改的div的id为right_content

    protected void  Button5_Click(object sender, EventArgs e)
    {
        this.right_content.InnerHtml = "<iframe src='program2.aspx'" + "style='width: 100%;height: 100%;'" + "></iframe>";        
    }
    protected void Button6_Click(object sender, EventArgs e)
    {
        this.right_content.InnerHtml = "<iframe src='program3.aspx'" + "style='width: 100%;height: 100%;'" + "></iframe>";
    }
    protected void Button7_Click(object sender, EventArgs e)
    {
        this.right_content.InnerHtml = "<iframe src='program4.aspx'" + "style='width: 100%;height: 100%;'" + "></iframe>";
    }
}//自己添加的，这个命名空间里包含InnerHtml的方法

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

    }

    protected void  Button4_Click(object sender, EventArgs e)
    {
        this.right_content.InnerHtml = "<iframe src='program1.aspx'" + "style='width: 100%;height: 100%;'" + "></iframe>";
    }//要修改的div的id为right_content

    protected void  Button5_Click(object sender, EventArgs e)
    {
        this.right_content.InnerHtml = "<iframe src='program2.aspx'" + "style='width: 100%;height: 100%;'" + "></iframe>";        
    }
    protected void Button6_Click(object sender, EventArgs e)
    {
        this.right_content.InnerHtml = "<iframe src='program3.aspx'" + "style='width: 100%;height: 100%;'" + "></iframe>";
    }
    protected void Button7_Click(object sender, EventArgs e)
    {
        this.right_content.InnerHtml = "<iframe src='program4.aspx'" + "style='width: 100%;height: 100%;'" + "></iframe>";
    }
}

关于 InnerHtml 和 innerHTML的辨析

对于innerHTML 属性，几乎所有的元素都有innerHTML属性，它是一个字符串，用来设置或获取位于对象起始和结束标签内的HTML。（获取HTML当前标签的起始和结束里面的内容）