Standard header page across all internal sites
Question
We have lots of internal websites that could use a little standardization. I am looking to add a common banner page to all websites for a couple of reasons -
- Consistent look
- Easily update Banner logo
- Display announcements like server maintenance ones
We have IIS and ASP.net. I did do work around where I have the banner page as a free standing html page that sits on top of the existing site, but I'm sure there is a better way around. I don't want to go the way of master pages mainly because it changes the control ID's of pages and we have several sites that use JQuery and Javascript that would break when the control ID's change.
2 answers
solution1
0 2015-01-08 17:32:43
You can create a javascript function as below and update body tag of all pages to call that function like onload="onAllPageLoad()"
function onAllPageLoad() {
$('body').prepend('My common banner HTML elements');
}
This shall put your banner html elements as the first elements in the body tag.
solution2
0 2015-01-13 19:55:57
I was able to hack up a solution by using Jquery get function to splice the Banner page with the site page. The caveat being, each of the internal website pages must carry the get function for a uniform look. Since most of our sites are single page apps, this works for now. I have some site specific info that I want to add to the banner and any updates to the banner page are reflected on the site page.
Here is the code I came up with -
Banner.htm page:
<table width="100%" border="0"> <tr> <td style="width: 30%" align="left"> <a href="http://SiteHomePage"> <img alt="Site Home" border="0" src="http://SiteHomePage/img/SiteHomePagelogo.png" width="119px" height="67px" /></a> </td> <td style="width: 70%"> <table width="100%"> <tr> <td style="text-align:left;"> <div id="SiteName" style="font-weight: bold; font-size: 30px;"> </div> </td> <td> <div id="ExtraInfo" style="float: right; font-weight: bold; font-size: 15px;"> </div> </td> </tr> </table> </td> </tr> </table>
Default.aspx Page:
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <%--Script to add banner page starts here--%> <script runat="server"> <%--Fetch site specific info from the site web.config --%> string SiteInfo = ConfigurationManager.AppSettings["SiteInfo"]; string PageTitle = ConfigurationManager.AppSettings["PageTitle"]; <%--BannerURL value is Banner.htm--%> string BannerURL = ConfigurationManager.AppSettings["BannerURL"]; </script> <script src="//code.jquery.com/jquery-1.11.2.min.js" type="text/javascript"></script> <script type="text/javascript"> var extraInfo = '<%= SiteInfo %>'; var title = '<%= PageTitle %>'; var BannerURL = '<%= BannerURL %>'; $(document).ready(function() { $.get(BannerURL, function(data) { $("#Banner").html(data); $("#SiteName").html(title); document.title = ":: " + title + " ::"; $("#ExtraInfo").html(extraInfo); }); }); </script> <%--Script to add banner page ends here--%> </head> <body> <form id="form1" runat="server"> <div id="Banner"> </div> < %--Add site code here--%> </form> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.