Seperating content and presentation on ASPX pages
I have a question regarding segregation.
Suppose I have a website that contains static elements such as a header and a left navigation bar, and a main content div.
I'm currently making a website ( http://www.wibblegames.net )for my own to learn C#.NET and ASP.NET, and I guess one of the things I did not plan very well is the architecture itself. The site idea is very simple, I want to create a page with 4-5 "sections", or major topics, like you would see in any other site. While navigating across the sections, the header and left navigation bar will essentially remain static, so the only major change is the content area.
Because of scalability reasons, and the fact that I don't want to edit the same page over and over again, I managed to generate the HTML links for both the headers and left navigation bar by reading from an XML file to obtain all the necessary anchor reference parameters.
Now that I have that completed, I want to take it further and essentially consolidate all those 9-10 pages I have into one .aspx page, and the only difference between those pages is what I display in the content div or table.
So my question is this:
What is the best way to seperate the content and to display it? Currently the content does include HTML with CSS references for style such as :
Code:
<p class="subheader">This is my subheader</p>
<p class="content">Blah blah general content and chatter</p>
...
Feel free to go to http://www.wibblegames.net to look at the source, or if you need the code-behind to anything, just post on this thread.
What I basically want is that by clicking on the different links, the content changes accordingnly.
I have a couple ideas (and concerns):
Plan A:
As with the links, generate the content entirely using by reading from an XML document like I did with the links. Change the navigation links so it passes a parameter such as the content page name, and on page load, it reads off this page name, which determines which XML file to read via XMLDocument / XPath.
Concern: I need to also place, or be able to place HTML in this document, and from my understanding, XML behaves oddly when you have open "<" chars embedded, so I think simply entering something like
Code:
<DisplayAllOfThis>
.... enter all content including HTML here ...
</DisplayAllOfThis>
won't work because it may treat the HTML code as actual elements...
Plan B:
Write all the content in its own .htm file and reference it by placing the content in an iFrame src="somePage.html" where somePage.htm is determined dynamically depending on the link the user clicks on.
Concern: Every time I put something in an iFrame, it doesn't seem to reference the CSS of the "parent" page, so it does not seem to be as simple as "display all the HTML verbatim" in this field. Also, the width and height remains fixed, but I my page to extend itself vertically as if I simply typed HTML in it.
I'm sure there's no "right" way to do this, but any preference on how to approach this? I'm a bit clueless to how to do approach this.
