从 aspx 重构为 cshtml (Razor) 时的列问题答案

【问题标题】：Column issue when refactoring from aspx to cshtml (Razor)从 aspx 重构为 cshtml (Razor) 时的列问题
【发布时间】：2017-03-11 10:10:09
【问题描述】：

我正在将我的网站从 aspx 转换为 cshtml (Razor)。除了我的 2 或 3 列母版页存在问题并尝试将它们转换为 cshtml 布局页面之外，这一切正常。

在 Razor 中，我基本上为我的所有部分创建了单独的页面，然后使用 @RenderPage 从布局页面调用这些页面。也许这本身就是错误的？基本上，除了主要内容部分之外，所有部分都显示得很好，主要内容部分基本上是我希望在其中显示的 3（或 2）列的包装。我尝试了各种方法来做到这一点，但要么只是让 1 个主列显示在页面的宽度上，要么让列显示在彼此上方，但其他 2 个的格式不正确。我知道所有的 CSS 等在 aspx 中都可以正常工作，但我显然在 Razor 中做错了。

CSHTML 新布局页面

<body>
    <div id="container">
        <div id="top">
            @RenderPage("~/Views/Shared/_Top.cshtml")
        </div>
        <div id="header">
            @RenderPage("~/Views/Shared/_Header.cshtml")
        </div>
        <div id="nav">
            @RenderPage("~/Views/Shared/_Nav.cshtml")
        </div>

        <div class="main">
            @RenderPage("~/Views/Shared/_Main.cshtml")

            <div class="columnVerySmall">
                @RenderPage("~/Views/Shared/_ColumnVerySmall.cshtml", false)
            </div>

            <div id="columnLarge">
                @RenderBody()
            </div>

            <div id="columnSmall">
                @RenderPage("~/Views/Shared/_ColumnSmall.cshtml", false)
            </div>
        </div>

        <div id="footer">
            @RenderPage("~/Views/Shared/_Footer.cshtml")
        </div>

        <div id="scripts">
            @RenderPage("~/Views/Shared/_Scripts.cshtml")
        </div>
    </div>
</body>

旧的 ASPX 母版页：

<div class="main">
<main role ="main" class="mainWrapper">
        <div class="columnVerySmall">
            <asp:ContentPlaceHolder ID="columnVerySmallContent" runat="server"></asp:ContentPlaceHolder>
        </div>
        <div class="columnLarge">
            <asp:ContentPlaceHolder ID="columnLargeContent" runat="server"></asp:ContentPlaceHolder>
        </div>                       
        <div class="columnSmall">
            <asp:ContentPlaceHolder ID="columnSmallContent" runat="server"></asp:ContentPlaceHolder>
        </div>
</main>
</div>

【问题讨论】：

标签： asp.net-mvc razor

【解决方案1】：

我已经设法通过更改 Main 部分来解决这个问题，如下面的代码块所示。我基本上将“主要”代码添加到我的布局中，然后为列添加 @Render。我真的不知道如何通过为“Main”设置一个单独的页面，然后像我最初尝试的那样使用 @RenderPage 从布局页面调用它来做到这一点。这是我改变的：

    <div class="main">
        <main role="main" class="mainWrapper">
            <div class="columnVerySmall">
                @RenderPage("_ColumnVerySmall.cshtml")                  
            </div>
            <div class="columnLarge">
                @RenderBody()
            </div>
            <div class="columnSmall">
                @RenderPage("_ColumnSmall.cshtml")
            </div>
        </main>
    </div>

【讨论】：