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

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 视图。我面临的问题是 header 和页脚 div 是页面之间的通用代码，而 body 发生了变化。第二个问题是每个页面都有不同数量的断点。这是第二页来说明我的意思：

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

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

有更好的方法吗？我认为最适合我的场景的解决方案是什么？

编辑：澄清一下。 HTML 中有多个断点，因为一次只有其中一个处于活动状态。当页面达到一定宽度时，1 当前活动断点隐藏，新断点可见。

Answer 1

假设

...都是万物之母....

"some stuff" 是 HTML 从某些数据源提供的，或者是硬编码的
“...页眉和页脚 div 是页面之间的通用代码...”的意思是，从字面上看，您根本不需要更改 header/footer。（你仍然可以，但我暂时忽略它）
div id 的 "header"、"body"、"footer" 应该被处理为 dom 类而不是 dom编号。那是另一个讨论，但 ID 应该始终是唯一的。

解决方案

这是一个基本示例，还有许多其他方法可供尝试，您还可以进行许多其他调整

控制器 我们称这个为 BreakpointController

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

ViewModel

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>

显示模板 * 你应该住在包含控制器（或共享）视图的文件夹中 * 你应该住在一个名为 'DisplayTemplates' 的子文件夹中 * 你应该被命名为 {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=&#39;720&#39;>
    <div>Hello World!</div>
</div>

<div class="breakpoint"
        id="bp_2"
        data-max-width=&#39;720&#39;>
    <div>Another Breakpoint</div>
</div>

<div class="breakpoint"
        id="bp_3"
        data-max-width=&#39;720&#39;>
    <div>Third Breakpoint</div>
</div>

<div class="breakpoint"
        id="bp_4"
        data-max-width=&#39;720&#39;>
    <div>Fourth Breakpoint</div>
</div>

<div>
    <h4>A footer!</h4>
</div>

原答案

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

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

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

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

How to make your views DRY with MVC5 and multiple page breakpoints?

asp.net

asp.net-mvc

razor

razor-2

asp.net-mvc-5

假设

解决方案

结果HTML

原答案