<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>PeterKellner.net &#187; How Things Work</title>
	<atom:link href="http://peterkellner.net/category/how-things-work/feed/" rel="self" type="application/rss+xml" />
	<link>http://peterkellner.net</link>
	<description>Microsoft Focused, JavaScript,HTML5 (ExtJS, SenchaTouch &#38; Windows 8 Metro)</description>
	<lastBuildDate>Fri, 11 May 2012 16:43:17 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Not Using Session in ASP.NET means Session Affinity/Sticky Sessions Not Necessary in Web Farms!</title>
		<link>http://peterkellner.net/2009/04/03/aspnet-session-provider-stefan-schackow-thread-affinity/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=aspnet-session-provider-stefan-schackow-thread-affinity</link>
		<comments>http://peterkellner.net/2009/04/03/aspnet-session-provider-stefan-schackow-thread-affinity/#comments</comments>
		<pubDate>Sat, 04 Apr 2009 04:51:53 +0000</pubDate>
		<dc:creator>Peter Kellner</dc:creator>
				<category><![CDATA[ASP.NET 3.5]]></category>
		<category><![CDATA[C#]]></category>
		<category><![CDATA[How Things Work]]></category>
		<category><![CDATA[IIS7]]></category>
		<category><![CDATA[Security]]></category>
		<category><![CDATA[WebFarm]]></category>

		<guid isPermaLink="false">http://peterkellner.net/2009/04/03/aspnet-session-provider-stefan-schackow-thread-affinity/</guid>
		<description><![CDATA[So, I’ve always incorrectly thought that somehow, the cookie stored in asp.net was somehow tied to the Session provider in asp.net.&#160; Turns out I’m wrong.&#160; This came up because I was discussing with another engineer whether we need to bother with a Session provider since we do not use Session in our web application.&#160; That [...]]]></description>
			<content:encoded><![CDATA[<p>So, I’ve always incorrectly thought that somehow, the cookie stored in <a href="http://www.asp.net/">asp.net</a> was somehow tied to the Session provider in asp.net.&#160; Turns out I’m wrong.&#160; This came up because I was discussing with another engineer whether we need to bother with a Session provider since we do not use Session in our <a href="http://en.wikipedia.org/wiki/Server_farm">web application</a>.&#160; That is, we don’t ever store information by saying something like: </p>
<p>Session[“MyKey1”] = “MyShoppingCartInfo1”;</p>
<p>My assumption was that somehow, the Cookie planted on the client’s browser was in lock step with the IIS server through Session and that even if we did not store Session data, we still had to hook up a Session Provider.&#160; Wrong I am.</p>
<p> <span id="more-283"></span>
<p>I emailed <a href="http://www.amazon.com/Professional-ASP-NET-Security-Membership-Management/dp/0764596985">Stefan Schackow</a>, a Microsoft employee who is an expert on all things secure around <a href="http://www.iis.net/">IIS</a> and ASP.NET and he assured me of this fact.&#160; In fact, I’m going to quote (with his permission) what he told me.</p>
<blockquote><p><em>If your app doesn’t use Session anywhere then it doesn’t matter.&#160; We don’t internally rely on session state for anything.&#160; You could literally pull the SessionStateModule out of the configured httpModules list and it would have no effect.</em></p>
<p><em>This is a point of confusion for developers because the term “session” is overloaded.&#160; For some of the EJB platforms “session” implies things like authenticated sessions.&#160; But for </em><a href="http://ASP.NET"><em>ASP.NET</em></a><em> session is just a bag of data – if your application doesn’t use it, you can completely ignore the feature.</em></p>
</blockquote>
<p>I hope this helps you if you were misguided like I was.</p>
]]></content:encoded>
			<wfw:commentRss>http://peterkellner.net/2009/04/03/aspnet-session-provider-stefan-schackow-thread-affinity/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>How to do URL Rewrites with ASP.NET 2.0 3.0 3.5 on IIS6 and IIS7 and What is Wild Card Mapping</title>
		<link>http://peterkellner.net/2008/08/24/urlrewrite-with-aspnet-urlrewriter-wildcard-mapping-iis6-iis7/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=urlrewrite-with-aspnet-urlrewriter-wildcard-mapping-iis6-iis7</link>
		<comments>http://peterkellner.net/2008/08/24/urlrewrite-with-aspnet-urlrewriter-wildcard-mapping-iis6-iis7/#comments</comments>
		<pubDate>Mon, 25 Aug 2008 03:19:02 +0000</pubDate>
		<dc:creator>Peter Kellner</dc:creator>
				<category><![CDATA[ASP.NET 2.0]]></category>
		<category><![CDATA[ASP.NET 3.5]]></category>
		<category><![CDATA[Best Practices]]></category>
		<category><![CDATA[C#]]></category>
		<category><![CDATA[How Things Work]]></category>
		<category><![CDATA[Page Handlers]]></category>

		<guid isPermaLink="false">http://peterkellner.net/2008/08/24/urlrewrite-with-aspnet-urlrewriter-wildcard-mapping-iis6-iis7/</guid>
		<description><![CDATA[<p>A Step by step tutorial on how to use WildCard Mapping for processing URL requests.  It includes how to set it with IIS6 and IIS7.  It also discusses the theory behind how it works and talks about a great open source packaged called URLRewriter.Net.  Basically, how to resolve http://mydomain.com/Home to http://mydomain.com/HomeSite/Home.aspx which looks so much nicer.</p>]]></description>
			<content:encoded><![CDATA[<h2>The Problem</h2>
<p>Over the past several years I&#8217;ve found myself running into the same problem over and over so I thought I&#8217;d blog the solution so at least I don&#8217;t waste time figuring it out again.&#160; So, when do you need this?&#160; The answer for me is that I want to be able reference a web site without having to expose the underlying site structure.&#160; For example, on the home page of my business, I want people to be able to type <a href="http://73rdstreet.com/Home">http://73rdstreet.com/Home</a> and be taken to <a title="http://www.73rdstreet.com/HomeSite/Home.aspx" href="http://www.73rdstreet.com/HomeSite/Home.aspx">http://www.73rdstreet.com/HomeSite/Home.aspx</a>. </p>
<h2>The Symptom</h2>
<p>You may see errors that say something like: </p>
<p>Server Error in Application &#8230; HTTP Error 404.0 &#8211; Not Found</p>
<p> <span id="more-142"></span>
<p><strong>The resource you are looking for has been removed, had its name changed, or is temporarily unavailable.</strong></p>
<p><a href="http://msdn.microsoft.com/en-us/library/system.web.httpapplication.maprequesthandler.aspx">MapRequestHandler</a> StaticFile</p>
<p>And the screen may show something like this.</p>
<p><a href="http://www.peterkellner.net/FilesForWebDownload/How.0plusonIIS6andIIS7andWhatisWildCardM_10C46/x.png"><img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" border="0" alt="x" src="http://www.peterkellner.net/FilesForWebDownload/How.0plusonIIS6andIIS7andWhatisWildCardM_10C46/x_thumb.png" width="537" height="397" /></a></p>
<p>If this happens, read on. </p>
<h2>Theory</h2>
<p>The first thing to understand is that <a href="http://www.microsoft.com/WindowsServer2003/IIS/Default.mspx">IIS</a> by default will pass to the asp.net process only the requests that have a certain file extension.&#160; That is, <a href="http://www.eggheadcafe.com/articles/20030113.asp">aspx,ashx</a>,etc.&#160; Basically, only file extensions that have a handler defined for them to be processed by.&#160; Other URL&#8217;s that don&#8217;t meet the criteria are not passed to IIS.&#160; This includes no file extension at all.&#160; There is a good reason for this.&#160; One, it makes processing of things like images (jpg&#8217;s, gif&#8217;s, etc.) faster because they do not every have to be processed through the asp.net worker process.&#160; Secondly, it lowers the exposure of the asp.net worker process so that it is less likely to be compromised. </p>
<p>So, the first thing that has to be done is to tell IIS to pass all requests through using something called Wild Card Mapping.&#160; Then, once this is done, the request comes through to the asp.net worker process regardless of what it is.&#160; As we know, the place that we would have to process this is an <a href="http://msdn.microsoft.com/en-us/library/9b9dh535.aspx">HttpModule</a>.&#160; The reason is that since it&#8217;s not a page yet, we have no idea what to do with it.&#160; Basically modules let you tap into the request at different stages.&#160; To do the rewrite from ../Home to ../HomeSite/Home.aspx we want to tap into the <a href="http://msdn.microsoft.com/en-us/library/ms227673.aspx">Application_BeginRequest</a> event.&#160; The Context.<a href="http://msdn.microsoft.com/en-us/library/ms223300.aspx">RewritePath</a> method is called at that point to force a new path based on what we want (hopefully not hard coded).</p>
<p>After the ReWritePath is set, the page is processed as if is going to the correct page.</p>
<h2>How To Set Wild Card Mapping in IIS6</h2>
<p>To Set Wild Care Mapping in IIS6 you need to do the following.</p>
<p>Run inetmgr and navigate to the Properties page of the website you want to set.</p>
<p><a href="http://www.peterkellner.net/FilesForWebDownload/How.0plusonIIS6andIIS7andWhatisWildCardM_10C46/test.jpg"><img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" border="0" alt="test" src="http://www.peterkellner.net/FilesForWebDownload/How.0plusonIIS6andIIS7andWhatisWildCardM_10C46/test_thumb.jpg" width="272" height="332" /></a>&#160;</p>
<p>Then, from the properties page, click the Configuration button as shown below.</p>
<p><a href="http://www.peterkellner.net/FilesForWebDownload/How.0plusonIIS6andIIS7andWhatisWildCardM_10C46/t.jpg"><img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" border="0" alt="t" src="http://www.peterkellner.net/FilesForWebDownload/How.0plusonIIS6andIIS7andWhatisWildCardM_10C46/t_thumb.jpg" width="280" height="281" /></a></p>
<p>Then, press the insert button on the configuration screen and see the following screen and then click on the insert button.</p>
<p><a href="http://www.peterkellner.net/FilesForWebDownload/How.0plusonIIS6andIIS7andWhatisWildCardM_10C46/t6.jpg"><img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" border="0" alt="t[6]" src="http://www.peterkellner.net/FilesForWebDownload/How.0plusonIIS6andIIS7andWhatisWildCardM_10C46/t6_thumb.jpg" width="288" height="320" /></a></p>
<p>Now, insert your asp.net isapi dll.&#160; On my system, the file is here:&#160; C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\aspnet_isapi.dll.&#160; Make sure to uncheck the box &quot;Verify that file exists&quot;.</p>
<p><a href="http://www.peterkellner.net/FilesForWebDownload/How.0plusonIIS6andIIS7andWhatisWildCardM_10C46/t9.jpg"><img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" border="0" alt="t[9]" src="http://www.peterkellner.net/FilesForWebDownload/How.0plusonIIS6andIIS7andWhatisWildCardM_10C46/t9_thumb.jpg" width="430" height="126" /></a></p>
<p>That&#8217;s it! Now, all requests will be processed through you asp.net pipeline so you will be able to intercept anything on the URL you want.&#160; Be careful though, you may get more than you ask for! </p>
<h2>How To Set Wildcard Mapping in IIS7</h2>
<p>In IIS7 things are a little different.&#160; First thing you need to do is unlock the config section &quot;handlers&quot;. You do this by bring up a DOS prompt and entering the command: </p>
<p>C:\Windows\System32\inetsrv&gt;appcmd.exe unlock config /section:system.webserver/handlers</p>
<p>Then, you can set your wildcard handler in your web.config file as follows.</p>
<p>Now, the default handlers will be executed in your web.config file, and of course, all the defaults for that are in the chain of files that inherits from.&#160; For more details on that, see this FAQ: <a href="http://forums.asp.net/p/1117776/1736929.aspx">Configuration Files FAQs (web.config, machine.config&#8230;)</a>.</p>
<p>You may need to add the wildcard mapper handler to your web.config.&#160; To do this, you would put the following in your web.config</p>
<pre class="csharpcode"><span class="kwrd">&lt;?</span><span class="html">xml</span> <span class="attr">version</span><span class="kwrd">=&quot;1.0&quot;</span> <span class="attr">encoding</span><span class="kwrd">=&quot;UTF-8&quot;</span>?<span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">configuration</span><span class="kwrd">&gt;</span>
    <span class="kwrd">&lt;</span><span class="html">system.webServer</span><span class="kwrd">&gt;</span>
        <span class="kwrd">&lt;</span><span class="html">handlers</span><span class="kwrd">&gt;</span>
            <span class="kwrd">&lt;</span><span class="html">add</span> <span class="attr">name</span><span class="kwrd">=&quot;WildCard&quot;</span> <span class="attr">path</span><span class="kwrd">=&quot;*&quot;</span> <span class="attr">verb</span><span class="kwrd">=&quot;*&quot;</span> <span class="attr">type</span><span class="kwrd">=&quot;sampletype&quot;</span> <span class="attr">resourceType</span><span class="kwrd">=&quot;Unspecified&quot;</span> <span class="kwrd">/&gt;</span>
        <span class="kwrd">&lt;/</span><span class="html">handlers</span><span class="kwrd">&gt;</span>
    <span class="kwrd">&lt;/</span><span class="html">system.webServer</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">configuration</span><span class="kwrd">&gt;</span></pre>
<p>Now, you should be set. See the next section for a good method for actually doing the remapping, which is why we went down this path in the first place.</p>
<h2>Implementing a URL ReWriter for Mapping ../Home to ../HomeSite/Home.aspx</h2>
<p>So, as discussed in the theory section above, you could write your own code to map what you want to where you want it.&#160; You could put in your global.asax some code for the Application_BeginRequest and make a big case statement for everything you want to do.&#160; Well, as we know, that would give your code a bad smell and we don&#8217;t want that because soon, you will find yourself using cut and paste and other problematic crutches.</p>
<p>So, to avoid all that, and do what <a href="http://weblogs.asp.net/scottgu">Scott Guthrie</a> suggests, use the open source package <a href="http://urlrewriter.net/">UrlRewriter.NET</a>.&#160; It&#8217;s light-weight and configurable through a small section in your web.config. Before putting in the what to do, here are the steps to make UrlRewriter work in a very simple way (the way I use it on my <a href="http://73rdstreet.com/Home">company home page</a>.</p>
<p>In your &lt;System.web&gt; of your web.config place a definition for a new config section where you will put your rewrites</p>
<div class="csharpcode">
<pre class="alt"><span class="kwrd">&lt;</span><span class="html">configuration</span><span class="kwrd">&gt;</span></pre>
<pre>    <span class="kwrd">&lt;</span><span class="html">configSections</span><span class="kwrd">&gt;</span></pre>
<pre class="alt">      <span class="kwrd">&lt;</span><span class="html">section</span> <span class="attr">name</span><span class="kwrd">=&quot;rewriter&quot;</span> <span class="attr">requirePermission</span><span class="kwrd">=&quot;false&quot;</span> </pre>
<pre>        <span class="attr">type</span><span class="kwrd">=&quot;Intelligencia.UrlRewriter.Configuration.RewriterConfigurationSectionHandler, Intelligencia.UrlRewriter&quot;</span><span class="kwrd">/&gt;</span></pre>
</div>
<style type="text/css">
<p>.csharpcode, .csharpcode pre
{
	font-size: small;
	color: black;
	font-family: consolas, "Courier New", courier, monospace;
	background-color: #ffffff;
	/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt 
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}
.csharpcode .lnum { color: #606060; }</style>
<p>&#160;</p>
<p>Then, put the module that actually does the work of the rewrite as described in the theory section above</p>
<div class="csharpcode">
<pre class="alt">&lt;system.web&gt;</pre>
<pre>   &lt;httpModules&gt;</pre>
<pre class="alt">     &lt;add name=<span class="str">&quot;UrlRewriter&quot;</span> </pre>
<pre>           type=<span class="str">&quot;Intelligencia.UrlRewriter.RewriterHttpModule, Intelligencia.UrlRewriter&quot;</span> /&gt;</pre>
<pre class="alt">     &lt;/httpModules&gt;</pre>
<pre>       ..</pre>
</div>
<style type="text/css">
<p>.csharpcode, .csharpcode pre
{
	font-size: small;
	color: black;
	font-family: consolas, "Courier New", courier, monospace;
	background-color: #ffffff;
	/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt 
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}
.csharpcode .lnum { color: #606060; }</style>
<p>Then, further down in your web.config put</p>
<div class="csharpcode">
<pre class="alt"><span class="kwrd">&lt;</span><span class="html">system.webServer</span><span class="kwrd">&gt;</span></pre>
<pre>  <span class="kwrd">&lt;</span><span class="html">validation</span> <span class="attr">validateIntegratedModeConfiguration</span><span class="kwrd">=&quot;false&quot;</span><span class="kwrd">/&gt;</span></pre>
<pre class="alt">  <span class="kwrd">&lt;</span><span class="html">modules</span><span class="kwrd">&gt;</span></pre>
<pre>    <span class="kwrd">&lt;</span>add name=&quot;UrlRewriter&quot;</pre>
<pre class="alt">         type=&quot;Intelligencia.U</pre>
</div>
<div class="csharpcode">&#160;</div>
<div class="csharpcode">And, Finally to actually do the redirect you need to put a new &lt;rewriter&gt; tag with a list of redirects in it.</div>
<div class="csharpcode">&#160;</div>
<div class="csharpcode">
<pre class="alt"><span class="kwrd">&lt;</span><span class="html">rewriter</span><span class="kwrd">&gt;</span></pre>
<pre>  <span class="kwrd">&lt;</span><span class="html">rewrite</span> <span class="attr">url</span><span class="kwrd">=&quot;~/Home&quot;</span> <span class="attr">to</span><span class="kwrd">=&quot;~/pages/Home.aspx&quot;</span><span class="kwrd">/&gt;</span></pre>
<pre class="alt"><span class="kwrd">&lt;/</span><span class="html">rewriter</span><span class="kwrd">&gt;</span></pre>
</div>
<style type="text/css">
<p>.csharpcode, .csharpcode pre
{
	font-size: small;
	color: black;
	font-family: consolas, "Courier New", courier, monospace;
	background-color: #ffffff;
	/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt 
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}
.csharpcode .lnum { color: #606060; }</style>
<p>That&#8217;s it!&#160; You are done.&#160; Hope this helps, or at least helps me the next time I&#8217;m searching for the same problem (for the 4th time at least).</p>
<p>References:</p>
<ul>
<li><a title="http://devtalk.dk/2007/03/19/Wildcard+Mapping+And+URL+Rewriting+On+IIS7.aspx" href="http://devtalk.dk/2007/03/19/Wildcard+Mapping+And+URL+Rewriting+On+IIS7.aspx">http://devtalk.dk/2007/03/19/Wildcard+Mapping+And+URL+Rewriting+On+IIS7.aspx</a> </li>
<li><a title="http://weblogs.asp.net/scottgu/archive/2007/02/26/tip-trick-url-rewriting-with-asp-net.aspx" href="http://weblogs.asp.net/scottgu/archive/2007/02/26/tip-trick-url-rewriting-with-asp-net.aspx">http://weblogs.asp.net/scottgu/archive/2007/02/26/tip-trick-url-rewriting-with-asp-net.aspx</a> </li>
<li><a title="http://urlrewriter.net/" href="http://urlrewriter.net/">http://urlrewriter.net/</a> </li>
<li><a title="http://forums.asp.net/t/1240344.aspx" href="http://forums.asp.net/t/1240344.aspx">http://forums.asp.net/t/1240344.aspx</a> </li>
<li><a title="http://professionalaspnet.com/archive/2007/07/27/Configure-IIS-for-Wildcard-Extensions-in-ASP.NET.aspx" href="http://professionalaspnet.com/archive/2007/07/27/Configure-IIS-for-Wildcard-Extensions-in-ASP.NET.aspx">http://professionalaspnet.com/archive/2007/07/27/Configure-IIS-for-Wildcard-Extensions-in-ASP.NET.aspx</a> </li>
<li><a title="http://professionalaspnet.com/archive/2007/07/27/Create-an-HttpModule-to-Process-Wildcard-Extension-Mapping-in-ASP.NET.aspx" href="http://professionalaspnet.com/archive/2007/07/27/Create-an-HttpModule-to-Process-Wildcard-Extension-Mapping-in-ASP.NET.aspx">http://professionalaspnet.com/archive/2007/07/27/Create-an-HttpModule-to-Process-Wildcard-Extension-Mapping-in-ASP.NET.aspx</a> </li>
</ul>
]]></content:encoded>
			<wfw:commentRss>http://peterkellner.net/2008/08/24/urlrewrite-with-aspnet-urlrewriter-wildcard-mapping-iis6-iis7/feed/</wfw:commentRss>
		<slash:comments>26</slash:comments>
		</item>
		<item>
		<title>Using LINQ to Merge Mailing Lists and Filter Opt OutsBuilding the Code Camp Web Site (Article 5)</title>
		<link>http://peterkellner.net/2008/07/03/combine-email-lists-with-linq/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=combine-email-lists-with-linq</link>
		<comments>http://peterkellner.net/2008/07/03/combine-email-lists-with-linq/#comments</comments>
		<pubDate>Thu, 03 Jul 2008 15:33:39 +0000</pubDate>
		<dc:creator>Peter Kellner</dc:creator>
				<category><![CDATA[ASP.NET 2.0]]></category>
		<category><![CDATA[ASP.NET 3.5]]></category>
		<category><![CDATA[Code Camp Web Site Series]]></category>
		<category><![CDATA[How Things Work]]></category>
		<category><![CDATA[LINQ]]></category>

		<guid isPermaLink="false">http://peterkellner.net/?p=321</guid>
		<description><![CDATA[<br />
<p>Combining two mailing lists with LINQ, then removing a third is demonstrated in this post.  Using C# 3.0 with .Net 3.5 allows us to leverage LINQ to make this an easy process.  This post shows and explains the LINQ code to do this</p>
<br />]]></description>
			<content:encoded><![CDATA[<h2>Article Series</h2>
<table border="0" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td valign="top" width="100">Article 1:</td>
<td valign="top" width="600"><a href="http://peterkellner.net/2008/05/13/codecampwebsiteseries1/" target="_blank">Best Practices for Building an ASP.NET quality web site</a></td>
</tr>
<tr>
<td>Article 2:</td>
<td><a href="http://peterkellner.net/2008/05/19/codecampwebsiteseries2/">Multi Level ASP.NET Menu with CSS Friendly Control Adapters</a></td>
</tr>
<tr>
<td>Article 3:</td>
<td><a href="http://peterkellner.net/2008/05/25/codecampwebsiteseries3/">Creating a Theme For Each Year of Code Camp Using Skins in ASP.NET</a></td>
</tr>
<tr>
<td>Article 4:</td>
<td><a href="http://peterkellner.net/2008/06/29/sv-code-camp-web-site-series4/">Creating a Modal Login Window Using the Telerik Modal RadWindow Component</a></td>
</tr>
<tr>
<td>Article 5:</td>
<td><a href="http://peterkellner.net/2008/07/03/combine-email-lists-with-linq/">Using LINQ to Merge Mailing Lists and Filter Opt Outs</a></td>
</tr>
<tr>
<td>Article 6:</td>
<td><a href="http://peterkellner.net/2009/03/27/codecampwebsiteseries6-cssfriendly-adapters-aspnet-menu/">Multi Level ASP.NET Menu with CSS Friendly Control Adapters (The Source Code!)</a></td>
</tr>
</tbody>
</table>
<p> <br />
<h2>The Problem</h2>
<p>For the third year in a row, <a href="http://www.siliconvalley-codecamp.com/">Silicon Valley&#8217;s Code Camp</a> is happening.&#160; The way I&#8217;ve organized the data is that each year I make a fresh new sql server 2005 database catalog.&#160; this means that I have one for 2006, one for 2007 and a new one for 2008.&#160; I want to do a mailing to all people who have registered to previous code camps and who have not registered yet for this code camp.&#160; This way, I can do multiple mailings without worrying about sending to people that who have registered (which would make me look silly for not knowing they registered already).&#160; I do not like when people say things like &quot;Ignore this message if you have registered&#8230;&quot;.&#160; In addition we will maintain an opt out list so that people who do not want additional emails sent can request that and not worry about us sending more emails.</p>
</p>
<p> <span id="more-122"></span>
</p>
<h2>The Givens</h2>
<p>So, since this article is about how to solve the problem with LINQ, I will not go into details of how to create the generic lists of email addresses.&#160; Let&#8217;s assume we have methods that give us these 4 lists. They are:</p>
<ul>
<li>2006 Registered Attendees </li>
<li>2007 Registered Attendees </li>
<li>2008 Registered Attendees </li>
<li>Opt Out Email List </li>
</ul>
<p>&#160;</p>
<h2>The Code</h2>
<p>Below is the C# version 3.0 (.Net 3.5 and asp.net 3.5) that performs this function described in the problem above.&#160; The next section &quot;The Explanation&quot; gives more details on what i s happening.</p>
<p>&#160;</p>
<div class="csharpcode">
<pre class="alt"><span class="lnum">   1:  </span><span class="kwrd">using</span> System.Linq;</pre>
<pre><span class="lnum">   2:  </span>&#160;</pre>
<pre class="alt"><span class="lnum">   3:  </span><span class="rem">/// &lt;summary&gt;</span></pre>
<pre><span class="lnum">   4:  </span><span class="rem">/// shows all non registered users by going </span></pre>
<pre class="alt"><span class="lnum">   5:  </span><span class="rem">/// through past years and making a</span></pre>
<pre><span class="lnum">   6:  </span><span class="rem">/// unique query.</span></pre>
<pre class="alt"><span class="lnum">   7:  </span><span class="rem">/// &lt;/summary&gt;</span></pre>
<pre><span class="lnum">   8:  </span><span class="rem">/// &lt;returns&gt;List of all non-registered </span></pre>
<pre class="alt"><span class="lnum">   9:  </span><span class="rem">/// code campers form previous years&lt;/returns&gt;</span></pre>
<pre><span class="lnum">  10:  </span><span class="kwrd">public</span> <span class="kwrd">static</span> List&lt;ListItem&gt; LoadAllUnRegisteredCodeCampUsers()</pre>
<pre class="alt"><span class="lnum">  11:  </span>{</pre>
<pre><span class="lnum">  12:  </span>&#160;</pre>
<pre class="alt"><span class="lnum">  13:  </span>    List&lt;<span class="kwrd">string</span>&gt; codeCampersCurrentYear = </pre>
<pre><span class="lnum">  14:  </span>        GetEmailsFromPreviousYear(<span class="str">&quot;CodeCampSV06&quot;</span>);</pre>
<pre class="alt"><span class="lnum">  15:  </span>&#160;</pre>
<pre><span class="lnum">  16:  </span>    List&lt;<span class="kwrd">string</span>&gt; emailOptOut2008 = </pre>
<pre class="alt"><span class="lnum">  17:  </span>        GetDoNotRemoveList(<span class="str">&quot;CodeCampSV06&quot;</span>);</pre>
<pre><span class="lnum">  18:  </span>&#160;</pre>
<pre class="alt"><span class="lnum">  19:  </span>    List&lt;<span class="kwrd">string</span>&gt; codeCampers2007 = </pre>
<pre><span class="lnum">  20:  </span>        GetEmailsFromPreviousYear(<span class="str">&quot;PASTSV07&quot;</span>);</pre>
<pre class="alt"><span class="lnum">  21:  </span>&#160;</pre>
<pre><span class="lnum">  22:  </span>    List&lt;<span class="kwrd">string</span>&gt; codeCampers2006 = </pre>
<pre class="alt"><span class="lnum">  23:  </span>        GetEmailsFromPreviousYear(<span class="str">&quot;PASTSV06&quot;</span>);</pre>
<pre><span class="lnum">  24:  </span>&#160;</pre>
<pre class="alt"><span class="lnum">  25:  </span>    <span class="rem">// Make Combined List of 06 and 07 and unique it </span></pre>
<pre><span class="lnum">  26:  </span>    <span class="rem">// (duplicates are removed in Union)</span></pre>
<pre class="alt"><span class="lnum">  27:  </span>    IEnumerable&lt;<span class="kwrd">string</span>&gt; uniqueNamesQuery =</pre>
<pre><span class="lnum">  28:  </span>        codeCampers2006.Union(codeCampers2007).OrderBy(s =&gt; s);</pre>
<pre class="alt"><span class="lnum">  29:  </span>&#160;</pre>
<pre><span class="lnum">  30:  </span>    var emailListBeforeOptOut = </pre>
<pre class="alt"><span class="lnum">  31:  </span>        uniqueNamesQuery.Except(codeCampersCurrentYear);</pre>
<pre><span class="lnum">  32:  </span>&#160;</pre>
<pre class="alt"><span class="lnum">  33:  </span>    var emaiListAfterOptOut = </pre>
<pre><span class="lnum">  34:  </span>        emailListBeforeOptOut.Except(emailOptOut2008);</pre>
<pre class="alt"><span class="lnum">  35:  </span>&#160;</pre>
<pre><span class="lnum">  36:  </span>    List&lt;ListItem&gt;  finalList = <span class="kwrd">new</span> List&lt;ListItem&gt;();</pre>
<pre class="alt"><span class="lnum">  37:  </span>    <span class="kwrd">foreach</span> (<span class="kwrd">string</span> s <span class="kwrd">in</span> emaiListAfterOptOut)</pre>
<pre><span class="lnum">  38:  </span>    {</pre>
<pre class="alt"><span class="lnum">  39:  </span>        finalList.Add(<span class="kwrd">new</span> ListItem(s,s));</pre>
<pre><span class="lnum">  40:  </span>    }</pre>
<pre class="alt"><span class="lnum">  41:  </span>    <span class="kwrd">return</span> finalList;</pre>
<pre><span class="lnum">  42:  </span>}</pre>
<pre class="alt"><span class="lnum">  43:  </span>&#160;</pre>
</div>
<style type="text/css">
<p>.csharpcode, .csharpcode pre
{
	font-size: small;
	color: black;
	font-family: consolas, "Courier New", courier, monospace;
	background-color: #ffffff;
	/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}
.csharpcode .lnum { color: #606060; }</style>
<p>&#160;</p>
<h2>The Explanation</h2>
<p>The first line (1) is required because all the LINQ methods we are using are static extension methods.&#160; This means, that without referencing the LINQ namespace, the methods OrderBy,Except and Union would not be available to us.</p>
<p>Lines 13 to 23 call methods that populate our generic lists of strings.&#160; The reason this is done is because each of these lists come from different <a href="http://www.microsoft.com/SQL/default.mspx">SQL Server 2005</a> database catalogs. This can probably be done in <a href="http://msdn.microsoft.com/en-us/netframework/aa904594.aspx">LINQ</a> but I thought it was easier to do it this way.</p>
<p>Line 27 creates a list of unique names.&#160; The Union method has the added benefit of eliminating duplicates.&#160; OrderBy(s=&gt;s) simply creates an annonymous delegate that takes in a string and returns a string so that is what gets sorted.&#160; After giving this some thought, I&#8217;m not sure the OrderBy really helps us in anyway but this is a tutorial type article so I&#8217;m leaving it in.</p>
<p>Line 33 removes all the people who have asked to be opted out of the email.&#160; It uses the static extension method Except.</p>
<p>Finally, line 36 to 40 creates a generic list of ListItems which is what is returned by the method.&#160; ListItem&#8217;s are returned primarily because the calling method shows a list of checkboxes and this makes it easy.</p>
<p>&#160;</p>
<p>&#160;</p>
<h2>Conclusions</h2>
<p>LINQ is a great tool for managing collections.&#160; In this case we demonstrated how to take 4 generic lists of strings (collections), do some simple set operations (union,except,orderby) and produce a list of emails we want to send.&#160; Not only is it simple to code, it&#8217;s easy to maintain because the method names are so descriptive.&#160;&#160; Hopefully, this will help with your similar programming efforts.&#160; Best of luck.</p>
]]></content:encoded>
			<wfw:commentRss>http://peterkellner.net/2008/07/03/combine-email-lists-with-linq/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Creating a Modal Login Window Using the Telerik Modal RadWindow ComponentBuilding the Code Camp Web Site (Article 4)</title>
		<link>http://peterkellner.net/2008/06/29/sv-code-camp-web-site-series4/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=sv-code-camp-web-site-series4</link>
		<comments>http://peterkellner.net/2008/06/29/sv-code-camp-web-site-series4/#comments</comments>
		<pubDate>Sun, 29 Jun 2008 15:47:43 +0000</pubDate>
		<dc:creator>Peter Kellner</dc:creator>
				<category><![CDATA[ASP.NET 3.5]]></category>
		<category><![CDATA[Best Practices]]></category>
		<category><![CDATA[Code Camp Web Site Series]]></category>
		<category><![CDATA[How Things Work]]></category>

		<guid isPermaLink="false">http://peterkellner.net/?p=286</guid>
		<description><![CDATA[<br /><p>This article shows how to create a modal windows (not a popup) that displays a login windows (asking for username and password) in the middle of whatever asp.net page you are viewing.  It uses the Telerik Modal Radwindow control.  At the end of a successful login, the login dialog redirects the web user to some page designated by the author.  It requires no Javascript programming by the programmer.  Just simple method calls in the asp.net page.</p>]]></description>
			<content:encoded><![CDATA[<h3>Article Series</h3>
<table border="0" cellspacing="0" cellpadding="2">
<tbody>
<tr>
<td valign="top" width="100">Article 1:</td>
<td valign="top" width="600"><a href="http://peterkellner.net/2008/05/13/codecampwebsiteseries1/">Best Practices for Building an ASP.NET quality web site</a></td>
</tr>
<tr>
<td>Article 2:</td>
<td><a href="http://peterkellner.net/2008/05/19/codecampwebsiteseries2/">Multi Level ASP.NET Menu with CSS Friendly Control Adapters</a></td>
</tr>
<tr>
<td>Article 3:</td>
<td><a href="http://peterkellner.net/2008/05/25/codecampwebsiteseries3/">Creating a Theme For Each Year of Code Camp Using Skins in ASP.NET</a></td>
</tr>
<tr>
<td>Article 4:</td>
<td><a href="http://peterkellner.net/2008/06/29/sv-code-camp-web-site-series4/">Creating a Modal Login Window Using the Telerik Modal RadWindow Component</a></td>
</tr>
<tr>
<td>Article 5:</td>
<td><a href="http://peterkellner.net/2008/07/03/combine-email-lists-with-linq/">Using LINQ to Merge Mailing Lists and Filter Opt Outs</a></td>
</tr>
<tr>
<td>Article 6:</td>
<td><a href="http://peterkellner.net/2009/03/27/codecampwebsiteseries6-cssfriendly-adapters-aspnet-menu/">Multi Level ASP.NET Menu with CSS Friendly Control Adapters (The Source Code!)</a></td>
</tr>
</tbody>
</table>
<p> <br />
<h2>Introduction</h2>
<p>This article shows how to create a modal windows (not a popup) that displays a login windows (asking for username and password) in the middle of whatever <a href="http://www.asp.net/">asp.net</a> page you are viewing.&#160; It uses the <a href="http://www.telerik.com/products/aspnet-ajax/controls/window/overview.aspx">Telerik Modal Radwindow</a> control.&#160; At the end of a successful login, the login dialog redirects the web user to some page designated by the author.&#160; It requires no <a href="http://www.javascript.com/">Javascript</a> programming by the programmer.&#160; Just simple method calls in the <a href="http://www.asp.net/">asp.net</a> page.</p>
<p> <span id="more-118"></span> </p>
<h2>How it Looks to the Web User</h2>
<p>When the user press the login button in the upper right corner of the <a href="http://www.siliconvalley-codecamp.com/">Silicon Valley Code Camp web site</a>, below is the screen they see.</p>
<p><a href="http://peterkellner.net/wp/wp-content/uploads/2008/06/test.png">     <br /> <img style="border-right-width: 0px; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" border="0" alt="test" src="http://peterkellner.net/wp/wp-content/uploads/2008/06/test-thumb.png" width="384" height="332" /></a></p>
<p>Notice that the screen behind actually fades out and is not able to be clicked by the web user.</p>
<h2>The Method Behind Creating the Modal Window</h2>
<p>OK, so there is a little bit of javascript you need to add to your page.&#160; Basically, what you do is in your master page, around where you have your login control, you put the following code into your aspx page.</p>
<div class="csharpcode">
<pre><span class="kwrd"></span></pre>
</div>
<div class="csharpcode">
<pre class="alt"><span class="lnum">   1:  </span> <span class="kwrd">&lt;</span><span class="html">asp:ScriptManager</span> <span class="attr">ID</span><span class="kwrd">=&quot;ScriptManager1&quot;</span> <span class="attr">runat</span><span class="kwrd">=&quot;server&quot;</span> <span class="attr">EnablePartialRendering</span><span class="kwrd">=&quot;true&quot;</span> <span class="kwrd">/&gt;</span></pre>
<pre><span class="lnum">   2:  </span>    <span class="kwrd">&lt;</span><span class="html">table</span> <span class="attr">class</span><span class="kwrd">=&quot;headBar&quot;</span> <span class="attr">cellpadding</span><span class="kwrd">=&quot;0&quot;</span> <span class="attr">cellspacing</span><span class="kwrd">=&quot;0&quot;</span><span class="kwrd">&gt;</span></pre>
<pre class="alt"><span class="lnum">   3:  </span>        <span class="kwrd">&lt;</span><span class="html">tr</span><span class="kwrd">&gt;</span></pre>
<pre><span class="lnum">   4:  </span>            <span class="kwrd">&lt;</span><span class="html">td</span><span class="kwrd">&gt;</span></pre>
<pre class="alt"><span class="lnum">   5:  </span>                <span class="kwrd">&lt;</span><span class="html">div</span> <span class="attr">class</span><span class="kwrd">=&quot;headLogo&quot;</span><span class="kwrd">&gt;</span></pre>
<pre><span class="lnum">   6:  </span>                <span class="kwrd">&lt;</span><span class="html">asp:HyperLink</span> <span class="attr">ID</span><span class="kwrd">=&quot;HomeLink&quot;</span> <span class="attr">runat</span><span class="kwrd">=&quot;server&quot;</span> <span class="attr">NavigateUrl</span><span class="kwrd">=&quot;Default.aspx&quot;</span><span class="kwrd">&gt;</span></pre>
<pre class="alt"><span class="lnum">   7:  </span>                    <span class="kwrd">&lt;</span><span class="html">asp:Image</span> <span class="attr">ID</span><span class="kwrd">=&quot;HeadLogo&quot;</span> <span class="attr">SkinID</span><span class="kwrd">=&quot;ImageLogo&quot;</span> <span class="attr">AlternateText</span><span class="kwrd">=&quot;Silicon Valley codecamp_08&quot;</span></pre>
<pre><span class="lnum">   8:  </span>                        <span class="attr">runat</span><span class="kwrd">=&quot;server&quot;</span> <span class="kwrd">/&gt;</span></pre>
<pre class="alt"><span class="lnum">   9:  </span>                <span class="kwrd">&lt;/</span><span class="html">asp:HyperLink</span><span class="kwrd">&gt;</span></pre>
<pre><span class="lnum">  10:  </span>                </pre>
<pre class="alt"><span class="lnum">  11:  </span>               </pre>
<pre><span class="lnum">  12:  </span>                </pre>
<pre class="alt"><span class="lnum">  13:  </span>                <span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span></pre>
<pre><span class="lnum">  14:  </span>            <span class="kwrd">&lt;/</span><span class="html">td</span><span class="kwrd">&gt;</span></pre>
<pre class="alt"><span class="lnum">  15:  </span>            <span class="kwrd">&lt;</span><span class="html">td</span> <span class="attr">valign</span><span class="kwrd">=&quot;middle&quot;</span><span class="kwrd">&gt;</span></pre>
<pre><span class="lnum">  16:  </span>                <span class="kwrd">&lt;</span><span class="html">span</span> <span class="attr">class</span><span class="kwrd">=&quot;headDate&quot;</span><span class="kwrd">&gt;</span>Saturday and Sunday, November 8th &amp; 9th, 2008<span class="kwrd">&lt;/</span><span class="html">span</span><span class="kwrd">&gt;</span></pre>
<pre class="alt"><span class="lnum">  17:  </span>            <span class="kwrd">&lt;/</span><span class="html">td</span><span class="kwrd">&gt;</span></pre>
<pre><span class="lnum">  18:  </span>            <span class="kwrd">&lt;</span><span class="html">td</span> <span class="attr">align</span><span class="kwrd">=&quot;right&quot;</span><span class="kwrd">&gt;</span></pre>
<pre class="alt"><span class="lnum">  19:  </span>                <span class="kwrd">&lt;</span><span class="html">div</span> <span class="attr">class</span><span class="kwrd">=&quot;headLogin&quot;</span><span class="kwrd">&gt;</span></pre>
<pre><span class="lnum">  20:  </span>                    <span class="kwrd">&lt;</span><span class="html">div</span><span class="kwrd">&gt;</span></pre>
<pre class="alt"><span class="lnum">  21:  </span> </pre>
<pre><span class="lnum">  22:  </span>                        <span class="kwrd">&lt;</span><span class="html">script</span> <span class="attr">type</span><span class="kwrd">=&quot;text/javascript&quot;</span><span class="kwrd">&gt;</span></pre>
<pre class="alt"><span class="lnum">  23:  </span>                            <span class="rem">//&lt;![CDATA[</span></pre>
<pre><span class="lnum">  24:  </span>                            <span class="rem">//show the window</span></pre>
<pre class="alt"><span class="lnum">  25:  </span>                            <span class="kwrd">function</span> showDialog()</pre>
<pre><span class="lnum">  26:  </span>                            {                    </pre>
<pre class="alt"><span class="lnum">  27:  </span>                                <span class="rem">//Force reload in order to guarantee that the onload event handler </span></pre>
<pre><span class="lnum">  28:  </span>                                <span class="rem">// of the dialog which configures it executes on every show.</span></pre>
<pre class="alt"><span class="lnum">  29:  </span>                                <span class="kwrd">var</span> oWnd = window.radopen(<span class="kwrd">null</span>, <span class="str">&quot;DialogWindow&quot;</span>);</pre>
<pre><span class="lnum">  30:  </span>                                oWnd.setUrl(oWnd.get_navigateUrl());</pre>
<pre class="alt"><span class="lnum">  31:  </span>                            }</pre>
<pre><span class="lnum">  32:  </span>                            </pre>
<pre class="alt"><span class="lnum">  33:  </span>                           </pre>
<pre><span class="lnum">  34:  </span>                            <span class="rem">// Called when a window is being closed.  (force refresh)</span></pre>
<pre class="alt"><span class="lnum">  35:  </span>                            <span class="kwrd">function</span> OnClientclose(radWindow)</pre>
<pre><span class="lnum">  36:  </span>                            {     </pre>
<pre class="alt"><span class="lnum">  37:  </span>                                 window.location.href = <span class="str">&quot;News.aspx&quot;</span>;           </pre>
<pre><span class="lnum">  38:  </span>                            }    </pre>
<pre class="alt"><span class="lnum">  39:  </span>                            <span class="rem">//]]&gt;            </span></pre>
<pre><span class="lnum">  40:  </span>                        <span class="kwrd">&lt;/</span><span class="html">script</span><span class="kwrd">&gt;</span></pre>
<pre class="alt"><span class="lnum">  41:  </span> </pre>
<pre><span class="lnum">  42:  </span>                        <span class="kwrd">&lt;</span><span class="html">asp:ImageButton</span> <span class="attr">ID</span><span class="kwrd">=&quot;IDLoginButton&quot;</span> <span class="attr">SkinID</span><span class="kwrd">=&quot;ButtonLogin&quot;</span> </pre>
<pre class="alt"><span class="lnum">  43:  </span>                            <span class="attr">OnClientClick</span><span class="kwrd">=&quot;showDialog();return false;&quot;</span></pre>
<pre><span class="lnum">  44:  </span>                            <span class="attr">runat</span><span class="kwrd">=&quot;server&quot;</span> <span class="kwrd">/&gt;</span>   </pre>
<pre class="alt"><span class="lnum">  45:  </span>                        <span class="kwrd">&lt;</span><span class="html">asp:LoginStatus</span> <span class="attr">ID</span><span class="kwrd">=&quot;IDLoginStatus1&quot;</span> <span class="attr">runat</span><span class="kwrd">=&quot;server&quot;</span> <span class="kwrd">/&gt;</span></pre>
<pre><span class="lnum">  46:  </span>                        <span class="kwrd">&lt;</span><span class="html">asp:LoginName</span> <span class="attr">runat</span><span class="kwrd">=&quot;server&quot;</span> <span class="attr">ID</span><span class="kwrd">=&quot;IDLoginName1&quot;</span> <span class="kwrd">/&gt;</span></pre>
<pre class="alt"><span class="lnum">  47:  </span>                        <span class="kwrd">&lt;</span><span class="html">telerik:RadWindowManager</span> <span class="attr">ID</span><span class="kwrd">=&quot;Singleton&quot;</span> <span class="attr">runat</span><span class="kwrd">=&quot;server&quot;</span><span class="kwrd">&gt;</span></pre>
<pre><span class="lnum">  48:  </span>                            <span class="kwrd">&lt;</span><span class="html">Windows</span><span class="kwrd">&gt;</span></pre>
<pre class="alt"><span class="lnum">  49:  </span>                                <span class="kwrd">&lt;</span><span class="html">telerik:RadWindow</span> <span class="attr">ID</span><span class="kwrd">=&quot;DialogWindow&quot;</span> <span class="attr">Behaviors</span><span class="kwrd">=&quot;Close&quot;</span> </pre>
<pre><span class="lnum">  50:  </span>                                    <span class="attr">ReloadOnShow</span><span class="kwrd">=&quot;true&quot;</span> <span class="attr">OnClientClose</span><span class="kwrd">=&quot;OnClientclose&quot;</span></pre>
<pre class="alt"><span class="lnum">  51:  </span>                                    <span class="attr">BackColor</span><span class="kwrd">=&quot;Gray&quot;</span> <span class="attr">Modal</span><span class="kwrd">=&quot;true&quot;</span> <span class="attr">runat</span><span class="kwrd">=&quot;server&quot;</span> <span class="attr">Height</span><span class="kwrd">=&quot;250&quot;</span> </pre>
<pre><span class="lnum">  52:  </span>                                    <span class="attr">NavigateUrl</span><span class="kwrd">=&quot;./Login.aspx&quot;</span><span class="kwrd">&gt;</span></pre>
<pre class="alt"><span class="lnum">  53:  </span>                                <span class="kwrd">&lt;/</span><span class="html">telerik:RadWindow</span><span class="kwrd">&gt;</span></pre>
<pre><span class="lnum">  54:  </span>                            <span class="kwrd">&lt;/</span><span class="html">Windows</span><span class="kwrd">&gt;</span></pre>
<pre class="alt"><span class="lnum">  55:  </span>                        <span class="kwrd">&lt;/</span><span class="html">telerik:RadWindowManager</span><span class="kwrd">&gt;</span></pre>
<pre><span class="lnum">  56:  </span>                        </pre>
<pre class="alt"><span class="lnum">  57:  </span>                        <span class="kwrd">&lt;</span><span class="html">asp:HyperLink</span> <span class="attr">ID</span><span class="kwrd">=&quot;HyperLinkForgotChangePassword&quot;</span> <span class="attr">runat</span><span class="kwrd">=&quot;server&quot;</span> </pre>
<pre><span class="lnum">  58:  </span>                             <span class="attr">NavigateUrl</span><span class="kwrd">=&quot;~/PasswordIssues.aspx&quot;</span> <span class="attr">Text</span><span class="kwrd">=&quot;Forgot Password?&quot;</span> <span class="kwrd">&gt;&lt;/</span><span class="html">asp:HyperLink</span><span class="kwrd">&gt;</span></pre>
<pre class="alt"><span class="lnum">  59:  </span>                        </pre>
<pre><span class="lnum">  60:  </span>                    <span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span></pre>
<pre class="alt"><span class="lnum">  61:  </span>                    </pre>
<pre><span class="lnum">  62:  </span>                <span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span></pre>
<pre class="alt"><span class="lnum">  63:  </span>            <span class="kwrd">&lt;/</span><span class="html">td</span><span class="kwrd">&gt;</span></pre>
<pre><span class="lnum">  64:  </span>        <span class="kwrd">&lt;/</span><span class="html">tr</span><span class="kwrd">&gt;</span></pre>
</div>
<p>Line 22 to 40 shows the javascript.&#160; Basically, you are calling the Telerik window.radopen method which is associated with the tag on line 49.&#160; It automatically navigates to the login.aspx page which is referenced in line 52.&#160; When the page closes, the javascript on line 37 tells the browser to redirect to the News.aspx page.&#160; The reason I do this is because if you don&#8217;t change pages, I&#8217;ve found the the login cookie is not set (Authorization cookie).&#160; When this happens, even though the person is logged in, they do not see that they are until a page refresh happens.&#160; Very confusing to the user.</p>
<h2>Conclusions</h2>
<p>That is really all this is to adding a windows that displays in the middle of your page.&#160; It&#8217;s so much nicer than having to send the user to a separate page to login.&#160; They can see where they are as they are logging in.&#160; I hope this helps you.&#160; I find it a very useful technique I can use in lots of web sites.</p>
]]></content:encoded>
			<wfw:commentRss>http://peterkellner.net/2008/06/29/sv-code-camp-web-site-series4/feed/</wfw:commentRss>
		<slash:comments>6</slash:comments>
		</item>
		<item>
		<title>Why can I not Bind to a value on a DropDownList in a GridView with ASP.NET 2.0 or 3.5?</title>
		<link>http://peterkellner.net/2007/12/13/gridviewdropdownlistrow/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=gridviewdropdownlistrow</link>
		<comments>http://peterkellner.net/2007/12/13/gridviewdropdownlistrow/#comments</comments>
		<pubDate>Fri, 14 Dec 2007 00:26:44 +0000</pubDate>
		<dc:creator>Peter Kellner</dc:creator>
				<category><![CDATA[ASP.NET 2.0]]></category>
		<category><![CDATA[ASP.NET 3.5]]></category>
		<category><![CDATA[How Things Work]]></category>

		<guid isPermaLink="false">http://peterkellner.net/2007/12/13/gridviewdropdownlistrow/</guid>
		<description><![CDATA[<p>Learn how to bind a DropDownList in an asp.net 2.0/3.5 GridView Edit Row.  This will show you how to get the data back to the database and learn why Bind does not help you (hint:  SelectedValue is not our friend here).</p>]]></description>
			<content:encoded><![CDATA[<p>So, I guess I should have know the answer to why the following does not work.&nbsp; Basically, the scenario I have is that I have a foreign key column in my GridView that I want to show as a DropDownList of values.&nbsp; The code below shows me the values in the DropDownList, but when I update it with the &#8220;edit&#8221; of the GridView row, the value does not get saved.&nbsp; Here is the code and what it looks like running:</p>
<p> <span id="more-90"></span>
<div class="csharpcode">
<pre class="alt"><span class="kwrd">&lt;</span><span class="html">asp:TemplateField</span> <span class="attr">HeaderText</span><span class="kwrd">="TemplateUsersId"</span> <span class="attr">SortExpression</span><span class="kwrd">="TemplateUsersId"</span><span class="kwrd">&gt;</span>      <span class="kwrd">&lt;</span><span class="html">EditItemTemplate</span><span class="kwrd">&gt;</span></pre>
<pre>&nbsp;</pre>
<pre class="alt">       <span class="kwrd">&lt;</span><span class="html">asp:DropDownList</span> <span class="attr">ID</span><span class="kwrd">="DropDownListUser"</span> <span class="attr">runat</span><span class="kwrd">="server"</span> <span class="attr">AutoPostBack</span><span class="kwrd">="False"</span> <span class="attr">DataSourceID</span><span class="kwrd">="SqlDataSourceUser"</span></pre>
<pre>&nbsp;</pre>
<pre class="alt">            <span class="attr">DataTextField</span><span class="kwrd">="Username"</span> <span class="attr">DataValueField</span><span class="kwrd">="id"</span> <span class="attr">SelectedValue</span><span class="kwrd">='&lt;%# Bind("TemplateUsersId") %&gt;'</span><span class="kwrd">&gt;</span></pre>
<pre>&nbsp;</pre>
<pre class="alt">         <span class="kwrd">&lt;/</span><span class="html">asp:DropDownList</span><span class="kwrd">&gt;</span></pre>
<pre>&nbsp;</pre>
<pre class="alt">         ..</pre>
</div>
<p>Notice that even though I&#8217;m using Bind rather than eval, the value does not stick.&nbsp; Well, we always have a reason so I believe it is not working because SelectedValue only has a Get (it&#8217;s read only) and the value can not be put back.&nbsp; So, the solution that works for me is to program the GridView&#8217;s Updating Row Event.&nbsp; That is, get the value from the dropdownlist, and set it in the event.&nbsp; Here is the code that is working for me.</p>
<div class="csharpcode">
<pre class="alt"> <span class="rem">/// &lt;summary&gt;    /// This Code Gets the value of the DropDownList in the EditItemTemplate.</span></pre>
<pre>&nbsp;</pre>
<pre class="alt">    <span class="rem">/// &lt;/summary&gt;</span></pre>
<pre>&nbsp;</pre>
<pre class="alt">    <span class="rem">/// &lt;param name="sender"&gt;&lt;/param&gt;</span></pre>
<pre>&nbsp;</pre>
<pre class="alt">    <span class="rem">/// &lt;param name="e"&gt;&lt;/param&gt;</span></pre>
<pre>&nbsp;</pre>
<pre class="alt">    <span class="kwrd">protected</span> <span class="kwrd">void</span> GridViewIncomingUrls_RowUpdating(<span class="kwrd">object</span> sender, GridViewUpdateEventArgs e)</pre>
<pre>&nbsp;</pre>
<pre class="alt">    {</pre>
<pre>&nbsp;</pre>
<pre class="alt">        DropDownList dropDownListUser = GridViewIncomingUrls.Rows[e.RowIndex].FindControl(<span class="str">"DropDownListUser"</span>) <span class="kwrd">as</span> DropDownList;</pre>
<pre>&nbsp;</pre>
<pre class="alt">        e.NewValues[<span class="str">"TemplateUsersId"</span>] = dropDownListUser.SelectedValue;</pre>
<pre>&nbsp;</pre>
<pre class="alt">    }</pre>
</div>
<p>Yee Ha! it works. Hope you don&#8217;t have to suffer like me and just bump into this solution</p>
]]></content:encoded>
			<wfw:commentRss>http://peterkellner.net/2007/12/13/gridviewdropdownlistrow/feed/</wfw:commentRss>
		<slash:comments>3</slash:comments>
		</item>
		<item>
		<title>Get SqlDataSource To Retrieve DefaultValue of Current User (ExpressionBuilder with ASP.NET 2.0)</title>
		<link>http://peterkellner.net/2006/09/18/expressionbuilderidentity/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=expressionbuilderidentity</link>
		<comments>http://peterkellner.net/2006/09/18/expressionbuilderidentity/#comments</comments>
		<pubDate>Mon, 18 Sep 2006 16:50:07 +0000</pubDate>
		<dc:creator>Peter Kellner</dc:creator>
				<category><![CDATA[ASP.NET 2.0]]></category>
		<category><![CDATA[How Things Work]]></category>
		<category><![CDATA[ObjectDataSource]]></category>

		<guid isPermaLink="false">http://peterkellner.net/2006/09/18/expressionbuilderidentity/</guid>
		<description><![CDATA[<p>
This article shows how to use Expression Builders in ASP.NET 2.0 to retrieve the current logged in user.  DataBinding will not work so Expression Builders is the ticket.  A small source file is created, the refernces to web.config are shown and a simple example is built.</p>]]></description>
			<content:encoded><![CDATA[<h2>Abstract</h2>
<p>This article shows how to use Expression Builders in ASP.NET 2.0 to retrieve the current logged in user. DataBinding will not work so Expression Builders is the ticket. A small source file is created, the references to web.config are shown and a simple example is built.</p>
<h2>The Problem</h2>
<p>I recently was looking at unanswered posts in the asp.net forum, specifically this one: <a href="http://forums.asp.net/thread/1402259.aspx">http://forums.asp.net/thread/1402259.aspx</a>. I thought I     <br />understood how databinding and expressions worked, but just wanted to check myself. So, I made a simple example     <br />web page just like the post shows. (see below)</p>
<p> <span id="more-33"></span>
<pre class="csharpcode"><span class="asp">&lt;%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default.aspx.cs” Inherits=”_Default” %&gt;</span>
<span class="kwrd">&lt;!</span><span class="html">DOCTYPE</span> <span class="attr">html</span> <span class="attr">PUBLIC</span> “<span class="attr">-</span>//<span class="attr">W3C</span>//<span class="attr">DTD</span> <span class="attr">XHTML</span> <span class="attr">1</span>.<span class="attr">0</span> <span class="attr">Transitional</span>//<span class="attr">EN</span>” “<span class="attr">http:</span>//<span class="attr">www</span>.<span class="attr">w3</span>.<span class="attr">org</span>/<span class="attr">TR</span>/<span class="attr">xhtml1</span>/<span class="attr">DTD</span>/<span class="attr">xhtml1-transitional</span>.<span class="attr">dtd</span>”<span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">html</span> <span class="attr">xmlns</span>=”<span class="attr">http:</span>//<span class="attr">www</span>.<span class="attr">w3</span>.<span class="attr">org</span>/<span class="attr">1999</span>/<span class="attr">xhtml</span>”<span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">head</span> <span class="attr">id</span>=”<span class="attr">Head1</span>? <span class="attr">runat</span>=”<span class="attr">server</span>”<span class="kwrd">&gt;</span>
    <span class="kwrd">&lt;</span><span class="html">title</span><span class="kwrd">&gt;</span>Untitled Page<span class="kwrd">&lt;/</span><span class="html">title</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">head</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">body</span><span class="kwrd">&gt;</span>
    <span class="kwrd">&lt;</span><span class="html">form</span> <span class="attr">id</span>=”<span class="attr">form1</span>? <span class="attr">runat</span>=”<span class="attr">server</span>”<span class="kwrd">&gt;</span>
        <span class="kwrd">&lt;</span><span class="html">div</span><span class="kwrd">&gt;</span>
            <span class="kwrd">&lt;</span><span class="html">asp:GridView</span> <span class="attr">ID</span>=”<span class="attr">GridView1</span>? <span class="attr">runat</span>=”<span class="attr">server</span>” <span class="attr">AutoGenerateColumns</span>=”<span class="attr">False</span>” <span class="attr">DataSourceID</span>=”<span class="attr">SqlDataSource1</span>?<span class="kwrd">&gt;</span>
                <span class="kwrd">&lt;</span><span class="html">Columns</span><span class="kwrd">&gt;</span>
                    <span class="kwrd">&lt;</span><span class="html">asp:BoundField</span> <span class="attr">DataField</span>=”<span class="attr">Username</span>” <span class="attr">HeaderText</span>=”<span class="attr">Username</span>” <span class="attr">SortExpression</span>=”<span class="attr">Username</span>” <span class="kwrd">/&gt;</span>
                <span class="kwrd">&lt;/</span><span class="html">Columns</span><span class="kwrd">&gt;</span>
            <span class="kwrd">&lt;/</span><span class="html">asp:GridView</span><span class="kwrd">&gt;</span>
            <span class="kwrd">&lt;</span><span class="html">asp:SqlDataSource</span> <span class="attr">ID</span>=”<span class="attr">SqlDataSource1</span>? <span class="attr">runat</span>=”<span class="attr">server</span>” <span class="attr">ConnectionString</span>=”&amp;<span class="attr">lt</span>;%$ <span class="attr">ConnectionStrings:CodeCampSV06</span> %&amp;<span class="attr">gt</span>;“
                <span class="attr">SelectCommand</span>=”<span class="attr">SELECT</span> [<span class="attr">Username</span>], [<span class="attr">Email</span>] <span class="attr">FROM</span> [<span class="attr">Attendees</span>] <span class="attr">WHERE</span> ([<span class="attr">Username</span>] = @<span class="attr">Username</span>)”<span class="kwrd">&gt;</span>
                <span class="kwrd">&lt;</span><span class="html">SelectParameters</span><span class="kwrd">&gt;</span>
                    <span class="kwrd">&lt;</span><span class="html">asp:Parameter</span> <span class="attr">Name</span>=”<span class="attr">Username</span>” <span class="attr">Type</span>=”<span class="attr">String</span>” <span class="attr">DefaultValue</span>=”&amp;<span class="attr">lt</span>;% <span class="attr">User</span>.<span class="attr">Identity</span>.<span class="attr">Name</span> %&amp;<span class="attr">gt</span>;“  <span class="kwrd">/&gt;</span>
                <span class="kwrd">&lt;/</span><span class="html">SelectParameters</span><span class="kwrd">&gt;</span>
            <span class="kwrd">&lt;/</span><span class="html">asp:SqlDataSource</span><span class="kwrd">&gt;</span>
        <span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span>
    <span class="kwrd">&lt;/</span><span class="html">form</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">body</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">html</span><span class="kwrd">&gt;</span></pre>
<p>Then, I ran it through Lutz Roeder&#8217;s .NET Reflector and got the following from the code.</p>
<p><!-- code formatted by http://manoli.net/csharpformat/ --><br />
<style type="text/css">
<p>.csharpcode, .csharpcode pre
{
	font-size: small;
	color: black;
	font-family: consolas, "Courier New", courier, monospace;
	background-color: #ffffff;
	/*white-space: pre;*/
}</p>
<p>.csharpcode pre { margin: 0em; }</p>
<p>.csharpcode .rem { color: #008000; }</p>
<p>.csharpcode .kwrd { color: #0000ff; }</p>
<p>.csharpcode .str { color: #006080; }</p>
<p>.csharpcode .op { color: #0000c0; }</p>
<p>.csharpcode .preproc { color: #cc6633; }</p>
<p>.csharpcode .asp { background-color: #ffff00; }</p>
<p>.csharpcode .html { color: #800000; }</p>
<p>.csharpcode .attr { color: #ff0000; }</p>
<p>.csharpcode .alt 
{
	background-color: #f4f4f4;
	width: 100%;
	margin: 0em;
}</p>
<p>.csharpcode .lnum { color: #606060; }</style>
<pre class="csharpcode"><span class="kwrd">private</span> Parameter __BuildControl__control6()
{
    Parameter parameter1 = <span class="kwrd">new</span> Parameter();
    parameter1.Name = “Username”;
    parameter1.Type = TypeCode.String;
    parameter1.DefaultValue = “&lt;% User.Identity.Name %&gt;”;
    <span class="kwrd">return</span> parameter1;
}</pre>
<p>It&#8217;s pretty obvious that unless there is a username of the literal string &quot;&lt;% User.Identity.Name %&gt;&quot; no records will be find. This simply means that the build provider asp.net uses is not generating any code for us with sqldatasource that will help with the DefaultValue of parameters in a SqlDataSource.</p>
<h2>The Solution</h2>
<p>Expression Builder to the rescue!</p>
<p>To solve the problem, we need to build a simple expression builder. Without going into all the details of what an expression builder is, all you need to do is put the following code in your app_code directory and call it something like ExpressionBuilderIdentity.cs.</p>
<pre class="csharpcode"><span class="kwrd">using</span> System;
<span class="kwrd">using</span> System.Data;
<span class="kwrd">using</span> System.Configuration;
<span class="kwrd">using</span> System.Web;
<span class="kwrd">using</span> System.Web.Security;
<span class="kwrd">using</span> System.Web.UI;
<span class="kwrd">using</span> System.Web.UI.WebControls;
<span class="kwrd">using</span> System.Web.UI.WebControls.WebParts;
<span class="kwrd">using</span> System.Web.UI.HtmlControls;
<span class="kwrd">using</span> System.Web.Compilation;
<span class="kwrd">using</span> System.CodeDom;

<span class="kwrd">public</span> <span class="kwrd">class</span> ExpressionBuilderIdentity : ExpressionBuilder
{
    <span class="kwrd">public</span> <span class="kwrd">override</span> System.CodeDom.CodeExpression GetCodeExpression(
        BoundPropertyEntry entry, <span class="kwrd">object</span> parsedData, ExpressionBuilderContext context)
    {
        CodeTypeReferenceExpression targetClass =
            <span class="kwrd">new</span> CodeTypeReferenceExpression(<span class="kwrd">typeof</span>(ExpressionBuilderIdentity));
        <span class="kwrd">string</span> targetMethod = “GetIdentity”;
        CodeExpression methodParameter =
            <span class="kwrd">new</span> CodePrimitiveExpression(entry.Expression.Trim());
        <span class="kwrd">return</span> <span class="kwrd">new</span> CodeMethodInvokeExpression(
            targetClass, targetMethod, methodParameter);
    }

    <span class="kwrd">public</span> <span class="kwrd">static</span> <span class="kwrd">object</span> GetIdentity(<span class="kwrd">string</span> param)
    {
        <span class="kwrd">string</span> returnString = <span class="kwrd">string</span>.Empty;

        <span class="kwrd">if</span> (param.ToLower().Equals(“name”))
        {
            returnString = HttpContext.Current.User.Identity.Name;
        }

        <span class="kwrd">return</span> returnString;
    }
}</pre>
<p>Then, you need to add a reference to it in your web.config as follows:</p>
<pre class="csharpcode"><span class="kwrd">&lt;</span><span class="html">compilation</span> <span class="attr">debug</span>=“<span class="attr">true</span>“<span class="kwrd">&gt;</span>
      <span class="kwrd">&lt;</span><span class="html">expressionBuilders</span><span class="kwrd">&gt;</span>
        <span class="kwrd">&lt;</span><span class="html">add</span> <span class="attr">expressionPrefix</span>=“<span class="attr">UserIdentity</span>“ <span class="attr">type</span>=“<span class="attr">ExpressionBuilderIdentity</span>, <span class="attr">__code</span>“<span class="kwrd">/&gt;</span>
      <span class="kwrd">&lt;/</span><span class="html">expressionBuilders</span><span class="kwrd">&gt;</span>
      …</pre>
<p>Then, specify the SqlDataSource as follows:</p>
<pre class="csharpcode"><span class="kwrd">&lt;</span><span class="html">asp:SqlDataSource</span> <span class="attr">ID</span>=”<span class="attr">SqlDataSource1</span>″ <span class="attr">runat</span>=”<span class="attr">server</span>” <span class="attr">ConnectionString</span>=”&amp;<span class="attr">lt</span>;%$ <span class="attr">ConnectionStrings:CodeCampSV06</span> %&amp;<span class="attr">gt</span>;“ <span class="attr">SelectCommand</span>=”<span class="attr">SELECT</span> [<span class="attr">Username</span>], [<span class="attr">Email</span>] <span class="attr">FROM</span> [<span class="attr">Attendees</span>] <span class="attr">WHERE</span> ([<span class="attr">Username</span>] = @<span class="attr">Username</span>)”<span class="kwrd">&gt;</span>
            <span class="kwrd">&lt;</span><span class="html">SelectParameters</span><span class="kwrd">&gt;</span>
                <span class="kwrd">&lt;</span><span class="html">asp:Parameter</span> <span class="attr">Name</span>=”<span class="attr">Username</span>” <span class="attr">Type</span>=”<span class="attr">String</span>”
                <span class="attr">DefaultValue</span>=”&amp;<span class="attr">lt</span>;%$ <span class="attr">UserIdentity:name</span> %&amp;<span class="attr">gt</span>;“ <span class="kwrd">/&gt;</span>
            <span class="kwrd">&lt;/</span><span class="html">SelectParameters</span><span class="kwrd">&gt;</span>
        <span class="kwrd">&lt;/</span><span class="html">asp:SqlDataSource</span><span class="kwrd">&gt;</span></pre>
<p>And, Presto, it works!</p>
<h2>Summary</h2>
<p>Anytime you are using one of the new datasourceID controls, you need to use expressions rather than databinding if you want to reference outside variables. Creating the code is fairly straight forward and lends itself to lots of cool possibilities.</p>
]]></content:encoded>
			<wfw:commentRss>http://peterkellner.net/2006/09/18/expressionbuilderidentity/feed/</wfw:commentRss>
		<slash:comments>27</slash:comments>
		</item>
		<item>
		<title>Zero to Professional Web Site in Two DaysUsing Microsoft&#8217;s Visual Studio Design Templates</title>
		<link>http://peterkellner.net/2006/08/28/msprofcsshowto/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=msprofcsshowto</link>
		<comments>http://peterkellner.net/2006/08/28/msprofcsshowto/#comments</comments>
		<pubDate>Tue, 29 Aug 2006 01:19:06 +0000</pubDate>
		<dc:creator>Peter Kellner</dc:creator>
				<category><![CDATA[.Net 2.0]]></category>
		<category><![CDATA[ASP.NET 2.0]]></category>
		<category><![CDATA[How Things Work]]></category>
		<category><![CDATA[Uncategorized]]></category>

		<guid isPermaLink="false">http://peterkellner.net/2006/08/28/zero-to-professional-web-site-in-two-daysusing-microsofts-visual-studio-design-templates/</guid>
		<description><![CDATA[<p>It's Monday, August 21st, we have <a href="http://www.siliconvalley-codecamp.com">our CodeCamp scheduled for October 7th and 8th</a> in Los Altos California and we realize we need to have our web site to sign up and running yesterday!  For those of you who don't know what a codecamp is, basically, it's a developer to developer weekend meeting where high quality presentations are given to an audience of enthusiastic developers.  Typically, 30 or 40 speakers running simultanious presentations to 300 or so attendees.  Codecamps are all Volunteer, all free, and always on a weekend.  So, our web site needs to allow sign ups for speakers and their presentations, attendess to let us know they are coming, provide information about the Venue as well as ultimately provide scheduling information about classes.  Most importantly, it needs to do it with style and pizazz.</p>

<a href="http://www.siliconvalley-codecamp.com">
</a>]]></description>
			<content:encoded><![CDATA[<h2>Using Microsoft&#8217;s Visual Studio Design Templates</h2>
<p><strong>Author: Peter Kellner</strong>     <br /><strong>Date: August 27th, 2006</strong></p>
<hr />
<div id="two-column-container">
<h2>Our Story</h2>
<p>It&#8217;s Monday, August 21st, we have <a href="http://www.siliconvalley-codecamp.com">our CodeCamp scheduled for October 7th and 8th</a> in Los Altos California and we realize we need to have our web site to sign up and running yesterday! For those of you who don&#8217;t know what a codecamp is, basically, it&#8217;s a developer to developer weekend meeting where high quality presentations are given to an audience of enthusiastic developers. Typically, 30 or 40 speakers running simultanious presentations to 300 or so attendees. Codecamps are all Volunteer, all free, and always on a weekend. So, our web site needs to allow sign ups for speakers and their presentations, attendess to let us know they are coming, provide information about the Venue as well as ultimately provide scheduling information about classes. Most importantly, it needs to do it with style and pizazz.</p>
<p> <span id="more-29"></span><br />
<h2>Microsoft&#8217;s Professional CSS Design Templates to the Rescue</h2>
<p>   <img class="floatLeft" src="http://peterkellner.net/wp/Images/VSDesignTemplates1/thumb-vs-design-template-fun.jpg" width="258" height="305" />
<p>Personally, I&#8217;m good at building web site plumbing, doing things like building master pages, doing database access, making tables and labels, but to put it might it simply, I&#8217;m web design skill challenged. This is where Microsoft has done me a huge service by providing reference CSS Design templates I can use to create professional looking web sites. For our codecamp web site I took a look at the <a href="http://msdn.microsoft.com/asp.net/reference/design/templates/default.aspx">five templates</a> available to me. The one that caught my eye for CodeCamp was the fun style web site on the left (<a href="http://msdn.microsoft.com/asp.net/reference/design/templates/">also as shown on Microsoft&#8217;s web site</a>).</p>
<p>It has a three dimensional, building block kind of look, a simple clean design and would allow me to have all the functionality I wanted in my web site. Taking a peak at the finished web site you can see the similarity.</p>
<div id="two-column-container">
<h2>Our Finished Product</h2>
<p>     <a href="http://www.siliconvalley-codecamp.com"><img class="floatRight" border="0" src="http://peterkellner.net/wp/Images/VSDesignTemplates1/siliconvalley-codecamp1.jpg" width="400" height="374" /></a>
<p>Let&#8217;s take a look at the steps involved. As good engineers, we know what 60 of the &quot;zero to 60&quot; will look like (see picture on right), we know what &quot;zero&quot; looks like (Visual Studio 2005, File/New Empty Website), now we just need to figure out what the steps in the middle are.</p>
<p>By way of comparison between what Microsoft provides with their CSS Design Templates and our finished product, notice the menu on the left. Same format, just different content. Notice the title on the top, the header on the bottom as well as of course the great looking building block graphics giving the site the &quot;fun&quot; look and feel. </p>
<p>In the next section, will discuss the mapping between asp.net 2.0 and the CSS. Then, we will go into more details about how to make it happen. As a &quot;tables&quot; kind of HTML programmer it warms my heart (as well as all the viewers of my sites) to be able to deliver a css enabled web site. </p>
</p></div>
<p> 
<div id="two-column-container">
<h2>Mapping CSS to ASP.NET 2.0</h2>
<p>Lets first briefly talk some about what it takes to use a CSS file in a asp.net web site. First, you need to have CSS that supports the basic constructs you will be using. Assuming you are going to use a master page to implement your web site, you&#8217;ll need to have containers (also known as div tags) that wrap all the different parts of your web site. This includes things like headers, footers, menu&#8217;s, login controls, as well as of course the content. We will now go into a little detail on some of these areas to help you understand the steps.</p>
<h3>Headers</h3>
<p>If you look in the CSS file for the FUN site, you&#8217;ll see the following definition for &quot;sitename&quot; and &quot;slogan&quot; .</p>
<p> <!--<br />
{\rtf1\ansi\ansicpg\lang1024\noproof1252\uc1 \deff0{\fonttbl{\f0\fnil\fcharset0\fprq1 Courier New;}}{\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0??;\red255\green0\blue255;\red255\green0\blue0;\red255\green255\blue0;\red255\green255\blue255;??\red0\green0\blue128;\red0\green128\blue128;\red0\green128\blue0;??\red128\green0\blue128;\red128\green0\blue0;\red128\green128\blue0;\red128\green128\blue128;??\red192\green192\blue192;}??\fs20 \cf13 #sitename\cf0  \{\par ??\tab \cf6 position\cf0 :\cf2 absolute\cf0 ;\par ??\tab \cf6 top\cf0 :\cf2 20px\cf0 ;\par ??\tab \cf6 right\cf0 :\cf2 100px\cf0 ;\par ??\tab \cf6 text-align\cf0 :\cf2 right\cf0 ;\par ??\tab \cf6 color\cf0 :\cf2 #FFFFFF\cf0 ;\par ??\tab \cf6 font-size\cf0 :\cf2 1.8em\cf0 ;\par ??\tab \cf6 font-weight\cf0 :\cf2 bold\cf0 ;\par ??\tab \}\par ??\par ??\cf13 #sitename\cf0  \cf13 a\cf0  \{\par ??\tab \cf6 text-decoration\cf0 :\cf2 none\cf0 ;\par ??\tab \cf6 color\cf0 :\cf2 #FFFFFF\cf0 ;\par ??\tab \cf6 border-bottom\cf0 :\cf2 none\cf0 ;\par ??\tab \}\par ??\par ??\cf13 #slogan\cf0  \{\par ??\tab \cf6 font-size\cf0 :\cf2 .65em\cf0 ;\par ??\tab \cf6 margin\cf0 :\cf2 0px\cf0 ;\par ??\tab \cf6 text-align\cf0 :\cf2 right\cf0 ;\par ??\tab \}}<br />
-->
<div style="border-bottom: #cccccc 1pt solid; border-left: #cccccc 1pt solid; padding-bottom: 1pt; padding-left: 1pt; width: 100%; padding-right: 1pt; font-family: courier new; background: #f5f5f5; color: black; font-size: 10pt; overflow: auto; border-top: #cccccc 1pt solid; border-right: #cccccc 1pt solid; padding-top: 1pt">
<p style="margin: 0px"><span style="color: maroon">#sitename</span> {</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">position</span>:<span style="color: blue">absolute</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">top</span>:<span style="color: blue">20px</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">right</span>:<span style="color: blue">100px</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">text-align</span>:<span style="color: blue">right</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">color</span>:<span style="color: blue">#FFFFFF</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">font-size</span>:<span style="color: blue">1.8em</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">font-weight</span>:<span style="color: blue">bold</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; }</p>
<p style="margin: 0px">&#160;</p>
<p style="margin: 0px"><span style="color: maroon">#sitename</span> <span style="color: maroon">a</span> {</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">text-decoration</span>:<span style="color: blue">none</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">color</span>:<span style="color: blue">#FFFFFF</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">border-bottom</span>:<span style="color: blue">none</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; }</p>
<p style="margin: 0px">&#160;</p>
<p style="margin: 0px"><span style="color: maroon">#slogan</span> {</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">font-size</span>:<span style="color: blue">.65em</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">margin</span>:<span style="color: blue">0px</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">text-align</span>:<span style="color: blue">right</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; }</p>
</p></div>
<p> 
<p>In the reference site for Microsoft&#8217;s CSS Fun Site, you&#8217;ll see that they use the CSS for the title as follows:</p>
<p><!--<br />
{\rtf1\ansi\ansicpg\lang1024\noproof65001\uc1 \deff0{\fonttbl{\f0\fnil\fcharset0\fprq1 Courier New;}}{\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0??;\red255\green0\blue255;\red255\green0\blue0;\red255\green255\blue0;\red255\green255\blue255;??\red0\green0\blue128;\red0\green128\blue128;\red0\green128\blue0;??\red128\green0\blue128;\red128\green0\blue0;\red128\green128\blue0;\red128\green128\blue128;??\red192\green192\blue192;}??\fs20 \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="sitename"&gt;\par ??\cf0     \cf2 &lt;\cf13 a\cf0  \cf6 href\cf2 ="#"\cf0  \cf6 title\cf2 ="site name - home page"&gt;\cf0 site name\cf2 &lt;/\cf13 a\cf2 &gt;\par ??\cf0     \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="slogan"&gt;\par ??\cf0         Web site or company slogan goes here\cf2 &lt;/\cf13 div\cf2 &gt;\par ??&lt;/\cf13 div\cf2 &gt;}<br />
-->
<div style="border-bottom: #cccccc 1pt solid; border-left: #cccccc 1pt solid; padding-bottom: 1pt; padding-left: 1pt; width: 100%; padding-right: 1pt; font-family: courier new; background: #f5f5f5; color: black; font-size: 10pt; overflow: auto; border-top: #cccccc 1pt solid; border-right: #cccccc 1pt solid; padding-top: 1pt">
<p style="margin: 0px"><span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;sitename&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">a</span> <span style="color: red">href</span><span style="color: blue">=&quot;#&quot;</span> <span style="color: red">title</span><span style="color: blue">=&quot;site name &#8211; home page&quot;&gt;</span>site name<span style="color: blue">&lt;/</span><span style="color: maroon">a</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;slogan&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; Web site or company slogan goes here<span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px"><span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
</p></div>
<p> 
<p>In our ASP.NET 2.0 <a href="http://www.siliconvalley-codecamp.com">http://www.siliconvalley-codecamp.com</a>, we use a similar construct for our title as follows:</p>
<p> <!--<br />
{\rtf1\ansi\ansicpg\lang1024\noproof1252\uc1 \deff0{\fonttbl{\f0\fnil\fcharset0\fprq1 Courier New;}}{\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0??;\red255\green0\blue255;\red255\green0\blue0;\red255\green255\blue0;\red255\green255\blue255;??\red0\green0\blue128;\red0\green128\blue128;\red0\green128\blue0;??\red128\green0\blue128;\red128\green0\blue0;\red128\green128\blue0;\red128\green128\blue128;??\red192\green192\blue192;}??\fs20 \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="sitename"&gt;\par ??\cf0     \cf2 &lt;\cf13 a\cf0  \cf6 href\cf2 ="#"\cf0  \cf6 title\cf2 ="Silicon Valley Code Camp"&gt;\cf0 Silicon Valley Code Camp\cf2 &lt;/\cf13 a\cf2 &gt;\par ??\cf0     \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="slogan"&gt;\par ??\cf0         "By and For the Developer Community"\par ??    \cf2 &lt;/\cf13 div\cf2 &gt;\par ??&lt;/\cf13 div\cf2 &gt;}<br />
-->
<div style="border-bottom: #cccccc 1pt solid; border-left: #cccccc 1pt solid; padding-bottom: 1pt; padding-left: 1pt; width: 100%; padding-right: 1pt; font-family: courier new; background: #f5f5f5; color: black; font-size: 10pt; overflow: auto; border-top: #cccccc 1pt solid; border-right: #cccccc 1pt solid; padding-top: 1pt">
<p style="margin: 0px"><span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;sitename&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">a</span> <span style="color: red">href</span><span style="color: blue">=&quot;#&quot;</span> <span style="color: red">title</span><span style="color: blue">=&quot;Silicon Valley Code Camp&quot;&gt;</span>Silicon Valley Code Camp<span style="color: blue">&lt;/</span><span style="color: maroon">a</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;slogan&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; &quot;By and For the Developer Community&quot;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px"><span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
</p></div>
<p> 
<p>Footers are implemented in a similar way. Without showing all the details this time, the following snippet shows how we used the CSS to implement our own footer.</p>
<p><!--<br />
{\rtf1\ansi\ansicpg\lang1024\noproof1252\uc1 \deff0{\fonttbl{\f0\fnil\fcharset0\fprq1 Courier New;}}{\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0??;\red255\green0\blue255;\red255\green0\blue0;\red255\green255\blue0;\red255\green255\blue255;??\red0\green0\blue128;\red0\green128\blue128;\red0\green128\blue0;??\red128\green0\blue128;\red128\green0\blue0;\red128\green128\blue0;\red128\green128\blue128;??\red192\green192\blue192;}??\fs20 \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="footer-container"&gt;\par ??\cf0     \cf2 &lt;\cf13 span\cf0  \cf6 id\cf2 ="footer-left"&gt;&lt;/\cf13 span\cf2 &gt;\par ??\cf0     \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="footer-right"&gt;\par ??\cf0         \cf2 &lt;\cf13 p\cf2 &gt;\par ??\cf0             Silicon Valley Code Camp\cf2 &lt;\cf13 br\cf0  \cf2 /&gt;\par ??\cf0             October 7th and 8th, 2006\cf2 &lt;\cf13 br\cf0  \cf2 /&gt;\par ??\cf0             FootHill College, Los Altos California\cf2 &lt;/\cf13 p\cf2 &gt;\par ??\cf0     \cf2 &lt;/\cf13 div\cf2 &gt;\par ??&lt;/\cf13 div\cf2 &gt;}<br />
-->
<div style="border-bottom: #cccccc 1pt solid; border-left: #cccccc 1pt solid; padding-bottom: 1pt; padding-left: 1pt; width: 100%; padding-right: 1pt; font-family: courier new; background: #f5f5f5; color: black; font-size: 10pt; overflow: auto; border-top: #cccccc 1pt solid; border-right: #cccccc 1pt solid; padding-top: 1pt">
<p style="margin: 0px"><span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;footer-container&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">span</span> <span style="color: red">id</span><span style="color: blue">=&quot;footer-left&quot;&gt;&lt;/</span><span style="color: maroon">span</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;footer-right&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">p</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Silicon Valley Code Camp<span style="color: blue">&lt;</span><span style="color: maroon">br</span> <span style="color: blue">/&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; October 7th and 8th, 2006<span style="color: blue">&lt;</span><span style="color: maroon">br</span> <span style="color: blue">/&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; FootHill College, Los Altos California<span style="color: blue">&lt;/</span><span style="color: maroon">p</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px"><span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
</p></div>
<p> 
<p>Lets take a look now at how to implement the menu (left side of the page) in the Master Page. This one is a little trickier because the css and Microsoft&#8217;s example don&#8217;t know anything about the sitemanager server control asp.net 2.0 gives us. First thing, lets view the actual css used for the menu as well as the example given to us using this css. </p>
<p><!--<br />
{\rtf1\ansi\ansicpg\lang1024\noproof1252\uc1 \deff0{\fonttbl{\f0\fnil\fcharset0\fprq1 Courier New;}}{\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0??;\red255\green0\blue255;\red255\green0\blue0;\red255\green255\blue0;\red255\green255\blue255;??\red0\green0\blue128;\red0\green128\blue128;\red0\green128\blue0;??\red128\green0\blue128;\red128\green0\blue0;\red128\green128\blue0;\red128\green128\blue128;??\red192\green192\blue192;}??\fs20 \cf11 /******************\par ??SIDE LAYOUT \par ??******************/\par ??\par ??\cf13 #side-container-outer\cf0  \{\par ??\tab \cf6 width\cf0 :\cf2 20%\cf0 ;\par ??\tab \cf6 position\cf0 :\cf2 absolute\cf0 ;\par ??\tab \cf6 top\cf0 :\cf2 120px\cf0 ;\par ??\tab \cf6 left\cf0 :\cf2 0px\cf0 ;\par ??\tab \cf6 padding-bottom\cf0 :\cf2 100px\cf0 ;\par ??\tab \}\par ??\tab \par ??\cf13 #block-side-top-right\cf0  \{\par ??\tab \cf6 width\cf0 :\cf2 92%\cf0 ;\par ??\tab \cf6 height\cf0 :\cf2 25px\cf0 ;\par ??\tab \cf6 float\cf0 :\cf2 right\cf0 ;\par ??\tab \}\par ??\tab \par ??\cf13 #block-side-top-left\cf0  \{\par ??\tab \cf6 width\cf0 :\cf2 8%\cf0 ;\par ??\tab \cf6 height\cf0 :\cf2 25px\cf0 ;\par ??\tab \cf6 float\cf0 :\cf2 left\cf0 ;\par ??\tab \cf6 background\cf0 : \cf2 url(block-side-top-left.gif)\cf0  \cf2 no-repeat\cf0  \cf2 top\cf0  \cf2 right\cf0 ;\par ??\tab \}\par ??\par ??\cf13 #side-container-inner\cf0 \{\par ??\tab \cf6 background\cf0 : \cf2 #929E8E\cf0 ;\par ??\tab \cf6 margin\cf0 :\cf2 0px\cf0 ;\par ??\tab \cf6 padding\cf0 :\cf2 0px\cf0 ;\par ??\tab \}\par ??\tab \par ??\cf13 #side\cf0  \{\par ??\tab \cf6 background\cf0 : \cf2 #FFFFFF\cf0 ;\par ??\tab \cf6 width\cf0 :\cf2 70%\cf0 ;\par ??\tab \cf6 margin-left\cf0 :\cf2 8%\cf0 ;\par ??\tab \cf6 padding\cf0 :\cf2 0\cf0  \cf2 12%\cf0  \cf2 10px\cf0  \cf2 10%\cf0 ;\par ??\tab \}\tab \par ??\tab \par ??\cf13 #block-side-bottom-left\cf0  \{\par ??\tab \cf6 width\cf0 :\cf2 8%\cf0 ;\par ??\tab \cf6 height\cf0 :\cf2 25px\cf0 ;\par ??\tab \cf6 float\cf0 :\cf2 left\cf0 ;\par ??\tab \cf6 background\cf0 : \cf2 url(block-side-bottom-left.gif)\cf0  \cf2 no-repeat\cf0  \cf2 bottom\cf0  \cf2 right\cf0 ;\par ??\tab \cf6 margin\cf0 :\cf2 0px\cf0 ;\par ??\tab \cf6 padding\cf0 :\cf2 0px\cf0 ;\par ??\tab \}\par ??\tab \par ??\cf13 #block-side-bottom-right\cf0  \{\par ??\tab \cf6 width\cf0 :\cf2 92%\cf0 ;\par ??\tab \cf6 height\cf0 :\cf2 25px\cf0 ;\par ??\tab \cf6 float\cf0 :\cf2 right\cf0 ;\par ??\tab \cf6 margin\cf0 :\cf2 0px\cf0 ;\par ??\tab \cf6 padding\cf0 :\cf2 0px\cf0 ;\par ??\tab \}}<br />
-->
<div style="border-bottom: #cccccc 1pt solid; border-left: #cccccc 1pt solid; padding-bottom: 1pt; padding-left: 1pt; width: 100%; padding-right: 1pt; font-family: courier new; background: #f5f5f5; color: black; font-size: 10pt; overflow: auto; border-top: #cccccc 1pt solid; border-right: #cccccc 1pt solid; padding-top: 1pt">
<p style="margin: 0px"><span style="color: green">/******************</span></p>
<p style="margin: 0px"><span style="color: green">SIDE LAYOUT </span></p>
<p style="margin: 0px"><span style="color: green">******************/</span></p>
<p style="margin: 0px">&#160;</p>
<p style="margin: 0px"><span style="color: maroon">#side-container-outer</span> {</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">width</span>:<span style="color: blue">20%</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">position</span>:<span style="color: blue">absolute</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">top</span>:<span style="color: blue">120px</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">left</span>:<span style="color: blue">0px</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">padding-bottom</span>:<span style="color: blue">100px</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; }</p>
<p style="margin: 0px">&#160;</p>
<p style="margin: 0px"><span style="color: maroon">#block-side-top-right</span> {</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">width</span>:<span style="color: blue">92%</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">height</span>:<span style="color: blue">25px</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">float</span>:<span style="color: blue">right</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; }</p>
<p style="margin: 0px">&#160;</p>
<p style="margin: 0px"><span style="color: maroon">#block-side-top-left</span> {</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">width</span>:<span style="color: blue">8%</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">height</span>:<span style="color: blue">25px</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">float</span>:<span style="color: blue">left</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">background</span>: <span style="color: blue">url(block-side-top-left.gif)</span> <span style="color: blue">no-repeat</span> <span style="color: blue">top</span> <span style="color: blue">right</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; }</p>
<p style="margin: 0px">&#160;</p>
<p style="margin: 0px"><span style="color: maroon">#side-container-inner</span>{</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">background</span>: <span style="color: blue">#929E8E</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">margin</span>:<span style="color: blue">0px</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">padding</span>:<span style="color: blue">0px</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; }</p>
<p style="margin: 0px">&#160;</p>
<p style="margin: 0px"><span style="color: maroon">#side</span> {</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">background</span>: <span style="color: blue">#FFFFFF</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">width</span>:<span style="color: blue">70%</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">margin-left</span>:<span style="color: blue">8%</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">padding</span>:<span style="color: blue">0</span> <span style="color: blue">12%</span> <span style="color: blue">10px</span> <span style="color: blue">10%</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; }&#160;&#160;&#160; </p>
<p style="margin: 0px">&#160;</p>
<p style="margin: 0px"><span style="color: maroon">#block-side-bottom-left</span> {</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">width</span>:<span style="color: blue">8%</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">height</span>:<span style="color: blue">25px</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">float</span>:<span style="color: blue">left</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">background</span>: <span style="color: blue">url(block-side-bottom-left.gif)</span> <span style="color: blue">no-repeat</span> <span style="color: blue">bottom</span> <span style="color: blue">right</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">margin</span>:<span style="color: blue">0px</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">padding</span>:<span style="color: blue">0px</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; }</p>
<p style="margin: 0px">&#160;</p>
<p style="margin: 0px"><span style="color: maroon">#block-side-bottom-right</span> {</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">width</span>:<span style="color: blue">92%</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">height</span>:<span style="color: blue">25px</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">float</span>:<span style="color: blue">right</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">margin</span>:<span style="color: blue">0px</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">padding</span>:<span style="color: blue">0px</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; }</p>
</p></div>
<p> 
<p>Now, lets look at the actual implementation that gives Microsoft their default menu in their template example.</p>
<p><!--<br />
{\rtf1\ansi\ansicpg\lang1024\noproof65001\uc1 \deff0{\fonttbl{\f0\fnil\fcharset0\fprq1 Courier New;}}{\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0??;\red255\green0\blue255;\red255\green0\blue0;\red255\green255\blue0;\red255\green255\blue255;??\red0\green0\blue128;\red0\green128\blue128;\red0\green128\blue0;??\red128\green0\blue128;\red128\green0\blue0;\red128\green128\blue0;\red128\green128\blue128;??\red192\green192\blue192;}??\fs20 \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="side-container-outer"&gt;\par ??\cf0     \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="block-side-top-right"&gt;\par ??\cf0         \cf2 &lt;\cf13 img\cf0  \cf6 src\cf2 ="App_Themes/default/block-side-top-right.gif"\cf0  \par ??           \cf6 alt\cf2 =""\cf0  \cf6 width\cf2 ="100%"\cf0  \cf6 height\cf2 ="25"\cf0  \cf2 /&gt;&lt;/\cf13 div\cf2 &gt;\par ??\cf0     \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="block-side-top-left"&gt;\par ??\cf0     \cf2 &lt;/\cf13 div\cf2 &gt;\par ??\cf0     \cf2 &lt;\cf13 div\cf0  \cf6 class\cf2 ="clear"&gt;\par ??\cf0     \cf2 &lt;/\cf13 div\cf2 &gt;\par ??\cf0     \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="side-container-inner"&gt;\par ??\cf0         \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="side"&gt;\par ??\cf0             \cf2 &lt;\cf13 div\cf0  \cf6 class\cf2 ="clear"&gt;\par ??\cf0             \cf2 &lt;/\cf13 div\cf2 &gt;\par ??\cf0             \cf11 &lt;!-- BEGIN NAV ITMES --&gt;\par ??\cf0             \cf2 &lt;\cf13 div\cf0  \cf6 class\cf2 ="none"&gt;\par ??\cf0                 \cf2 &lt;\cf13 a\cf0  \cf6 href\cf2 ="#maincontent"&gt;\cf0 goto main content\cf2 &lt;/\cf13 a\cf2 &gt;\par ??\cf0             \cf2 &lt;/\cf13 div\cf2 &gt;\par ??\cf0             \cf2 &lt;\cf13 ul\cf2 &gt;\par ??\cf0                 \cf2 &lt;\cf13 li\cf2 &gt;&lt;\cf13 a\cf0  \cf6 href\cf2 ="#"\cf0  \cf6 title\cf2 =""&gt;\par ??\cf0                     Home\cf2 &lt;/\cf13 a\cf2 &gt;&lt;/\cf13 li\cf2 &gt;\par ??\cf0                 \cf2 &lt;\cf13 li\cf2 &gt;&lt;\cf13 a\cf0  \cf6 href\cf2 ="#"\cf0  \cf6 title\cf2 =""&gt;\par ??\cf0                     News\cf2 &lt;/\cf13 a\cf2 &gt;&lt;/\cf13 li\cf2 &gt;\par ??\cf0                 \cf2 &lt;\cf13 li\cf2 &gt;&lt;\cf13 a\cf0  \cf6 href\cf2 ="#"\cf0  \cf6 title\cf2 =""&gt;\par ??\cf0                     Products\cf2 &lt;/\cf13 a\cf2 &gt;&lt;/\cf13 li\cf2 &gt;\par ??\cf0                 \cf2 &lt;\cf13 li\cf2 &gt;&lt;\cf13 a\cf0  \cf6 href\cf2 ="#"\cf0  \cf6 title\cf2 =""&gt;\par ??\cf0                     About\cf2 &lt;/\cf13 a\cf2 &gt;&lt;/\cf13 li\cf2 &gt;\par ??\cf0                 \cf2 &lt;\cf13 li\cf2 &gt;&lt;\cf13 a\cf0  \cf6 href\cf2 ="#"\cf0  \cf6 title\cf2 =""&gt;\par ??\cf0                     Contact\cf2 &lt;/\cf13 a\cf2 &gt;&lt;/\cf13 li\cf2 &gt;\par ??\cf0                 \cf2 &lt;\cf13 li\cf2 &gt;&lt;\cf13 a\cf0  \cf6 href\cf2 ="#"\cf0  \cf6 title\cf2 =""&gt;\par ??\cf0                     Login\cf2 &lt;/\cf13 a\cf2 &gt;&lt;/\cf13 li\cf2 &gt;\par ??\cf0                 \cf2 &lt;\cf13 li\cf2 &gt;&lt;\cf13 a\cf0  \cf6 href\cf2 ="#"\cf0  \cf6 title\cf2 =""&gt;\par ??\cf0                     Join\cf2 &lt;/\cf13 a\cf2 &gt;&lt;/\cf13 li\cf2 &gt;\par ??\cf0             \cf2 &lt;/\cf13 ul\cf2 &gt;\par ??\cf0             \cf2 &lt;\cf13 div\cf0  \cf6 class\cf2 ="separator-side-column"&gt;\par ??\cf0             \cf2 &lt;/\cf13 div\cf2 &gt;\par ??\cf0             \cf11 &lt;!-- END NAV ITEMS --&gt;\par ??\cf0         \cf2 &lt;/\cf13 div\cf2 &gt;\par ??\cf0         \cf2 &lt;\cf13 div\cf2 &gt;\par ??\cf0             \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="block-side-bottom-right"&gt;\par ??\cf0                 \cf2 &lt;\cf13 img\cf0  \cf6 src\cf2 ="App_Themes/default/block-side-bottom-right.gif"\cf0  \par ??                   \cf6 alt\cf2 =""\cf0  \cf6 width\cf2 ="100%"\cf0  \cf6 height\cf2 ="25"\cf0  \cf2 /&gt;&lt;/\cf13 div\cf2 &gt;\par ??\cf0             \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="block-side-bottom-left"&gt;\par ??\cf0             \cf2 &lt;/\cf13 div\cf2 &gt;\par ??\cf0         \cf2 &lt;/\cf13 div\cf2 &gt;\par ??\cf0     \cf2 &lt;/\cf13 div\cf2 &gt;\par ??&lt;/\cf13 div\cf2 &gt;}<br />
-->
<div style="border-bottom: #cccccc 1pt solid; border-left: #cccccc 1pt solid; padding-bottom: 1pt; padding-left: 1pt; width: 100%; padding-right: 1pt; font-family: courier new; background: #f5f5f5; color: black; font-size: 10pt; overflow: auto; border-top: #cccccc 1pt solid; border-right: #cccccc 1pt solid; padding-top: 1pt">
<p style="margin: 0px"><span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;side-container-outer&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;block-side-top-right&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">img</span> <span style="color: red">src</span><span style="color: blue">=&quot;App_Themes/default/block-side-top-right.gif&quot;</span> </p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: red">alt</span><span style="color: blue">=&quot;&quot;</span> <span style="color: red">width</span><span style="color: blue">=&quot;100%&quot;</span> <span style="color: red">height</span><span style="color: blue">=&quot;25&quot;</span> <span style="color: blue">/&gt;&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;block-side-top-left&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">class</span><span style="color: blue">=&quot;clear&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;side-container-inner&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;side&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">class</span><span style="color: blue">=&quot;clear&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: green">&lt;!&#8211; BEGIN NAV ITMES &#8211;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">class</span><span style="color: blue">=&quot;none&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">a</span> <span style="color: red">href</span><span style="color: blue">=&quot;#maincontent&quot;&gt;</span>goto main content<span style="color: blue">&lt;/</span><span style="color: maroon">a</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">ul</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">li</span><span style="color: blue">&gt;&lt;</span><span style="color: maroon">a</span> <span style="color: red">href</span><span style="color: blue">=&quot;#&quot;</span> <span style="color: red">title</span><span style="color: blue">=&quot;&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Home<span style="color: blue">&lt;/</span><span style="color: maroon">a</span><span style="color: blue">&gt;&lt;/</span><span style="color: maroon">li</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">li</span><span style="color: blue">&gt;&lt;</span><span style="color: maroon">a</span> <span style="color: red">href</span><span style="color: blue">=&quot;#&quot;</span> <span style="color: red">title</span><span style="color: blue">=&quot;&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; News<span style="color: blue">&lt;/</span><span style="color: maroon">a</span><span style="color: blue">&gt;&lt;/</span><span style="color: maroon">li</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">li</span><span style="color: blue">&gt;&lt;</span><span style="color: maroon">a</span> <span style="color: red">href</span><span style="color: blue">=&quot;#&quot;</span> <span style="color: red">title</span><span style="color: blue">=&quot;&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Products<span style="color: blue">&lt;/</span><span style="color: maroon">a</span><span style="color: blue">&gt;&lt;/</span><span style="color: maroon">li</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">li</span><span style="color: blue">&gt;&lt;</span><span style="color: maroon">a</span> <span style="color: red">href</span><span style="color: blue">=&quot;#&quot;</span> <span style="color: red">title</span><span style="color: blue">=&quot;&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; About<span style="color: blue">&lt;/</span><span style="color: maroon">a</span><span style="color: blue">&gt;&lt;/</span><span style="color: maroon">li</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">li</span><span style="color: blue">&gt;&lt;</span><span style="color: maroon">a</span> <span style="color: red">href</span><span style="color: blue">=&quot;#&quot;</span> <span style="color: red">title</span><span style="color: blue">=&quot;&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Contact<span style="color: blue">&lt;/</span><span style="color: maroon">a</span><span style="color: blue">&gt;&lt;/</span><span style="color: maroon">li</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160; &amp;n bsp;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">li</span><span style="color: blue">&gt;&lt;</span><span style="color: maroon">a</span> <span style="color: red">href</span><span style="color: blue">=&quot;#&quot;</span> <span style="color: red">title</span><span style="color: blue">=&quot;&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Login<span style="color: blue">&lt;/</span><span style="color: maroon">a</span><span style="color: blue">&gt;&lt;/</span><span style="color: maroon">li</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">li</span><span style="color: blue">&gt;&lt;</span><span style="color: maroon">a</span> <span style="color: red">href</span><span style="color: blue">=&quot;#&quot;</span> <span style="color: red">title</span><span style="color: blue">=&quot;&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; Join<span style="color: blue">&lt;/</span><span style="color: maroon">a</span><span style="color: blue">&gt;&lt;/</span><span style="color: maroon">li</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">ul</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">class</span><span style="color: blue">=&quot;separator-side-column&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: green">&lt;!&#8211; END NAV ITEMS &#8211;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;block-side-bottom-right&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">img</span> <span style="color: red">src</span><span style="color: blue">=&quot;App_Themes/default/block-side-bottom-right.gif&quot;</span> </p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: red">alt</span><span style="color: blue">=&quot;&quot;</span> <span style="color: red">width</span><span style="color: blue">=&quot;100%&quot;</span> <span style="color: red">height</span><span style="color: blue">=&quot;25&quot;</span> <span style="color: blue">/&gt;&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;block-side-bottom-left&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px"><span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
</p></div>
<p>&#160;</p>
<p>Because we are going to use the asp.net 2.0 server control SiteManager, our aspx file will look considerable different but will yield the same look and feel.</p>
<p><!--<br />
{\rtf1\ansi\ansicpg\lang1024\noproof1252\uc1 \deff0{\fonttbl{\f0\fnil\fcharset0\fprq1 Courier New;}}{\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0??;\red255\green0\blue255;\red255\green0\blue0;\red255\green255\blue0;\red255\green255\blue255;??\red0\green0\blue128;\red0\green128\blue128;\red0\green128\blue0;??\red128\green0\blue128;\red128\green0\blue0;\red128\green128\blue0;\red128\green128\blue128;??\red192\green192\blue192;}??\fs20 \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="side-container-outer"&gt;\par ??\cf0     \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="block-side-top-right"&gt;\par ??\cf0         \cf2 &lt;\cf13 img\cf0  \cf6 src\cf2 ="App_Themes/default/block-side-top-right.gif"\cf0  \par ??         \cf6 alt\cf2 =""\cf0  \cf6 width\cf2 ="100%"\cf0  \cf6 height\cf2 ="25"\cf0  \cf2 /&gt;&lt;/\cf13 div\cf2 &gt;\par ??\cf0     \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="block-side-top-left"&gt;\par ??\cf0     \cf2 &lt;/\cf13 div\cf2 &gt;\par ??\cf0     \cf2 &lt;\cf13 div\cf0  \cf6 class\cf2 ="clear"&gt;\par ??\cf0     \cf2 &lt;/\cf13 div\cf2 &gt;\par ??\cf0     \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="side-container-inner"&gt;\par ??\cf0         \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="side"&gt;\par ??\cf0             \cf2 &lt;\cf13 div\cf0  \cf6 class\cf2 ="clear"&gt;\par ??\cf0             \cf2 &lt;/\cf13 div\cf2 &gt;\par ??\cf0             \cf11 &lt;!-- BEGIN NAV ITMES --&gt;\par ??\cf0             \cf2 &lt;\cf13 asp\cf2 :\cf13 SiteMapDataSource\cf0  \cf6 ID\cf2 ="SiteMapDataSource1"\cf0  \par ??             \cf6 runat\cf2 ="server"\cf0  \cf6 ShowStartingNode\cf2 ="false"\cf0  \cf2 /&gt;\par ??\cf0             \cf2 &lt;\cf13 asp\cf2 :\cf13 Repeater\cf0  \cf6 ID\cf2 ="foo"\cf0  \cf6 runat\cf2 ="server"\par ??\cf0              \cf6 DataSourceID\cf2 ="SiteMapDataSource1"\cf0  \cf2 &gt;\par ??\cf0                 \cf2 &lt;\cf13 HeaderTemplate\cf2 &gt;\par ??\cf0                     \cf2 &lt;\cf13 ul\cf2 &gt;\par ??\cf0                 \cf2 &lt;/\cf13 HeaderTemplate\cf2 &gt;\par ??\cf0                 \cf2 &lt;\cf13 ItemTemplate\cf2 &gt;\par ??\cf0                     \cf2 &lt;\cf13 li\cf2 &gt;&lt;\cf13 a\cf0  \cf6 href\cf2 ='\cf0\cb7\highlight7 &lt;%\cb0\highlight0 #Eval("url") \cb7\highlight7 %&gt;\cf2\cb0\highlight0 '&gt;\par ??\cf0                         \cb7\highlight7 &lt;%\cf2\cb0\highlight0 #\cf0  Eval(\cf13 "Title"\cf0 ) \cb7\highlight7 %&gt;\par ??\cb0\highlight0                     \cf2 &lt;/\cf13 a\cf2 &gt;&lt;/\cf13 li\cf2 &gt;\par ??\cf0                 \cf2 &lt;/\cf13 ItemTemplate\cf2 &gt;\par ??\cf0                 \cf2 &lt;\cf13 FooterTemplate\cf2 &gt;\par ??\cf0                     \cf2 &lt;/\cf13 ul\cf2 &gt;\par ??\cf0                 \cf2 &lt;/\cf13 FooterTemplate\cf2 &gt;\par ??\cf0             \cf2 &lt;/\cf13 asp\cf2 :\cf13 Repeater\cf2 &gt;\par ??\cf0             \cf2 &lt;\cf13 div\cf0  \cf6 class\cf2 ="separator-side-column"&gt;\par ??\cf0             \cf2 &lt;/\cf13 div\cf2 &gt;\par ??\cf0             \cf11 &lt;!-- END NAV ITEMS --&gt;\par ??\cf0         \cf2 &lt;/\cf13 div\cf2 &gt;\par ??\cf0         \cf2 &lt;\cf13 div\cf2 &gt;\par ??\cf0             \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="block-side-bottom-right"&gt;\par ??\cf0                 \cf2 &lt;\cf13 img\cf0  \cf6 src\cf2 ="App_Themes/default/block-side-bottom-right.gif"\cf0  \par ??                 \cf6 alt\cf2 =""\cf0  \cf6 width\cf2 ="100%"\cf0  \cf6 height\cf2 ="25"\cf0  \cf2 /&gt;&lt;/\cf13 div\cf2 &gt;\par ??\cf0             \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="block-side-bottom-left"&gt;\par ??\cf0             \cf2 &lt;/\cf13 div\cf2 &gt;\par ??\cf0         \cf2 &lt;/\cf13 div\cf2 &gt;\par ??\cf0     \cf2 &lt;/\cf13 div\cf2 &gt;\par ??&lt;/\cf13 div\cf2 &gt;}<br />
-->
<div style="border-bottom: #cccccc 1pt solid; border-left: #cccccc 1pt solid; padding-bottom: 1pt; padding-left: 1pt; width: 100%; padding-right: 1pt; font-family: courier new; background: #f5f5f5; color: black; font-size: 10pt; overflow: auto; border-top: #cccccc 1pt solid; border-right: #cccccc 1pt solid; padding-top: 1pt">
<p style="margin: 0px"><span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;side-container-outer&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;block-side-top-right&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">img</span> <span style="color: red">src</span><span style="color: blue">=&quot;App_Themes/default/block-side-top-right.gif&quot;</span> </p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: red">alt</span><span style="color: blue">=&quot;&quot;</span> <span style="color: red">width</span><span style="color: blue">=&quot;100%&quot;</span> <span style="color: red">height</span><span style="color: blue">=&quot;25&quot;</span> <span style="color: blue">/&gt;&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;block-side-top-left&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">class</span><span style="color: blue">=&quot;clear&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;side-container-inner&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;side&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">class</span><span style="color: blue">=&quot;clear&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: green">&lt;!&#8211; BEGIN NAV ITMES &#8211;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">asp</span><span style="color: blue">:</span><span style="color: maroon">SiteMapDataSource</span> <span style="color: red">ID</span><span style="color: blue">=&quot;SiteMapDataSource1&quot;</span> </p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: red">runat</span><span style="color: blue">=&quot;server&quot;</span> <span style="color: red">ShowStartingNode</span><span style="color: blue">=&quot;false&quot;</span> <span style="color: blue">/&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">asp</span><span style="color: blue">:</span><span style="color: maroon">Repeater</span> <span style="color: red">ID</span><span style="color: blue">=&quot;foo&quot;</span> <span style="color: red">runat</span><span style="color: blue">=&quot;server&quot;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: red">DataSourceID</span><span style="color: blue">=&quot;SiteMapDataSource1&quot;</span> <span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">HeaderTemplate</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">ul</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">HeaderTemplate</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">ItemTemplate</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">li</span><span style="color: blue">&gt;&lt;</span><span style="color: maroon">a</span> <span style="color: red">href</span><span style="color: blue">=&#8217;</span><span style="background: yellow">&lt;%</span>#Eval(&quot;url&quot;) <span style="background: yellow">%&gt;</span><span style="color: blue">&#8216;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="background: yellow">&lt;%</span><span style="color: blue">#</span> Eval(<span style="color: maroon">&quot;Title&quot;</span>) <span style="background: yellow">%&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">a</span><span style="color: blue">&gt;&lt;/</span><span style="color: maroon">li</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">ItemTemplate</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">FooterTemplate</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">ul</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">FooterTemplate</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">asp</span><span style="color: blue">:</span><span style="color: maroon">Repeater</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">class</span><span style="color: blue">=&quot;separator-side-column&quot;&gt;</span></p>
<p>&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: green">&lt;!&#8211; END NAV ITEMS &#8211;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;block-side-bottom-right&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">img</span> <span style="color: red">src</span><span style="color: blue">=&quot;App_Themes/default/block-side-bottom-right.gif&quot;</span> </p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: red">alt</span><span style="color: blue">=&quot;&quot;</span> <span style="color: red">width</span><span style="color: blue">=&quot;100%&quot;</span> <span style="color: red">height</span><span style="color: blue">=&quot;25&quot;</span> <span style="color: blue">/&gt;&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;block-side-bottom-left&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px"><span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
</p></div>
<p> 
<p>The SiteMap Server control is basically a repeater type control which means that a template for each row being repeated must be referenced. All the rows in the menu (which are pulled from the SiteMapDataSource) are output through the SiteMap Server control. However, if you look carefully at the above two examples, you&#8217;ll see that the containers (div tags) all have the same class references.</p>
<h2>Not Everything Works out of the Box</h2>
<p>So far, everything has seemed very straight forward. Well, life is not always so simple. For example, on our <a href="http://www.siliconvalley-codecamp.com/Presenters.aspx">Presenters</a> web page, we want to use the three column content that the css fun template provides us but unfortunately, there example looks like what I have pictured below on the left, and we want to make it look like what is pictured on the right. To do this, we are going to have to do a little minor surgery on the css file. Not very hard though since Microsoft&#8217;s template is almost correct. </p>
<p><a href="http://www.siliconvalley-codecamp.com/Presenters.aspx"><img class="floatRight" border="0" src="http://peterkellner.net/wp/Images/VSDesignTemplates1/ThreeColPresenter.jpg" width="350" height="280" /></a></p>
<p><img class="floatLeft" src="http://peterkellner.net/wp/Images/VSDesignTemplates1/ThreeColDefault.jpg" width="350" height="235" /></p>
<div style="clear: both"></div>
<p>The first thing you notice is that the Microsoft example of using the template on the left has columns that are roughtly equal in size. For our web site, we want to have a narrow column for the picture, a wide column for the course description, and then a narrow column to show the presenters website. What we get from the css gives is a great starting place. Below are all the css tags needed from the css file to make the three equal width columns. </p>
<p><!--<br />
{\rtf1\ansi\ansicpg\lang1024\noproof1252\uc1 \deff0{\fonttbl{\f0\fnil\fcharset0\fprq1 Courier New;}}{\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0??;\red255\green0\blue255;\red255\green0\blue0;\red255\green255\blue0;\red255\green255\blue255;??\red0\green0\blue128;\red0\green128\blue128;\red0\green128\blue0;??\red128\green0\blue128;\red128\green0\blue0;\red128\green128\blue0;\red128\green128\blue128;??\red192\green192\blue192;}??\fs20 \cf11 /******************\par ??Three Column Section\par ??******************/\par ??\par ??\cf13 #three-column-container\cf0  \{\par ??\tab \cf6 width\cf0 :\cf2 100%\cf0 ;\par ??\tab \cf6 margin\cf0 :\cf2 10px\cf0  \cf2 0px\cf0 ;\par ??\tab \cf6 padding\cf0 :\cf2 10px\cf0  \cf2 0px\par ??\cf0 \tab \}\par ??\par ??\cf13 #three-column-left\cf0  \{\par ??\tab \cf6 float\cf0 :\cf2 left\cf0 ;\par ??\tab \cf6 width\cf0 :\cf2 30%\cf0 ;\par ??\tab \}\par ??\par ??\cf13 #three-column-right\cf0  \{\par ??\tab \cf6 float\cf0 :\cf2 right\cf0 ;\par ??\tab \cf6 width\cf0 :\cf2 30%\cf0 ;\par ??\tab \}\par ??\par ??\cf13 #three-column-middle\cf0  \{\par ??\tab \cf6 width\cf0 :\cf2 30%\cf0 ;\par ??\tab \cf6 margin\cf0 :\cf2 0px\cf0  \cf2 31%\cf0  \cf2 0px\cf0  \cf2 35%\cf0 ;\par ??\tab \}}<br />
-->
<div style="border-bottom: #cccccc 1pt solid; border-left: #cccccc 1pt solid; padding-bottom: 1pt; padding-left: 1pt; width: 100%; padding-right: 1pt; font-family: courier new; background: #f5f5f5; color: black; font-size: 10pt; overflow: auto; border-top: #cccccc 1pt solid; border-right: #cccccc 1pt solid; padding-top: 1pt">
<p style="margin: 0px"><span style="color: green">/******************</span></p>
<p style="margin: 0px"><span style="color: green">Three Column Section</span></p>
<p style="margin: 0px"><span style="color: green">******************/</span></p>
<p style="margin: 0px">&#160;</p>
<p style="margin: 0px"><span style="color: maroon">#three-column-container</span> {</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">width</span>:<span style="color: blue">100%</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">margin</span>:<span style="color: blue">10px</span> <span style="color: blue">0px</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">padding</span>:<span style="color: blue">10px</span> <span style="color: blue">0px</span></p>
<p style="margin: 0px">&#160;&#160;&#160; }</p>
<p style="margin: 0px">&#160;</p>
<p style="margin: 0px"><span style="color: maroon">#three-column-left</span> {</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">float</span>:<span style="color: blue">left</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">width</span>:<span style="color: blue">30%</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; }</p>
<p style="margin: 0px">&#160;</p>
<p style="margin: 0px"><span style="color: maroon">#three-column-right</span> {</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">float</span>:<span style="color: blue">right</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">width</span>:<span style="color: blue">30%</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; }</p>
<p style="margin: 0px">&#160;</p>
<p style="margin: 0px"><span style="color: maroon">#three-column-middle</span> {</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">width</span>:<span style="color: blue">30%</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">margin</span>:<span style="color: blue">0px</span> <span style="color: blue">31%</span> <span style="color: blue">0px</span> <span style="color: blue">35%</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; }</p>
</p></div>
<p> 
<p>Using this in their sample code, Microsoft used the following HTML to generate the page above on the left.</p>
<p><!--<br />
{\rtf1\ansi\ansicpg\lang1024\noproof1252\uc1 \deff0{\fonttbl{\f0\fnil\fcharset0\fprq1 Courier New;}}{\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0??;\red255\green0\blue255;\red255\green0\blue0;\red255\green255\blue0;\red255\green255\blue255;??\red0\green0\blue128;\red0\green128\blue128;\red0\green128\blue0;??\red128\green0\blue128;\red128\green0\blue0;\red128\green128\blue0;\red128\green128\blue128;??\red192\green192\blue192;}??\fs20 \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="three-column-container"&gt;\par ??&lt;\cf13 div\cf0  \cf6 id\cf2 ="three-column-left"&gt;\par ??\cf0     \cf2 &lt;\cf13 h2\cf2 &gt;\par ??\cf0         Column one of a three column content section\cf2 &lt;/\cf13 h2\cf2 &gt;\par ??\cf0     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh\par ??    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor\par ??    sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt\par ??    ut.\cf2 &lt;/\cf13 div\cf2 &gt;\par ??&lt;\cf13 div\cf0  \cf6 id\cf2 ="three-column-right"&gt;\par ??\cf0     \cf2 &lt;\cf13 h2\cf2 &gt;\par ??\cf0         Column three of a three column content section\cf2 &lt;/\cf13 h2\cf2 &gt;\par ??\cf0     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh\par ??    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.\par ??\cf2 &lt;/\cf13 div\cf2 &gt;\par ??&lt;\cf13 div\cf0  \cf6 id\cf2 ="three-column-middle"&gt;\par ??\cf0     \cf2 &lt;\cf13 h2\cf2 &gt;\par ??\cf0         Column two of a three column content section\cf2 &lt;/\cf13 h2\cf2 &gt;\par ??\cf0     Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh\par ??    euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.\par ??\cf2 &lt;/\cf13 div\cf2 &gt;}<br />
-->
<div style="border-bottom: #cccccc 1pt solid; border-left: #cccccc 1pt solid; padding-bottom: 1pt; padding-left: 1pt; width: 100%; padding-right: 1pt; font-family: courier new; background: #f5f5f5; color: black; font-size: 10pt; overflow: auto; border-top: #cccccc 1pt solid; border-right: #cccccc 1pt solid; padding-top: 1pt">
<p style="margin: 0px"><span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;three-column-container&quot;&gt;</span></p>
<p style="margin: 0px"><span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;three-column-left&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">h2</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; Column one of a three column content section<span style="color: blue">&lt;/</span><span style="color: maroon">h2</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p>
<p style="margin: 0px">&#160;&#160;&#160; euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor</p>
<p style="margin: 0px">&#160;&#160;&#160; sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt</p>
<p style="margin: 0px">&#160;&#160;&#160; ut.<span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px"><span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;three-column-right&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">h2</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; Column three of a three column content section<span style="color: blue">&lt;/</span><span style="color: maroon">h2</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p>
<p style="margin: 0px">&#160;&#160;&#160; euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="margin: 0px"><span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px"><span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;three-column-middle&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">h2</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; Column two of a three column content section<span style="color: blue">&lt;/</span><span style="color: maroon">h2</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh</p>
<p style="margin: 0px">&#160;&#160;&#160; euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<p style="margin: 0px"><span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
</p></div>
<p> 
<p>We want to modify this some, but we don&#8217;t just want to modify it, we want to create another set of tags so we can preserve the original for use later. Using cut and paste (with reservation of course), we create a new set of tags and simply add a w to the end of the tag names for wide (not very creative). We then modify the margins of this new tag to give us a wide section. A little trial and error is necessary to fine tune these numbers. Below is the new css we have created.</p>
<p><!--<br />
{\rtf1\ansi\ansicpg\lang1024\noproof1252\uc1 \deff0{\fonttbl{\f0\fnil\fcharset0\fprq1 Courier New;}}{\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0??;\red255\green0\blue255;\red255\green0\blue0;\red255\green255\blue0;\red255\green255\blue255;??\red0\green0\blue128;\red0\green128\blue128;\red0\green128\blue0;??\red128\green0\blue128;\red128\green0\blue0;\red128\green128\blue0;\red128\green128\blue128;??\red192\green192\blue192;}??\fs20 \cf11 /******************\par ??Three Column Section Wide Middle\par ??******************/\par ??\par ??\cf13 #three-column-containerw\cf0  \{\par ??\tab \cf6 width\cf0 :\cf2 100%\cf0 ;\par ??\tab \cf6 margin\cf0 :\cf2 10px\cf0  \cf2 0px\cf0 ;\par ??\tab \cf6 padding\cf0 :\cf2 10px\cf0  \cf2 0px\par ??\cf0 \tab \}\par ??\par ??\cf13 #three-column-leftw\cf0  \{\par ??\tab \cf6 float\cf0 :\cf2 left\cf0 ;\par ??\tab \cf6 width\cf0 :\cf2 15%\cf0 ;\par ??\tab \}\par ??\par ??\cf13 #three-column-rightw\cf0  \{\par ??\tab \cf6 float\cf0 :\cf2 right\cf0 ;\par ??\tab \cf6 width\cf0 :\cf2 15%\cf0 ;\par ??\tab \}\par ??\par ??\cf13 #three-column-middlew\cf0  \{\par ??\tab \cf6 width\cf0 :\cf2 55%\cf0 ;\par ??\tab \cf6 margin\cf0 :\cf2 0px\cf0  \cf2 22%\cf0  \cf2 0px\cf0  \cf2 22%\cf0 ;\par ??\tab \cf6 margin\cf0 :\par ??\tab \}\par ??}<br />
-->
<div style="border-bottom: #cccccc 1pt solid; border-left: #cccccc 1pt solid; padding-bottom: 1pt; padding-left: 1pt; width: 100%; padding-right: 1pt; font-family: courier new; background: #f5f5f5; color: black; font-size: 10pt; overflow: auto; border-top: #cccccc 1pt solid; border-right: #cccccc 1pt solid; padding-top: 1pt">
<p style="margin: 0px"><span style="color: green">/******************</span></p>
<p style="margin: 0px"><span style="color: green">Three Column Section Wide Middle</span></p>
<p style="margin: 0px"><span style="color: green">******************/</span></p>
<p style="margin: 0px">&#160;</p>
<p style="margin: 0px"><span style="color: maroon">#three-column-containerw</span> {</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">width</span>:<span style="color: blue">100%</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">margin</span>:<span style="color: blue">10px</span> <span style="color: blue">0px</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">padding</span>:<span style="color: blue">10px</span> <span style="color: blue">0px</span></p>
<p style="margin: 0px">&#160;&#160;&#160; }</p>
<p style="margin: 0px">&#160;</p>
<p style="margin: 0px"><span style="color: maroon">#three-column-leftw</span> {</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">float</span>:<span style="color: blue">left</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">width</span>:<span style="color: blue">15%</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; }</p>
<p style="margin: 0px">&#160;</p>
<p style="margin: 0px"><span style="color: maroon">#three-column-rightw</span> {</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">float</span>:<span style="color: blue">right</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">width</span>:<span style="color: blue">15%</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; }</p>
<p style="margin: 0px">&#160;</p>
<p style="margin: 0px"><span style="color: maroon">#three-column-middlew</span> {</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">width</span>:<span style="color: blue">55%</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">margin</span>:<span style="color: blue">0px</span> <span style="color: blue">22%</span> <span style="color: blue">0px</span> <span style="color: blue">22%</span>;</p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">margin</span>:</p>
<p style="margin: 0px">&#160;&#160;&#160; }</p>
</p></div>
<p> 
<p>Using our newly defined css &quot;three-column-containerw&quot;, we created the presenter interface using the Repeater server control included with asp.net. Notice the use of templates to each individual presenter&#8217;s information. Notice we are using div tags the way we normally use table row and column tags. Below is implementation.</p>
<p><!--<br />
{\rtf1\ansi\ansicpg\lang1024\noproof1252\uc1 \deff0{\fonttbl{\f0\fnil\fcharset0\fprq1 Courier New;}}{\colortbl;\red0\green0\blue0;\red0\green0\blue255;\red0\green255\blue255;\red0\green255\blue0??;\red255\green0\blue255;\red255\green0\blue0;\red255\green255\blue0;\red255\green255\blue255;??\red0\green0\blue128;\red0\green128\blue128;\red0\green128\blue0;??\red128\green0\blue128;\red128\green0\blue0;\red128\green128\blue0;\red128\green128\blue128;??\red192\green192\blue192;}??\fs20 \cf2 &lt;\cf13 asp\cf2 :\cf13 Repeater\cf0  \cf6 ID\cf2 ="Repeater1"\cf0  \cf6 runat\cf2 ="server"\cf0  \par ??    \cf6 DataSourceID\cf2 ="ObjectDataSourceAllPresenters"&gt;\par ??\cf0     \cf2 &lt;\cf13 HeaderTemplate\cf2 &gt;\par ??\cf0         \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="three-column-containerw"&gt;\par ??\cf0     \cf2 &lt;/\cf13 HeaderTemplate\cf2 &gt;\par ??\cf0     \cf2 &lt;\cf13 ItemTemplate\cf2 &gt;\par ??\cf0         \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="three-column-leftw"&gt;\par ??\cf0         \cf2 &lt;\cf13 br\cf0  \cf2 /&gt;\par ??\cf0             \cf2 &lt;\cf13 asp\cf2 :\cf13 Image\cf0  \cf6 runat\cf2 ="server"\cf0  \cf6 ID\cf2 ="ImageUser"\cf0  \par ??            \cf6 ImageUrl\cf2 ='\cf0\cb7\highlight7 &lt;%\cb0\highlight0 # "~/DisplayImage.ashx?PKID=" + Eval("PKID")  \cb7\highlight7 %&gt;\cf2\cb0\highlight0 '\cf0  \cf2 /&gt;\par ??\cf0             \cf2 &lt;\cf13 asp\cf2 :\cf13 Label\cf0  \cf6 ID\cf2 ="LabelName"\cf0  \cf6 runat\cf2 ="server"\cf0  \cf6 Font-Bold\cf2 ="true"\cf0  \par ??            \cf6 Text\cf2 ='\cf0\cb7\highlight7 &lt;%\cb0\highlight0 # Eval("UserFirstName") + " " + Eval("UserLastName") \cb7\highlight7 %&gt;\cf2\cb0\highlight0 '&gt;\par ??\cf0             \cf2 &lt;/\cf13 asp\cf2 :\cf13 Label\cf2 &gt;\par ??\cf0         \cf2 &lt;/\cf13 div\cf2 &gt;\par ??\cf0          \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="three-column-rightw"&gt;\par ??\cf0             \cf2 &lt;\cf13 asp\cf2 :\cf13 Label\cf0  \cf6 ID\cf2 ="Label2"\cf0  \cf6 runat\cf2 ="server"\cf0  \par ??            \cf6 Font-Bold\cf2 ="true"\cf0  \cf6 Text\cf2 ='\cf0\cb7\highlight7 &lt;%\cb0\highlight0 # Eval("UserWebSite") \cb7\highlight7 %&gt;\cf2\cb0\highlight0 '&gt;\par ??\cf0             \cf2 &lt;/\cf13 asp\cf2 :\cf13 Label\cf2 &gt;\par ??\cf0             \par ??            \cf2 &lt;\cf13 asp\cf2 :\cf13 HyperLink\cf0  \cf6 ID\cf2 ="HyperLinkSessions"\cf0   \par ??              \cf6 NavigateUrl\cf2 ='\cf0\cb7\highlight7 &lt;%\cb0\highlight0 # "~/Sessions.aspx?id=" + Eval("PKID") \cb7\highlight7 %&gt;\cf2\cb0\highlight0 '\par ??\cf0               \cf6 Text\cf2 ="Sessions"\par ??\cf0               \cf6 runat\cf2 ="server"&gt;&lt;/\cf13 asp\cf2 :\cf13 HyperLink\cf2 &gt;\par ??\cf0         \cf2 &lt;/\cf13 div\cf2 &gt;\par ??\cf0         \cf2 &lt;\cf13 div\cf0  \cf6 id\cf2 ="three-column-middlew"&gt;\par ??\cf0             \cf2 &lt;\cf13 asp\cf2 :\cf13 Label\cf0  \cf6 ID\cf2 ="Label1"\cf0  \cf6 runat\cf2 ="server"\cf0  \cf6 Text\cf2 ='\cf0\cb7\highlight7 &lt;%\cb0\highlight0 # Eval("UserBio") \cb7\highlight7 %&gt;\cf2\cb0\highlight0 '&gt;&lt;/\cf13 asp\cf2 :\cf13 Label\cf2 &gt;\par ??\cf0         \cf2 &lt;/\cf13 div\cf2 &gt;\par ??\cf0         \cf2 &lt;\cf13 div\cf0  \cf6 class\cf2 ="clear"&gt;&lt;/\cf13 div\cf2 &gt;\par ??\cf0         \cf2 &lt;\cf13 hr\cf0  \cf2 /&gt;\par ??\cf0     \cf2 &lt;/\cf13 ItemTemplate\cf2 &gt;\par ??\cf0     \cf2 &lt;\cf13 FooterTemplate\cf2 &gt;\par ??\cf0         \cf2 &lt;/\cf13 div\cf2 &gt;\par ??\cf0     \cf2 &lt;/\cf13 FooterTemplate\cf2 &gt;\par ??&lt;/\cf13 asp\cf2 :\cf13 Repeater\cf2 &gt;}<br />
-->
<div style="border-bottom: #cccccc 1pt solid; border-left: #cccccc 1pt solid; padding-bottom: 1pt; padding-left: 1pt; width: 100%; padding-right: 1pt; font-family: courier new; background: #f5f5f5; color: black; font-size: 10pt; overflow: auto; border-top: #cccccc 1pt solid; border-right: #cccccc 1pt solid; padding-top: 1pt">
<p style="margin: 0px"><span style="color: blue">&lt;</span><span style="color: maroon">asp</span><span style="color: blue">:</span><span style="color: maroon">Repeater</span> <span style="color: red">ID</span><span style="color: blue">=&quot;Repeater1&quot;</span> <span style="color: red">runat</span><span style="color: blue">=&quot;server&quot;</span> </p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: red">DataSourceID</span><span style="color: blue">=&quot;ObjectDataSourceAllPresenters&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">HeaderTemplate</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;three-column-containerw&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">HeaderTemplate</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">ItemTemplate</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;three-column-leftw&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">br</span> <span style="color: blue">/&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">asp</span><span style="color: blue">:</span><span style="color: maroon">Image</span> <span style="color: red">runat</span><span style="color: blue">=&quot;server&quot;</span> <span style="color: red">ID</span><span style="color: blue">=&quot;ImageUser&quot;</span> </p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: red">ImageUrl</span><span style="color: blue">=&#8217;</span><span style="background: yellow">&lt;%</span># &quot;~/DisplayImage.ashx?PKID=&quot; + Eval(&quot;PKID&quot;)&#160; <span style="background: yellow">%&gt;</span><span style="color: blue">&#8216;</span> <span style="color: blue">/&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">asp</span><span style="color: blue">:</span><span style="color: maroon">Label</span> <span style="color: red">ID</span><span style="color: blue">=&quot;LabelName&quot;</span> <span style="color: red">runat</span><span style="color: blue">=&quot;server&quot;</span> <span style="color: red">Font-Bold</span><span style="color: blue">=&quot;true&quot;</span> </p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: red">Text</span><span style="color: blue">=&#8217;</span><span style="background: yellow">&lt;%</span># Eval(&quot;UserFirstName&quot;) + &quot; &quot; + Eval(&quot;UserLastName&quot;) <span style="background: yellow">%&gt;</span><span style="color: blue">&#8216;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">asp</span><span style="color: blue">:</span><span style="color: maroon">Label</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;three-column-rightw&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">asp</span><span style="color: blue">:</span><span style="color: maroon">Label</span> <span style="color: red">ID</span><span style="color: blue">=&quot;Label2&quot;</span> <span style="color: red">runat</span><span style="color: blue">=&quot;server&quot;</span> </p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: red">Font-Bold</span><span style="color: blue">=&quot;true&quot;</span> <span style="color: red">Text</span><span style="color: blue">=&#8217;</span><span style="background: yellow">&lt;%</span># Eval(&quot;UserWebSite&quot;) <span style="background: yellow">%&gt;</span><span style="color: blue">&#8216;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">asp</span><span style="color: blue">:</span><span style="color: maroon">Label</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;</p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">asp</span><span style="color: blue">:</span><span style="color: maroon">HyperLink</span> <span style="color: red">ID</span><span style="color: blue">=&quot;HyperLinkSessions&quot;</span>&#160; </p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: red">NavigateUrl</span><span style="color: blue">=&#8217;</span><span style="background: yellow">&lt;%</span># &quot;~/Sessions.aspx?id=&quot; + Eval(&quot;PKID&quot;) <span style="background: yellow">%&gt;</span><span style="color: blue">&#8216;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: red">Text</span><span style="color: blue">=&quot;Sessions&quot;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: red">runat</span><span style="color: blue">=&quot;server&quot;&gt;&lt;/</span><span style="color: maroon">asp</span><span style="color: blue">:</span><span style="color: maroon">HyperLink</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">id</span><span style="color: blue">=&quot;three-column-middlew&quot;&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">asp</span><span style="color: blue">:</span><span style="color: maroon">Label</span> <span style="color: red">ID</span><span style="color: blue">=&quot;Label1&quot;</span> <span style="color: red">runat</span><span style="color: blue">=&quot;server&quot;</span> <span style="color: red">Text</span><span style="color: blue">=&#8217;</span><span style="background: yellow">&lt;%</span># Eval(&quot;UserBio&quot;) <span style="background: yellow">%&gt;</span><span style="color: blue">&#8216;&gt;&lt;/</span><span style="color: maroon">asp</span><span style="color: blue">:</span><span style="color: maroon">Label</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160; ;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">div</span> <span style="color: red">class</span><span style="color: blue">=&quot;clear&quot;&gt;&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">hr</span> <span style="color: blue">/&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">ItemTemplate</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;</span><span style="color: maroon">FooterTemplate</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160;&#160;&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">div</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px">&#160;&#160;&#160; <span style="color: blue">&lt;/</span><span style="color: maroon">FooterTemplate</span><span style="color: blue">&gt;</span></p>
<p style="margin: 0px"><span style="color: blue">&lt;/</span><span style="color: maroon">asp</span><span style="color: blue">:</span><span style="color: maroon">Repeater</span><span style="color: blue">&gt;</span></p>
</p></div>
<h2>Summary</h2>
<p>We&#8217;ve demonstrated some of the techniques her necessary to take a professional built CSS and implement an asp.net 2.0 web site. Seeing the power CSS brings to the table makes it possible for a web designer and web engineer to work independently and product outstanding results. We&#8217;ve seen that here by taking the Microsoft Professionally developed templates, combined with an asp.net 2.0 engineer (me) for two days and the results are very impressive. Mileage will vary of course depending on the project, but this really shows what can be done in a very short amount of time. </p>
<h2>About the author</h2>
<p>Peter Kellner founded 73rd Street Associates in 1990, where he successfully delivered systems for university clinic scheduling, insurance company management, and turnkey physician office management to more than 500 customers nationwide. Ten years later, in 2000, 73rd Street Associates was purchased by a large insurance company, and Peter started a new career as an independent software consultant. Among the technologies he currently is involved with are ASP.NET, Oracle, Java, VOiP, and soon, SQL Server. When not working, Peter spends most his free time biking. He has ridden his bike across the globe. Most recently he and his wife, Tammy, rode across the U.S., from California to Georgia, in just 27 days. His blog site is <a href="http://peterkellner.net">http://peterkellner.net</a>. You will find this article and the code posted in the download section.</p>
</p></div>
</p></div>
]]></content:encoded>
			<wfw:commentRss>http://peterkellner.net/2006/08/28/msprofcsshowto/feed/</wfw:commentRss>
		<slash:comments>32</slash:comments>
		</item>
		<item>
		<title>How Things Work &#8211; ASP.NET 2.0 &#8211; CodeBehind</title>
		<link>http://peterkellner.net/2006/07/12/how-things-work-aspnet-20-codebehind/?utm_source=rss&#038;utm_medium=rss&#038;utm_campaign=how-things-work-aspnet-20-codebehind</link>
		<comments>http://peterkellner.net/2006/07/12/how-things-work-aspnet-20-codebehind/#comments</comments>
		<pubDate>Wed, 12 Jul 2006 15:36:41 +0000</pubDate>
		<dc:creator>Peter Kellner</dc:creator>
				<category><![CDATA[ASP.NET 2.0]]></category>
		<category><![CDATA[How Things Work]]></category>

		<guid isPermaLink="false">http://peterkellner.net/?p=38</guid>
		<description><![CDATA[<p>In this article, a simple asp.net 2.0 page will be taken apart and shown how the actual page class is put together. As we know, when an http request comes into asp.net through the http pipeline that is destined to be a page (file type aspx), the objective of asp.net 2.0 is to create a complete class that encapsulates that page request. That page class is an httpHandler of course.</p>]]></description>
			<content:encoded><![CDATA[<h2>Series Theme</h2>
<p>This how-to series is my personal exploration into figuring out not just how to make things work, but how they actually work. The theme behind this series is: &quot;If it&#8217;s not broken, take it apart and try and figure out why&quot;. I plan on covering many issues in ASP.NET 2.0. If you are interested in a particular part of ASP.NET 2.0 that I have not covered, please <a href="http://peterkellner.net/contact/">contact me</a> and time permitting, I&#8217;ll see if I can figure out how it works.</p>
<h2>Abstract</h2>
<p>In this article, a simple asp.net 2.0 page will be taken apart and shown how the actual page class is put together. As we know, when an http request comes into asp.net through the http pipeline that is destined to be a page (file type aspx), the objective of asp.net 2.0 is to create a complete class that encapsulates that page request. That page class is an httpHandler of course.</p>
<p> <span id="more-24"></span><br />
<h2>Example Page</h2>
<p>The Example Page simply has three Labels and one Button. The Labels and buttons will be as follows:</p>
<ul>
<li>Label1 &#8211; Gets Date and Time set in Page_Load event </li>
<li>Label2 &#8211; Gets Date and Time using databinding </li>
<li>Label3 &#8211; Gets Date and Time when button is pressed </li>
<li>Button1 &#8211; Puts Date and Time in Label3 as well as executes DataBind on control Label2 </li>
</ul>
<p>Here is the page code below. (CodeBehindSample1.aspx)</p>
<p> 
<pre class="csharpcode"><span class="kwrd">&lt;</span> %@ Page Language=&quot;C#&quot; AutoEventWireup=&quot;true&quot; CodeFile=&quot;CodeBehindSample1.aspx.cs&quot; Inherits=&quot;CodeBehindSample1&quot; <span class="asp">%&gt;</span>

<span class="kwrd">&lt;</span> !DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;<span class="kwrd">&gt;</span>

<span class="kwrd">&lt;</span><span class="html">html</span> <span class="attr">xmlns</span><span class="kwrd">=&quot;http://www.w3.org/1999/xhtml&quot;</span> <span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">head</span> <span class="attr">runat</span><span class="kwrd">=&quot;server&quot;</span><span class="kwrd">&gt;</span>
    <span class="kwrd">&lt;</span><span class="html">title</span><span class="kwrd">&gt;</span>Untitled Page<span class="kwrd">&lt;/</span><span class="html">title</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">head</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;</span><span class="html">body</span><span class="kwrd">&gt;</span>
    <span class="kwrd">&lt;</span><span class="html">form</span> <span class="attr">id</span><span class="kwrd">=&quot;form1&quot;</span> <span class="attr">runat</span><span class="kwrd">=&quot;server&quot;</span><span class="kwrd">&gt;</span>
    <span class="kwrd">&lt;</span><span class="html">div</span><span class="kwrd">&gt;</span>
    <span class="kwrd">&lt;</span><span class="html">asp</span> <span class="attr">:Label</span> <span class="attr">ID</span><span class="kwrd">=&quot;Label1&quot;</span> <span class="attr">runat</span><span class="kwrd">=&quot;server&quot;</span> <span class="kwrd">&gt;&lt;/</span><span class="html">asp</span><span class="kwrd">&gt;</span>
        <span class="kwrd">&lt;</span><span class="html">asp</span> <span class="attr">:Label</span> <span class="attr">ID</span><span class="kwrd">=&quot;Label2&quot;</span> <span class="attr">runat</span><span class="kwrd">=&quot;server&quot;</span>
          <span class="attr">Text</span><span class="kwrd">='&lt;%# DateTime.Now.ToLongTimeString() %&gt;'</span><span class="kwrd">&gt;&lt;/</span><span class="html">asp</span><span class="kwrd">&gt;</span>
        <span class="kwrd">&lt;</span><span class="html">asp</span> <span class="attr">:Label</span> <span class="attr">ID</span><span class="kwrd">=&quot;Label3&quot;</span> <span class="attr">runat</span><span class="kwrd">=&quot;server&quot;</span> <span class="attr">Text</span><span class="kwrd">=&quot;Label&quot;</span><span class="kwrd">&gt;&lt;/</span><span class="html">asp</span><span class="kwrd">&gt;</span>
        <span class="kwrd">&lt;</span><span class="html">asp</span> <span class="attr">:Button</span> <span class="attr">ID</span><span class="kwrd">=&quot;Button1&quot;</span> <span class="attr">runat</span><span class="kwrd">=&quot;server&quot;</span> <span class="attr">Text</span><span class="kwrd">=&quot;Button&quot;</span> <span class="attr">OnClick</span><span class="kwrd">=&quot;Button1_Click&quot;</span> <span class="kwrd">/&gt;</span>

    <span class="kwrd">&lt;/</span><span class="html">div</span><span class="kwrd">&gt;</span>
    <span class="kwrd">&lt;/</span><span class="html">form</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">body</span><span class="kwrd">&gt;</span>
<span class="kwrd">&lt;/</span><span class="html">html</span><span class="kwrd">&gt;</span></pre>
<p></p>
<p>And the codebehind file itself. ((CodeBehindSample1.aspx.cs)</p>
<p></p>
<pre class="csharpcode"><span class="kwrd">using</span> System;
<span class="kwrd">using</span> System.Data;
<span class="kwrd">using</span> System.Configuration;
<span class="kwrd">using</span> System.Collections;
<span class="kwrd">using</span> System.Web;
<span class="kwrd">using</span> System.Web.Security;
<span class="kwrd">using</span> System.Web.UI;
<span class="kwrd">using</span> System.Web.UI.WebControls;
<span class="kwrd">using</span> System.Web.UI.WebControls.WebParts;
<span class="kwrd">using</span> System.Web.UI.HtmlControls;

<span class="kwrd">public</span> <span class="kwrd">partial</span> <span class="kwrd">class</span> CodeBehindSample1 : System.Web.UI.Page
{
    <span class="kwrd">protected</span> <span class="kwrd">void</span> Page_Load(<span class="kwrd">object</span> sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToLongTimeString();
    }

    <span class="kwrd">protected</span> <span class="kwrd">void</span> Button1_Click(<span class="kwrd">object</span> sender, EventArgs e)
    {
        Label3.Text = DateTime.Now.ToLongTimeString();
        Label2.DataBind();
    }
}</pre>
<p></p>
<p>When the project is built that includes this page above, an .net assembly is created that represents the above page. The files are stored in a directory called something like <i>C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\Temporary ASP.NET Files\pagecache\6b6b75e0\f0cbf892</i>. There are two files that are worth looking at.</p>
<p>App_Web_qlh7npdn.1.cs and App_Web_qlh7npdn.0.cs (I will refer to them as 1.cs and 0.cs from here on out).</p>
<p>0.cs has two classes of interest to talk about.</p>
<p>The first one, (1.cs) declared as &quot;public partial class CodeBehindSample1 : System.Web.SessionState.IRequiresSessionState {&quot; includes a definition for each of the controls declared on the aspx page. It gives us a reference to Profile and ApplicationInstance from the Context of the application (originally created when the request came in).</p>
<p>The second one, (0.cs) which is created in the namespace ASP, (in our case is called ASP.codebehindsample1_aspx which is because of what is defined in the Page tag Inherits) is the full page that represents this request. It has a method that builds each control including databinding. Notice that this class actually inherits from the first one mentioned (1.cs). The actual declaration is as follows: &quot;public class codebehindsample1_aspx : global::CodeBehindSample1, System.Web.IHttpHandler {&quot;</p>
<p>There are several things to notice about this generated code. Here is a list to pay attention to.</p>
<ul>
<li>In the code generated for the button (private global::System.Web.UI.WebControls.Button @__BuildControlButton1() {<br />
    <br />global::System.Web.UI.WebControls.Button @__ctrl;) notice that the text is set to &quot;Button&quot; and the ID is set to Button1. This is the code created from the attribute definition in the aspx file. </li>
<li>Notice how the event handler Button1_Click is created in code. @__ctrl.Click += new System.EventHandler(this.Button1_Click); </li>
<li>For databinding on Label2, notice that the member &quot;public void @__DataBindingLabel2(object sender, System.EventArgs e) {&quot;. You can see how the datacontainer is created, then the dataBindingExpressionBuilderTarget.Text is set to the current data and time.<br />
    </li>
</ul>
<h2>Conclusion</h2>
<p>In conclusion, you can see that at the end of the day, one class is created (ASP.codebehindsample1_aspx) that fully represents the page. Attributes that are set declaratively in the page are turned into code in the 0.cs file, and databinding is performed using a artificially generated event. Below, I&#8217;ve pasted both the code for 0.cs and 1.cs which should be helpful and instructive</p>
<h2>0.cs</h2>
<p></p>
<pre class="csharpcode"><span class="rem">//------------------------------------------------------------------------------</span>
<span class="rem">// &lt;auto -generated&gt;</span>
<span class="rem">//     This code was generated by a tool.</span>
<span class="rem">//     Runtime Version:2.0.50727.42</span>
<span class="rem">//</span>
<span class="rem">//     Changes to this file may cause incorrect behavior and will be lost if</span>
<span class="rem">//     the code is regenerated.</span>
<span class="rem">// &lt;/auto&gt;</span>
<span class="rem">//------------------------------------------------------------------------------</span>

<span class="kwrd">public</span> <span class="kwrd">partial</span> <span class="kwrd">class</span> CodeBehindSample1 : System.Web.SessionState.IRequiresSessionState {

    <span class="kwrd">protected</span> global::System.Web.UI.WebControls.Label Label1;
    <span class="kwrd">protected</span> global::System.Web.UI.WebControls.Label Label2;
    <span class="kwrd">protected</span> global::System.Web.UI.WebControls.Label Label3;
    <span class="kwrd">protected</span> global::System.Web.UI.WebControls.Button Button1;
    <span class="kwrd">protected</span> global::System.Web.UI.HtmlControls.HtmlForm form1;

    <span class="kwrd">protected</span> System.Web.Profile.DefaultProfile Profile {

        get {
            <span class="kwrd">return</span> ((System.Web.Profile.DefaultProfile)(<span class="kwrd">this</span>.Context.Profile));
        }
    }

    <span class="kwrd">protected</span> System.Web.HttpApplication ApplicationInstance {
        get {
            <span class="kwrd">return</span> ((System.Web.HttpApplication)(<span class="kwrd">this</span>.Context.ApplicationInstance));
        }
    }
}
<span class="kwrd">namespace</span> ASP {

    <span class="kwrd">using</span> System.Web.Profile;
    <span class="kwrd">using</span> System.Text.RegularExpressions;
    <span class="kwrd">using</span> System.Web.Caching;
    <span class="kwrd">using</span> System.Configuration;
    <span class="kwrd">using</span> System.Collections.Specialized;
    <span class="kwrd">using</span> System.Web.UI.HtmlControls;
    <span class="kwrd">using</span> System.Web.UI.WebControls
    <span class="kwrd">using</span> System.Web.UI;
    <span class="kwrd">using</span> System.Collections;
    <span class="kwrd">using</span> System;
    <span class="kwrd">using</span> System.Web.Security;
    <span class="kwrd">using</span> System.Web;
    <span class="kwrd">using</span> System.Web.SessionState;
    <span class="kwrd">using</span> System.Text;

    [System.Runtime.CompilerServices.CompilerGlobalScopeAttribute()]
    <span class="kwrd">public</span> <span class="kwrd">class</span> codebehindsample1_aspx : global::CodeBehindSample1,
           System.Web.IHttpHandler {

        <span class="kwrd">private</span> <span class="kwrd">static</span> <span class="kwrd">bool</span> @__initialized;

        <span class="kwrd">private</span> <span class="kwrd">static</span> <span class="kwrd">object</span> @__fileDependencies;

        <span class="kwrd">public</span> codebehindsample1_aspx() {
            <span class="kwrd">string</span>[] dependencies;

            ((System.Web.UI.Page)(<span class="kwrd">this</span>)).AppRelativeVirtualPath =
            <span class="str">&quot;~/CodeBehindSample1.aspx&quot;</span>;

            <span class="preproc">#line</span> <span class="kwrd">default</span>
            <span class="preproc">#line</span> hidden
            <span class="kwrd">if</span> ((global::ASP.codebehindsample1_aspx.@__initialized == <span class="kwrd">false</span>)) {
                dependencies = <span class="kwrd">new</span> <span class="kwrd">string</span>[2];
                dependencies[0] = <span class="str">&quot;~/CodeBehindSample1.aspx&quot;</span>;
                dependencies[1] = <span class="str">&quot;~/CodeBehindSample1.aspx.cs&quot;</span>;
                global::ASP.codebehindsample1_aspx.@__fileDependencies =
                <span class="kwrd">this</span>.GetWrappedFileDependencies(dependencies);
                global::ASP.codebehindsample1_aspx.@__initialized = <span class="kwrd">true</span>;
            }
            <span class="kwrd">this</span>.Server.ScriptTimeout = 30000000;
        }

        <span class="kwrd">private</span> global::System.Web.UI.HtmlControls.HtmlTitle
             @__BuildControl__control3() {
            global::System.Web.UI.HtmlControls.HtmlTitle @__ctrl;

            @__ctrl = <span class="kwrd">new</span> global::System.Web.UI.HtmlControls.HtmlTitle();

            System.Web.UI.IParserAccessor @__parser =
            ((System.Web.UI.IParserAccessor)(@__ctrl));

            @__parser.AddParsedSubObject(<span class="kwrd">new</span> System.Web.UI.LiteralControl(<span class="str">&quot;Untitled Page&quot;</span>));

            <span class="kwrd">return</span> @__ctrl;
        }

        <span class="kwrd">private</span> global::System.Web.UI.HtmlControls.HtmlHead @__BuildControl__control2() {
            global::System.Web.UI.HtmlControls.HtmlHead @__ctrl;

            @__ctrl = <span class="kwrd">new</span> global::System.Web.UI.HtmlControls.HtmlHead(<span class="str">&quot;head&quot;</span>);

            global::System.Web.UI.HtmlControls.HtmlTitle @__ctrl1;

            @__ctrl1 = <span class="kwrd">this</span>.@__BuildControl__control3();

            System.Web.UI.IParserAccessor @__parser =
               ((System.Web.UI.IParserAccessor)(@__ctrl));

            @__parser.AddParsedSubObject(@__ctrl1);

            <span class="kwrd">return</span> @__ctrl;
        }

        <span class="kwrd">private</span> global::System.Web.UI.WebControls.Label @__BuildControlLabel1() {
            global::System.Web.UI.WebControls.Label @__ctrl;

            @__ctrl = <span class="kwrd">new</span> global::System.Web.UI.WebControls.Label();

            <span class="kwrd">this</span>.Label1 = @__ctrl;
            @__ctrl.ApplyStyleSheetSkin(<span class="kwrd">this</span>);

            @__ctrl.ID = <span class="str">&quot;Label1&quot;</span>;

            <span class="preproc">#line</span> <span class="kwrd">default</span>
            <span class="preproc">#line</span> hidden
            <span class="kwrd">return</span> @__ctrl;
        }

        <span class="kwrd">private</span> global::System.Web.UI.WebControls.Label @__BuildControlLabel2() {
            global::System.Web.UI.WebControls.Label @__ctrl;

            @__ctrl = <span class="kwrd">new</span> global::System.Web.UI.WebControls.Label();

            <span class="kwrd">this</span>.Label2 = @__ctrl;
            @__ctrl.ApplyStyleSheetSkin(<span class="kwrd">this</span>);

            @__ctrl.ID = <span class="str">&quot;Label2&quot;</span>;

            @__ctrl.DataBinding += <span class="kwrd">new</span> System.EventHandler(<span class="kwrd">this</span>.@__DataBindingLabel2);

            <span class="preproc">#line</span> <span class="kwrd">default</span>
            <span class="preproc">#line</span> hidden
            <span class="kwrd">return</span> @__ctrl;
        }

        <span class="kwrd">public</span> <span class="kwrd">void</span> @__DataBindingLabel2(<span class="kwrd">object</span> sender, System.EventArgs e) {
            System.Web.UI.WebControls.Label dataBindingExpressionBuilderTarget;
            System.Web.UI.Page Container;
            dataBindingExpressionBuilderTarget =
            ((System.Web.UI.WebControls.Label)(sender));
            Container =
            ((System.Web.UI.Page)(dataBindingExpressionBuilderTarget.BindingContainer));

            dataBindingExpressionBuilderTarget.Text =
            System.Convert.ToString( DateTime.Now.ToLongTimeString() ,
             System.Globalization.CultureInfo.CurrentCulture);

        }

        <span class="kwrd">private</span> global::System.Web.UI.WebControls.Label @__BuildControlLabel3() {
            global::System.Web.UI.WebControls.Label @__ctrl;

            @__ctrl = <span class="kwrd">new</span> global::System.Web.UI.WebControls.Label();

            <span class="kwrd">this</span>.Label3 = @__ctrl;
            @__ctrl.ApplyStyleSheetSkin(<span class="kwrd">this</span>);

            @__ctrl.ID = <span class="str">&quot;Label3&quot;</span>;

            @__ctrl.Text = <span class="str">&quot;Label&quot;</span>;

            <span class="preproc">#line</span> <span class="kwrd">default</span>
            <span class="preproc">#line</span> hidden
            <span class="kwrd">return</span> @__ctrl;
        }

        <span class="kwrd">private</span> global::System.Web.UI.WebControls.Button @__BuildControlButton1() {
            global::System.Web.UI.WebControls.Button @__ctrl;

            @__ctrl = <span class="kwrd">new</span> global::System.Web.UI.WebControls.Button();

            <span class="kwrd">this</span>.Button1 = @__ctrl;
            @__ctrl.ApplyStyleSheetSkin(<span class="kwrd">this</span>);

            @__ctrl.ID = <span class="str">&quot;Button1&quot;</span>;

            @__ctrl.Text = <span class="str">&quot;Button&quot;</span>;

            <span class="preproc">#line</span> <span class="kwrd">default</span>
            <span class="preproc">#line</span> hidden

            @__ctrl.Click += <span class="kwrd">new</span> System.EventHandler(<span class="kwrd">this</span>.Button1_Click);

            <span class="kwrd">return</span> @__ctrl;
        }

        <span class="kwrd">private</span> global::System.Web.UI.HtmlControls.HtmlForm @__BuildControlform1() {
            global::System.Web.UI.HtmlControls.HtmlForm @__ctrl;

            @__ctrl = <span class="kwrd">new</span> global::System.Web.UI.HtmlControls.HtmlForm();

            <span class="kwrd">this</span>.form1 = @__ctrl;

            @__ctrl.ID = <span class="str">&quot;form1&quot;</span>;

            System.Web.UI.IParserAccessor @__parser =
            ((System.Web.UI.IParserAccessor)(@__ctrl));

            @__parser.AddParsedSubObject(<span class="kwrd">new</span> System.Web.UI.LiteralControl(<span class="str">&quot;\r\n    &lt;div&gt;\r\n    &quot;</span>));

            global::System.Web.UI.WebControls.Label @__ctrl1;

            @__ctrl1 = <span class="kwrd">this</span>.@__BuildControlLabel1();

            @__parser.AddParsedSubObject(@__ctrl1);

            @__parser.AddParsedSubObject(<span class="kwrd">new</span> System.Web.UI.LiteralControl(<span class="str">&quot;\r\n        &quot;</span>));

            global::System.Web.UI.WebControls.Label @__ctrl2;

            @__ctrl2 = <span class="kwrd">this</span>.@__BuildControlLabel2();

            @__parser.AddParsedSubObject(@__ctrl2);

            @__parser.AddParsedSubObject(<span class="kwrd">new</span> System.Web.UI.LiteralControl(<span class="str">&quot;\r\n        &quot;</span>));

            global::System.Web.UI.WebControls.Label @__ctrl3;

            @__ctrl3 = <span class="kwrd">this</span>.@__BuildControlLabel3();

            @__parser.AddParsedSubObject(@__ctrl3);

            <span class="preproc">#line</span> <span class="kwrd">default</span>
            <span class="preproc">#line</span> hidden

            @__parser.AddParsedSubObject(<span class="kwrd">new</span> System.Web.UI.LiteralControl(<span class="str">&quot;\r\n        &quot;</span>));

            global::System.Web.UI.WebControls.Button @__ctrl4;

            @__ctrl4 = <span class="kwrd">this</span>.@__BuildControlButton1();

            <span class="preproc">#line</span> <span class="kwrd">default</span>
            <span class="preproc">#line</span> hidden

            @__parser.AddParsedSubObject(@__ctrl4);

            <span class="preproc">#line</span> <span class="kwrd">default</span>
            <span class="preproc">#line</span> hidden

            @__parser.AddParsedSubObject(<span class="kwrd">new</span> System.Web.UI.LiteralControl(<span class="str">&quot;\r\n       \r\n    &lt;/div&gt;\r\n    &quot;</span>));

            <span class="preproc">#line</span> <span class="kwrd">default</span>
            <span class="preproc">#line</span> hidden
            <span class="kwrd">return</span> @__ctrl;
        }

        <span class="kwrd">private</span> <span class="kwrd">void</span> @__BuildControlTree(codebehindsample1_aspx @__ctrl) {

            <span class="kwrd">this</span>.InitializeCulture();

            System.Web.UI.IParserAccessor @__parser = ((System.Web.UI.IParserAccessor)(@__ctrl));

            @__parser.AddParsedSubObject(<span class="kwrd">new</span> System.Web.UI.LiteralControl
            (<span class="str">&quot;\r\n\r\n&lt; !DOCTYPE html
            PUBLIC \&quot;-//W3C//DTD XHTML 1.0 Transitional//EN\&quot;
             \&quot;http://www.w3&quot;</span> +
                        <span class="str">&quot;.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\&quot;&gt;
                        \r\n\r\n&lt;html xmlns=\&quot;http://www.w3.org/1&quot;</span> +
                        <span class="str">&quot;999/xhtml\&quot; &gt;\r\n&quot;</span>));

            global::System.Web.UI.HtmlControls.HtmlHead @__ctrl1;

            @__ctrl1 = <span class="kwrd">this</span>.@__BuildControl__control2();

            <span class="preproc">#line</span> <span class="kwrd">default</span>
            <span class="preproc">#line</span> hidden

            @__parser.AddParsedSubObject(@__ctrl1);

            @__parser.AddParsedSubObject(<span class="kwrd">new</span> System.Web.UI.LiteralControl(<span class="str">&quot;\r\n&lt;body&gt;\r\n    &quot;</span>));

            global::System.Web.UI.HtmlControls.HtmlForm @__ctrl2;

            @__ctrl2 = <span class="kwrd">this</span>.@__BuildControlform1();

            @__parser.AddParsedSubObject(@__ctrl2);

            @__parser.AddParsedSubObject(<span class="kwrd">new</span> System.Web.UI.LiteralControl(<span class="str">&quot;\r\n&lt;/body&gt;\r\n&lt;/html&gt;\r\n&quot;</span>));

        }

        <span class="kwrd">protected</span> <span class="kwrd">override</span> <span class="kwrd">void</span> FrameworkInitialize() {
            <span class="kwrd">base</span>.FrameworkInitialize();
            <span class="kwrd">this</span>.@__BuildControlTree(<span class="kwrd">this</span>);
            <span class="kwrd">this</span>.AddWrappedFileDependencies(global::ASP.codebehindsample1_aspx.@__fileDependencies);
            <span class="kwrd">this</span>.Request.ValidateInput();
        }

        <span class="kwrd">public</span> <span class="kwrd">override</span> <span class="kwrd">int</span> GetTypeHashCode() {
            <span class="kwrd">return</span> -956737817;
        }

        <span class="kwrd">public</span> <span class="kwrd">override</span> <span class="kwrd">void</span> ProcessRequest(System.Web.HttpContext context) {
            <span class="kwrd">base</span>.ProcessRequest(context);
        }
    }
}</pre>
<p></p>
<h2>1.cs</h2>
<p></p>
<pre class="csharpcode"><span class="kwrd">using</span> System;
<span class="kwrd">using</span> System.Data;
<span class="kwrd">using</span> System.Configuration;
<span class="kwrd">using</span> System.Collections;
<span class="kwrd">using</span> System.Web;
<span class="kwrd">using</span> System.Web.Security;
<span class="kwrd">using</span> System.Web.UI;
<span class="kwrd">using</span> System.Web.UI.WebControls;
<span class="kwrd">using</span> System.Web.UI.WebControls.WebParts;
<span class="kwrd">using</span> System.Web.UI.HtmlControls;

<span class="kwrd">public</span> <span class="kwrd">partial</span> <span class="kwrd">class</span> CodeBehindSample1 : System.Web.UI.Page
{
    <span class="kwrd">protected</span> <span class="kwrd">void</span> Page_Load(<span class="kwrd">object</span> sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToLongTimeString();
    }

    <span class="kwrd">protected</span> <span class="kwrd">void</span> Button1_Click(<span class="kwrd">object</span> sender, EventArgs e)
    {
        Label3.Text = DateTime.Now.ToLongTimeString();
        Label2.DataBind();
    }
}

<span class="preproc">#line</span> <span class="kwrd">default</span>
<span class="preproc">#line</span> hidden</pre>
]]></content:encoded>
			<wfw:commentRss>http://peterkellner.net/2006/07/12/how-things-work-aspnet-20-codebehind/feed/</wfw:commentRss>
		<slash:comments>2</slash:comments>
		</item>
	</channel>
</rss>

<!-- Performance optimized by W3 Total Cache. Learn more: http://www.w3-edge.com/wordpress-plugins/

Minified using disk: basic
Page Caching using disk: enhanced (User agent is rejected)
Database Caching 28/37 queries in 0.008 seconds using disk: basic
Content Delivery Network via Amazon Web Services: S3: PetersBlogCDN.s3.amazonaws.com

Served from: peterkellner.net @ 2012-05-22 10:20:31 -->
