Static layout, but content is derived from different files

StackOverflow https://stackoverflow.com/questions/20447235

  •  30-08-2022
  •  | 
  •  

Question

In my website I have (for the sake of the example) 3 divs. the layout always stays the same, but the content of each div is derived every time from a different file.

as you can see in the picture below: (every small square is a different file) My basic layout

so, in my first div there could be one of three possible files: red.html, yellow.html, and green.html.

and so on for the rest of the divs accordingly.

How can I create this layout, without having to copy the entire code for all possible combinations?

failed attempt: I tried to use a masterpage, but in a master page, some content always stays static. in my example, all the content on the page changes, with no regards to the other divs.

How can I create a layout to which I can just say:

for div1 use yellow.html
for div2 use orange.html
and for div 3 use grey.html

If I fail to explain myself fully, please drop a comment and i'll edit the post.

I am really struggling here :\

Thanks everyone!

EDIT:

I'll add sample code of using masterpages to illustrate my problem

this is my master page. it has 2 divs. one is floated left, and the other is floated right.

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div style="width:50%;float:left;">
        <asp:ContentPlaceHolder id="CPHL" runat="server">
        </asp:ContentPlaceHolder>
    </div>
        <div style="width:50%;float:right;">
        <asp:ContentPlaceHolder id="CPHR" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

here is a webform for the left side:

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>


<asp:Content ID="Content2" ContentPlaceHolderID="CPHL" Runat="Server">
    This is the left side
</asp:Content>

here if a webform for my right side:

<%@ Page Title="" Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="Default2.aspx.vb" Inherits="_Default2" %>


<asp:Content ID="Content2" ContentPlaceHolderID="CPHR" Runat="Server">
    This is the Right side
</asp:Content>

if I open the first file, I'll only see the left side, if I open the second file, I'll only see the right side.

obviously, this is not the way to go.

I can instead create a nested masterpage that displays the left side automatically and then have the second file (that displays the right side) to display both sides using the master page but, then I would not be able to change the left side without creating a new master page.

the solution I'm looking for is something like this: 

<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <div style="width:50%;float:left;">
            <asp:ContentPlaceHolder id="CPHL" runat="server">
here I decide which file I want to include

        </asp:ContentPlaceHolder>
    </div>
        <div style="width:50%;float:right;">
        <asp:ContentPlaceHolder id="CPHR" runat="server">
here I decide which file I want to include

        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

so it's a strategy of top down instead of bottom up.

so I could say in the main file: for the left side include anyfile_no312.html

and in the right side include anyfile_no_839.html

and I would be able to change the content of the separate divs independently.

in classic asp I could have a file like this:

<div id="container">

        <!--#include file="header.asp"-->

        <div id="main">
                <!--#include file="Story.asp"-->
            <div id="sidebar">
                <!--#include file="quicklinks.asp"-->
                <!--#include file="Menu2.asp"-->
            </div>
        </div>
        <div id="footer">
            <!--#include file="footer.asp"-->
        </div>

in this case I can specifically add more menus to a certain page, or remove the footer from a certain page and so on. it allows me to easily edit the content of the page without having to create tons of possibilities.

how can I translate this classic asp example to asp.net working code?

Was it helpful?

Solution

Wrap up your colour-coded files in user controls and use content placeholders:

Master page:

<asp:ContentPlaceHolder id="Div1" runat="server">
    <p>Some optional default content</p>
</asp:ContentPlaceHolder>

ASPX page:

<asp:Content ContentPlaceHolderId="Div1" runat="server">
    <MyPrefix:MyControl runat="server" />
</asp:Content>

To explain further:

You would have one master page with three content placeholders:

<asp:ContentPlaceHolder id="Div1" runat="server"></asp:ContentPlaceHolder>

<asp:ContentPlaceHolder id="Div2" runat="server"></asp:ContentPlaceHolder>

<asp:ContentPlaceHolder id="Div3" runat="server"></asp:ContentPlaceHolder>

Then, you would have a user control for each of your colours. Now, suppose you want Red, Orange and Purple. Create a page that looks like this:

<asp:Content ContentPlaceHolderId="Div1" runat="server">
    <Colours:Red runat="server" />
</asp:Content>

<asp:Content ContentPlaceHolderId="Div2" runat="server">
    <Colours:Orange runat="server" />
</asp:Content>

<asp:Content ContentPlaceHolderId="Div3" runat="server">
    <Colours:Purple runat="server" />
</asp:Content>

You can just create pages like the above that have whatever combination of "colours" you need.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top