Question

在我的网站上，我（为了示例）有3个div。布局始终保持不变，但每次div的内容都是从不同的文件中导出的。

如下图所示:(每个小方块都是不同的文件） My basic layout

所以，在我的第一个div中，可能有三个可能的文件之一：red.html，yellow.html和green.html。

其他div的

等等。

如何创建此布局，而无需为所有可能的组合复制整个代码？

尝试失败：我尝试使用母版页，但在母版页中，某些内容始终保持静态。在我的示例中，页面上的所有内容都发生了变化，而不考虑其他div。

我如何创建一个我可以说的布局：

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

如果我没有完全解释自己，请发表评论我会编辑帖子。

我真的在这里苦苦挣扎：\

谢谢大家！

修改

我将添加使用masterpages的示例代码来说明我的问题

这是我的母版页。它有2个div。一个漂浮在左边，另一个漂浮在右边。

<%@ 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>

这是左侧的网络表单：

<%@ 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>

这里是我右侧的网络形式：

<%@ 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>

如果我打开第一个文件，我只会看到左侧，如果我打开第二个文件，我只会看到右侧。

显然，这不是可行的方法。

我可以创建一个自动显示左侧的嵌套母版页，然后使用第二个文件（显示右侧）使用母版页显示两侧但是，我将无法更改左侧无需创建新的母版页。

我正在寻找的解决方案是这样的：

<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>

所以这是一种自上而下而不是自下而上的策略。

所以我可以在主文件中说：左侧包括anyfile_no312.html

在右侧包含anyfile_no_839.html

我可以独立更改单独div的内容。

在经典的asp中我可以有这样的文件：

<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>

在这种情况下，我可以专门为某个页面添加更多菜单，或从某个页面中删除页脚等等。它允许我轻松编辑页面内容，而不必创造大量的可能性。

如何将这个经典的asp示例翻译成asp.net工作代码？

Answer 1

在用户控件中包装颜色编码文件并使用内容占位符：

母版页：

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

ASPX页面：

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

进一步解释：

您将拥有一个包含三个内容占位符的母版页：

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

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

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

然后，您将拥有每种颜色的用户控件。现在，假设您想要红色，橙色和紫色。创建一个如下所示的页面：

<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>

你可以像上面那样创建你需要的“颜色”组合的页面。

静态布局，但内容源自不同的文件

1 个答案: