I'm creating a site that's going to use the ASP.NET Master Page Control to transform XML/XSLT data into the content section of an ASP.NET form. I've already created the basic setup for the site (code below), and some of the content, but I have a few questions/concerns about this method:
What I don't like about the Master Page Control so far is the size of the pages. I haven't even put any content on the main section of the page, and it's already 31043 bytes in size. What are some steps that I can take to optimize this site (i.e. caching)? Also, how should I go about creating and processing a form within a transformed page using the Master Page control? Should I use XForms (like http://www.w3schools.com/xforms/default.asp) or dynamic ASP.NET server controls within XML (like http://www.dnzone.com/ShowDetail.asp?NewsId=151)?
MASTER PAGE - NavMaster.master
<%@ Master Language="VB" CodeFile="NavMaster.master.vb" Inherits="NavMaster" Debug="True" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Nav MasterPage</title>
<link rel="stylesheet" type="text/css" media="screen" href="~/docs/css/screen.css" />
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<!-- Tab navigation -->
<div id="tabs">
<asp:Menu id="Menu2" runat="server"
StaticDisplayLevels="1"
StaticSubMenuIndent="1"
StaticMenuStyle-VerticalPadding="0"
Orientation="Horizontal"
StaticEnableDefaultPopOutImage="False"
StaticMenuItemStyle-HorizontalPadding="0" StaticMenuStyle-HorizontalPadding="0">
<Items>
<asp:MenuItem NavigateUrl="default.aspx" ImageUrl="~/images/gif/tab1_active.gif" />
<asp:MenuItem NavigateUrl="~/aboutus/aboutus.aspx" ImageUrl="~/images/gif/tab2_active.gif" />
<asp:MenuItem NavigateUrl="~/depts/depts.aspx" ImageUrl="~/images/gif/tab3_active.gif" />
</Items>
</asp:Menu>
</div><!-- end tabs -->
<div id="screenleft">
<asp:contentplaceholder
id="LeftColumn"
runat="server" />
</div><!-- end screenleft -->
<div id="content">
<!-- dynamic page title -->
<h1><asp:label id="lblPageTitle" runat="server" /></h1>
<br />
<hr class="navyblueline" />
<!-- breadcrumbs -->
<asp:SiteMapPath
id="SiteMapPath1"
Runat="Server" />
<br /><br />
<!-- page content -->
<asp:contentplaceholder
id="ContentColumn"
runat="server" />
</div><!-- end content -->
<div id="screenright">
<asp:ContentPlaceHolder
id="RightColumn"
runat="server">
<asp:Image
ID="Ad1"
ImageUrl="~/images/gif/ad1.gif"
Runat="Server" />
<br />
<asp:Image
ID="Ad2"
ImageUrl="~/images/gif/ad2.gif"
Runat="Server" />
</asp:ContentPlaceHolder>
</div><!-- end screenright -->
<div id="screenfooter">
This is the footer section
</div><!-- end screenfooter -->
</div><!-- end wrapper -->
<asp:SiteMapDataSource ID="SiteMapDataSource1" runat="server" />
</form>
</body>
</html>
SITEMAP - web.sitemap
<?xml version="1.0" encoding="utf-8" ?>
<siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0">
<siteMapNode url="~/default.aspx" title="Home" description="Home">
<siteMapNode id="aboutus" url="~/aboutus/aboutus.aspx" title="About Us" description="About Us">
</siteMapNode>
<siteMapNode url="~/depts/depts.aspx" title="Departments" description="Departments">
</siteMapNode>
</siteMapNode>
</siteMap>
ASP.NET PAGE - default.aspx
<%@ Page Language="VB" MasterPageFile="~/NavMaster.master" AutoEventWireup="false" CodeFile="default.aspx.vb" Inherits="_default" title="Home Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="LeftColumn" Runat="Server">
<!-- Leftnav buttons go here -->
<div id="screenleftnav">
<div class="leftheader">About Us</div><!-- end leftheader -->
<ul>
<li><a href="">Button 1</a></li>
<li><a href="">Button 2</a></li>
<li><a href="">Button 3</a></li>
<li><a href="">more...</a></li>
</ul>
<div class="leftheader">Departments</div><!-- end leftheader -->
<ul>
<li><a href="">Button 4</a></li>
<li><a href="">Button 5</a></li>
<li><a href="">Button 6</a></li>
<li><a href="">more...</a></li>
</ul>
<br />
</div><!-- end screenleftnav -->
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentColumn" Runat="Server">
This is the main content section. This is where the XML/XSLT transformation will take place.
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="RightColumn" Runat="Server">
<div id="screenright">
This is the right content section.
</div><!-- end screenright -->
</asp:Content>
VB.NET PAGE - default.aspx.vb
Partial Class NavMaster
Inherits System.Web.UI.MasterPage
Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
lblPageTitle.Text = SiteMap.CurrentNode.Description
End Sub
End Class
RESULTING CODE
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Douglas County, Kansas - Home</title>
<link rel="stylesheet" type="text/css" media="screen" href="docs/css/screen.css" />
<style type="text/css">
.ctl00_Menu1_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
.ctl00_Menu1_1 { text-decoration:none; }
.ctl00_Menu1_2 { }
.ctl00_Menu2_0 { background-color:white;visibility:hidden;display:none;position:absolute;left:0px;top:0px; }
.ctl00_Menu2_1 { text-decoration:none; }
.ctl00_Menu2_2 { }
.ctl00_Menu2_3 { }
.ctl00_Menu2_4 { padding:0px 0px 0px 0px; }
.ctl00_Menu2_5 { padding:0px 0px 0px 0px; }
</style>
</head>
<body>
<form name="aspnetForm" method="post" action="default.aspx" id="aspnetForm">
<div>
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUJMTgxMjAzNjcwD2QWAmYPZBYCAgMPZBYEAg0PPCsADQIADxYCHgtfIURhdGFCb3VuZGdkDBQrAAIFAzA6MBQrAAIWEh4FVmFsdWUFBEhvbWUeCURhdGFCb3VuZGceCFNlbGVjdGVkZx4EVGV4dAUESG9tZR4LTmF2aWdhdGVVcmwFHC9NYXN0ZXJQYWdlU2l0ZS9kZWZhdWx0LmFzcHgeB0VuYWJsZWRnHgpTZWxlY3RhYmxlZx4HVG9vbFRpcAUESG9tZR4IRGF0YVBhdGgFHC9tYXN0ZXJwYWdlc2l0ZS9kZWZhdWx0LmFzcHgUKwAHBRcwOjAsMDoxLDA6MiwwOjMsMDo0LDA6NRQrAAIWEB8EBRBBYm91dCB0aGUgQ291bnR5HwEFEEFib3V0IHRoZSBDb3VudHkfBQUkL01hc3RlclBhZ2VTaXRlL2Fib3V0ZGMvYWJvdXRkYy5hc3B4HwgFEEFib3V0IHRoZSBDb3VudHkfBmcfB2cfCQUkL21hc3RlcnBhZ2VzaXRlL2Fib3V0ZGMvYWJvdXRkYy5hc3B4HwJnFCsAAgUDMDowFCsAAhYQHwQFCFByb2R1Y3RzHwEFCFByb2R1Y3RzHwUFJS9NYXN0ZXJQYWdlU2l0ZS9hYm91dGRjL3Byb2R1Y3RzLmFzcHgfCAUIUHJvZHVjdHMfBmcfB2cfCQUlL21hc3RlcnBhZ2VzaXRlL2Fib3V0ZGMvcHJvZHVjdHMuYXNweB8CZ2QUKwACFhAfBAULRGVwYXJ0bWVudHMfAQULRGVwYXJ0bWVudHMfBQUgL01hc3RlclBhZ2VTaXRlL2RlcHRzL2RlcHRzLmFzcHgfCAULRGVwYXJ0bWVudHMfBmcfB2cfCQUgL21hc3RlcnBhZ2VzaXRlL2RlcHRzL2RlcHRzLmFzcHgfAmcUKwACBQMwOjAUKwACFhAfBAUIU2VydmljZXMfAQUIU2VydmljZXMfBQUjL01hc3RlclBhZ2VTaXRlL2RlcHRzL3NlcnZpY2VzLmFzcHgfCAUIU2VydmljZXMfBmcfB2cfCQUjL21hc3RlcnBhZ2VzaXRlL2RlcHRzL3NlcnZpY2VzLmFzcHgfAmdkFCsAAhYQHwQFDkRpc3RyaWN0IENvdXJ0HwEFDkRpc3RyaWN0IENvdXJ0HwUFJS9NYXN0ZXJQYWdlU2l0ZS9kZXB0cy9kYy9kY19ob21lLmFzcHgfCAUORGlzdHJpY3QgQ291cnQfBmcfB2cfCQUlL21hc3RlcnBhZ2VzaXRlL2RlcHRzL2RjL2RjX2hvbWUuYXNweB8CZ2QUKwACFhAfBAUKRW1wbG95bWVudB8BBQpFbXBsb3ltZW50HwUFKy9NYXN0ZXJQYWdlU2l0ZS9kZXB0cy9hcy9wZS9lbXBsb3ltZW50LmFzcHgfCAUKRW1wbG95bWVudB8GZx8HZx8JBSsvbWFzdGVycGFnZXNpdGUvZGVwdHMvYXMvcGUvZW1wbG95bWVudC5hc3B4HwJnZBQrAAIWEB8EBRBMb2NhbCBHb3Zlcm5tZW50HwEFEExvY2FsIEdvdmVybm1lbnQfBQUqL01hc3RlclBhZ2VTaXRlL2xvY2FsX2dvdnQvbG9jYWxfZ292dC5hc3B4HwgFEExvY2FsIEdvdmVybm1lbnQfBmcfB2cfCQUqL21hc3RlcnBhZ2VzaXRlL2xvY2FsX2dvdnQvbG9jYWxfZ292dC5hc3B4HwJnZBQrAAIWEB8EBQ9PbmxpbmUgU2VydmljZXMfAQUPT25saW5lIFNlcnZpY2VzHwUFNC9NYXN0ZXJQYWdlU2l0ZS9vbmxpbmVfc2VydmljZXMvb25saW5lX3NlcnZpY2VzLmFzcHgfCAUPT25saW5lIFNlcnZpY2VzHwZnHwdnHwkFNC9tYXN0ZXJwYWdlc2l0ZS9vbmxpbmVfc2VydmljZXMvb25saW5lX3NlcnZpY2VzLmFzcHgfAmcUKwACBQMwOjAUKwACFhAfBAUHZUFsZXJ0cx8BBQdlQWxlcnRzHwUFLC9NYXN0ZXJQYWdlU2l0ZS9vbmxpbmVfc2VydmljZXMvZWFsZXJ0cy5hc3B4HwgFB2VBbGVydHMfBmcfB2cfCQUsL21hc3RlcnBhZ2VzaXRlL29ubGluZV9zZXJ2aWNlcy9lYWxlcnRzLmFzcHgfAmdkZAITDw8WAh8EBQRIb21lZGQYAQULY3RsMDAkTWVudTEPD2QFBEhvbWVkXp6pLJa+v0aDYZ0Mw0FTTM5KeMs=" />
</div>
<script type="text/javascript">
<!--
var theForm = document.forms['aspnetForm'];
if (!theForm) {
theForm = document.aspnetForm;
}
function __doPostBack(eventTarget, eventArgument) {
if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
theForm.__EVENTTARGET.value = eventTarget;
theForm.__EVENTARGUMENT.value = eventArgument;
theForm.submit();
}
}
// -->
</script>
<script src="/MasterPageSite/WebResource.axd?d=KKLQ16-PAjSAdMyUqtO2OA2&t=632996128439938112" type="text/javascript"></script>
<script src="/MasterPageSite/WebResource.axd?d=9YVgtnxkl_EC7ZeDVABhuQ2&t=632996128439938112" type="text/javascript"></script>
<div id="wrapper">
<!-- Tab navigation -->
<div id="tabs">
<a href="#ctl00_Menu2_SkipLink"><img alt="Skip Navigation Links" src="/MasterPageSite/WebResource.axd?d=C877-NPBnLlA_xyeDHjJzA2&t=632996128439938112" width="0" height="0" style="border-width:0px;" /></a>
<table id="ctl00_Menu2" class="ctl00_Menu2_5 ctl00_Menu2_2" cellpadding="0" cellspacing="0" border="0">
<tr>
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu2n0">
<table class="ctl00_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;"><a class="ctl00_Menu2_1 ctl00_Menu2_3" href="default.aspx"><img src="images/gif/tab1_active.gif" alt="" style="border-style:none;vertical-align:middle;" /></a></td>
</tr>
</table>
</td>
<td style="width:3px;"></td>
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu2n1">
<table class="ctl00_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;"><a class="ctl00_Menu2_1 ctl00_Menu2_3" href="aboutus/aboutus.aspx"><img src="images/gif/tab2_active.gif" alt="" style="border-style:none;vertical-align:middle;" /></a></td>
</tr>
</table>
</td>
<td style="width:3px;"></td>
<td onmouseover="Menu_HoverStatic(this)" onmouseout="Menu_Unhover(this)" onkeyup="Menu_Key(this)" id="ctl00_Menu2n2">
<table class="ctl00_Menu2_4" cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td style="white-space:nowrap;"><a class="ctl00_Menu2_1 ctl00_Menu2_3" href="depts/depts.aspx"><img src="images/gif/tab3_active.gif" alt="" style="border-style:none;vertical-align:middle;" /></a></td>
</tr>
</table>
</td>
</tr>
</table>
<a id="ctl00_Menu2_SkipLink"></a>
</div><!-- end tabs -->
<div id="screenleft">
<!-- Leftnav buttons go here -->
<div id="screenleftnav">
<div class="leftheader">About Us</div><!-- end leftheader -->
<ul>
<li><a href="">Button 1</a></li>
<li><a href="">Button 2</a></li>
<li><a href="">Button 3</a></li>
<li><a href="">more...</a></li>
</ul>
<div class="leftheader">Departments</div><!-- end leftheader -->
<ul>
<li><a href="">Button 4</a></li>
<li><a href="">Button 5</a></li>
<li><a href="">Button 6</a></li>
<li><a href="">more...</a></li>
</ul>
<br />
</div><!-- end screenleftnav -->
</div><!-- end screenleft -->
<div id="content">
<!-- dynamic page title -->
<h1><span id="ctl00_lblPageTitle">Home</span></h1>
<br />
<hr class="navyblueline" />
<!-- breadcrumbs -->
<span id="ctl00_SiteMapPath1"><a href="#ctl00_SiteMapPath1_SkipLink"><img alt="Skip Navigation Links" height="0" width="0" src="/MasterPageSite/WebResource.axd?d=C877-NPBnLlA_xyeDHjJzA2&t=632996128439938112" style="border-width:0px;" /></a><span>Home</span><a id="ctl00_SiteMapPath1_SkipLink"></a></span>
<br /><br />
<!-- page content -->
This is the main content section
</div><!-- end content -->
<div id="screenright">
<div id="screenright">
This is the right content section
</div><!-- end screenright -->
<div id="screenfooter">
This is the footer section
</div><!-- end screenfooter -->
</div><!-- end wrapper -->
<div>
<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWDQLLxL+WBgLIi9OIAQLf6Ie+DQLdgvPlDQKO1LKcCwLb4MClDQLggdHzAwLb4MClDQLggdHzAwLb4MClDQLggdHzAwLb4MClDQLggdHzAxNB1ZKW3G9fVbk/8m+rafTOxMR4" />
</div>
<script type="text/javascript">
<!--
var ctl00_Menu1_Data = new Object();
ctl00_Menu1_Data.disappearAfter = 5;
ctl00_Menu1_Data.horizontalOffset = 0;
ctl00_Menu1_Data.verticalOffset = 0;
var ctl00_Menu2_Data = new Object();
ctl00_Menu2_Data.disappearAfter = 500;
ctl00_Menu2_Data.horizontalOffset = 0;
ctl00_Menu2_Data.verticalOffset = 0;
// -->
</script>
</form>
</body>
</html>
KWilliams
