• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

ASP.NET设置母版页

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

 母版页允许开发人员创建具有指定的可编辑区域的站点级模板。随后,此模板可应用到网站中的 ASP.NET 页面上。这些 ASP.NET 页面只需为母版页中指定的可编辑区域提供相应内容 – 在使用母版页的所有 ASP.NET 页面中,母版页中的所有其它标记都相同。此模型允许开发人员定义并集中实现站点级页面布局。 因此,开发人员可以方便地为所有页面创建一致的外观,并进行轻松的更新。

简而言之:在一个网站上会有很多页面,并且有可能有的页面都有相同的部分,这样的话我们就可以将相同的部分制作成一个母版页,在多个页面进行调用,节省了代码的重复使用和开发效率。

开发过程:

新建两个html文件HtmlPage1.html,HtmlPage2.html,一个web窗体WebForm.aspx,一个web窗体用户控件WebUserControl1.ascx

第一种方式,利用纯html制作

1.首先我们先用静态html制作一个母版页,再利用iframe来显示母版页

HtmlPage1.html为母版页

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <style>
        body{
            margin:0px;
        }
       
        #top{
            width:100%;
            height:100px;
            background-color:#6f5e5e;
        }
        .left{
          float:left;
         margin-top:12px;
         margin-left:25px;
        }
        .logo{
            margin-left:auto;
            margin-right:auto;
            margin-top:25px;
        }
        img{
           vertical-align:middle;
        }
        .right{
          float:right;
        }

    </style>
</head>

<body>
 <div id="top">
  <img src="img/leftcloud.png" class="left" />
     <img src="img/logo.png" class="logo" />
     <img src="img/rightcloud.png" class="right" />
 </div>
</body>
</html>

 

HtmlPage2.html来调用

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>

<body style="margin:0px">
    <iframe src="HtmlPage1.html" width="100%" height="100px"></iframe>
    //利用iframe框架标签来显示
</body>
</html>

 

 第二种方式利用ASP.NET制作

分别利用iframe框架标签和调用web用户控件来显示

用web用户控件制作母版页,因为测试所以代码跟HtmlPage1.html基本一样

web窗体用户控件WebUserControl1.ascx代码

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl1.ascx.cs" Inherits="WebApplication3.WebUserControl1" %>
<style>
        body{
            margin:0px;
        }
       
        #top{
            width:100%;
            height:100px;
            background-color:#6f5e5e;
        }
        .left{
          float:left;
         margin-top:12px;
         margin-left:25px;
        }
        .logo{
            margin-left:auto;
            margin-right:auto;
            margin-top:25px;
        }
        img{
           vertical-align:middle;
        }
        .right{
          float:right;
        }

    </style>

 <div id="top">
  <img src="img/leftcloud.png" class="left" />
     <img src="img/logo.png" class="logo" />
     <img src="img/rightcloud.png" class="right" />
 </div>
View Code

 

web窗体WebForm1.aspx调用代码

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication3.WebForm1" %>
 2 
 3 <%@ Register Src="~/WebUserControl1.ascx" TagPrefix="uc1" TagName="WebUserControl1" %>
 4 
 5 
 6 <!DOCTYPE html>
 7 
 8 <html xmlns="http://www.w3.org/1999/xhtml">
 9 <head runat="server">
10 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
11     <title></title>
12 </head>
13 <body style="margin:0px">
14      <!--两种方式嵌入不需要改变的网页显示部分-->
15     <iframe src="HtmlPage1.html" width="100%" height="100px"></iframe> <!--iframe 框架标签-->
16   
17     <form id="form1" runat="server">
18         <uc1:WebUserControl1 runat="server" id="WebUserControl1" />  
19         <!--web窗体用户控件-->
20     </form>
21 </body>
22 </html>

 

asp调用web窗体用户控件很简单,你着需要从解决方案那里把用户控件拖到代码区就行了,厉害吧


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Asp.NetCore使用Log4Net优化日志【项目开源】发布时间:2022-07-10
下一篇:
[转]ASP.NETMVC入门5、View与ViewData发布时间:2022-07-10
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap