假设

Question

我有一种困境，我不太确定如何克服。我不知道什么是正确的方法。我正在建立一个网站，我得到了一个模板来集成我的服务器代码。问题在于如何概述模板。让我举个例子。

<body>
    <div class="breakpoint active" id="bp_infinity" data-min-width="588">
        <div id="header">full page header content</div>
        <div id="body">some stuff</div>
        <div id="footer">some stuff</div>
    </div>
    <div class="breakpoint" id="bp_587" data-min-width="493" data-max-width="587">
        <div id="header">mobile header content</div>
        <div id="body">some stuff</div>
        <div id="footer">some stuff</div>
    </div>
    <div class="breakpoint" id="bp_492" data-max-width="492">
        <div id="header">mobile header content</div>
        <div id="body">some stuff</div>
        <div id="footer">some stuff</div>
    </div>
</body>

我试图以不重复公共代码的方式设置我的MVC5视图。我面临的问题是页眉和页脚div是页面之间的公共代码，并且正文发生了变化。第二个问题是每个页面具有不同数量的断点。这是显示我的意思的第二页：

<body>
    <div class="breakpoint active" id="bp_infinity" data-min-width="588">
        <div id="header">full page header content</div>
        <div id="body">some stuff</div>
        <div id="footer">some stuff</div>
    </div>
    <div class="breakpoint" id="bp_587" data-max-width="587">
        <div id="header">mobile header content</div>
        <div id="body">some stuff</div>
        <div id="footer">some stuff</div>
    </div>
</body>

所以布局页面现在设置起来很棘手，因为我不能说：

<body>
    @RenderBody
</body>

我想到的一个解决方案是使用Sections，类似这样：

<body>
    @RenderBody
    @RenderSection("Breakpoint-1", false)
    @RenderSection("Breakpoint-2", false)
    @RenderSection("Breakpoint-3", false)
</body>

现在每个页面都是：

@section Breakpoint-1
{
    <div class="breakpoint active" id="bp_infinity" data-min-width="588">
        @{ Html.RenderPartial("full-page-header"); }
        @{ Html.RenderPartial("full-page-body"); }
        @{ Html.RenderPartial("full-page-footer"); }
    </div>
}
@section Breakpoint-2
{
    <div class="breakpoint" id="bp_587" data-max-width="587">
        @{ Html.RenderPartial("mobile-page-header"); }
        @{ Html.RenderPartial("mobile-page-body"); }
        @{ Html.RenderPartial("mobile-page-footer"); }
    </div>
}

我在上面的代码中看到的一个问题是，如果标题现在需要有5个断点而不是2个，我需要在任何地方修改它。

有更好的方法吗？我认为我的方案的最佳解决方案是什么？

编辑：澄清。 HTML中有多个brakpoints，因为它们中只有一个是活动的。当页面达到一定宽度时，1当前活动断点被隐藏，新的断点变为可见。

Answer 1

假设

......是所有人的母亲......

＆＃34;一些东西＆＃34;身体标签中的HTML是从某些数据源提供的HTML，或者是硬编码的
＆＃34; ...页眉和页脚div是页面到页面的公共代码...＆＃34;从字面上看，您根本不需要更改页眉/页脚。（你仍然可以，但我现在忽略了这一点）
div id＆＃39; s＆＃34; header＆＃34;，＆＃34; body＆＃34;，＆＃34; footer＆＃34;应该作为dom类而不是dom id处理。这是另一个讨论，但ID应始终是唯一的。

解决方案

这是一个基本的例子，还有很多其他方法可以尝试，还有很多其他的调整可以做到

<强>控制器让我们调用这个BreakpointController

public ActionResult Index()
{
  var model = new List<BreakpointViewModel>();
  // populate model
  return View(model);
}

<强>视图模型

public class BreakpointViewModel
{
    public string BreakPointId { get; set; }
    public int? MinWidth { get; set; }
    public int? MaxWidth { get; set; }
    public string Body { get; set; }
    public bool IsActive { get; set; }
}

查看这应该是您的index.cshtml（或任何您想要的名称）

@model IEnumerable<WebApplication1.Models.BreakpointViewModel> <div> <h1>A header!</h1> </div> @Html.DisplayForModel() <div> <h4>A footer!</h4> </div>

<强> DisplayTemplate *你应该住在包含控制器（或共享）视图的文件夹中 *你应该住在一个名为＆＃39; DisplayTemplates＆＃39;的子文件夹中。 *你应该被命名为{ModelName} .cshtml

最后，文件夹结构应如下所示：

Views |-- Breakpoint | |-- DisplayTemplates | | +-- BreakpointViewModel.cshtml | +-- Index.cshtml

BreakpointViewModel.cshtml 应如下所示：

@model WebApplication1.Models.BreakpointViewModel <div class="breakpoint @(Model.IsActive ? "active" : null)" id="@Model.BreakPointId" @(Model.MinWidth.HasValue ? "data-min-width='" + Model.MinWidth + "'" : null) @(Model.MaxWidth.HasValue ? "data-max-width='" + Model.MaxWidth + "'" : null)> @Html.Raw(Model.Body) </div>

注意div中的minwidth / maxwidth行。不是必需的，我个人如何处理宽度。

生成的HTML

<div> <h1>A header!</h1> </div> <div class="breakpoint active" id="bp_1" data-max-width='720'> <div>Hello World!</div> </div> <div class="breakpoint" id="bp_2" data-max-width='720'> <div>Another Breakpoint</div> </div> <div class="breakpoint" id="bp_3" data-max-width='720'> <div>Third Breakpoint</div> </div> <div class="breakpoint" id="bp_4" data-max-width='720'> <div>Fourth Breakpoint</div> </div> <div> <h4>A footer!</h4> </div>

原始答案

DisplayTemplates是你的朋友。如果您的部分相同，您可以将相关信息放入ViewModel，然后将List<ViewModel>传递给DisplayTemplate。然后，MVC引擎将使用DisplayTemplate为您的ViewModel填写每个部分所需的代码。

您只需要为ViewModel编写一次DisplayTemplate代码。

我目前没有任何示例代码，但如果您需要进一步的帮助，请对此进行评论，我将在周末打破一些代码。

如何使用MVC5和多个页面断点使您的视图干燥？

1 个答案:

假设

解决方案

生成的HTML

原始答案