MVC页面加载图像加载到底部[重复]答案

【问题标题】：MVC page loading with images loads to bottom [duplicate]MVC页面加载图像加载到底部[重复]
【发布时间】：2017-03-07 15:40:54
【问题描述】：

我正在使用带有 C# 和 MVC 的 Visual Studio 2015。我已经使用Vanilla Lazyloading 例程实现了延迟加载。效果很好。

我遇到的问题是页面在 MVC 中的行为与 HTML 文件中的同一页面的行为方式不同。当它是 MVC 应用程序的一部分时，它的页面在 Chrome 和 IE 中加载到底部，并刚好超过 Firefox 中的第一行照片。当我获取生成的源代码并将其放入 HTML 文件中时，无论浏览器如何，它都会停留在顶部。

MVC 视图（忽略模型，因为我已经注释掉了我的代码并为此目的对照片加载进行了硬编码）

@model IEnumerable<MyApp.Models.PictureMin>

<img data-original="/Content/Images/photos/1_thumbnail.jpg" width="400" height="400">
<img data-original="/Content/Images/photos/2_thumbnail.jpg" width="400" height="400">
<img data-original="/Content/Images/photos/3_thumbnail.jpg" width="400" height="400">
<img data-original="/Content/Images/photos/4_thumbnail.jpg" width="400" height="400">
<img data-original="/Content/Images/photos/5_thumbnail.jpg" width="400" height="400">
<img data-original="/Content/Images/photos/6_thumbnail.jpg" width="400" height="400">
<img data-original="/Content/Images/photos/7_thumbnail.jpg" width="400" height="400">
<img data-original="/Content/Images/photos/8_thumbnail.jpg" width="400" height="400">

<script src="~/Scripts/lazyload.min.js"></script>
<script>
    var myLazyLoad = new LazyLoad({
        threshold: 50
    });
</script>

此视图使用以下 HTML 代码生成，如果我单独保存并运行这些代码（并调整路径以加载图像和 javascript），加载就像它应该的那样，停留在页面顶部而不是底部：

<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> - My App</title>
    <link href="Content/bootstrap-green.css" rel="stylesheet"/>
    <link href="Content/site.css" rel="stylesheet"/>
    <link href="Content/lightbox.css" rel="stylesheet"/>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="/"> Database</a>
        </div>
        <div class="navbar-collapse collapse">
            <ul class="nav navbar-nav">

                <li><a href="/">Home</a></li>
                <li><a href="/Home/About">About</a></li>
                <li><a href="/Item1">Item 1</a></li>
                <li><a href="/Item2">Item 2 List</a></li>
                <li><a href="/Photo">Photographs</a></li>
                <li><a href="/Item 4">Item 4</a></li>
            </ul>
        </div>
    </div>
</div>
<div class="container-fluid body-content">



<img data-original="Content/Images/photos/1_thumbnail.jpg" width="400" height="400">
<img data-original="Content/Images/photos/2_thumbnail.jpg" width="400" height="400">
<img data-original="Content/Images/photos/3_thumbnail.jpg" width="400" height="400">
<img data-original="Content/Images/photos/4_thumbnail.jpg" width="400" height="400">
<img data-original="Content/Images/photos/5_thumbnail.jpg" width="400" height="400">
<img data-original="Content/Images/photos/6_thumbnail.jpg" width="400" height="400">
<img data-original="Content/Images/photos/7_thumbnail.jpg" width="400" height="400">
<img data-original="Content/Images/photos/8_thumbnail.jpg" width="400" height="400">
<script src="Scripts/lazyload.min.js"></script>
<script>
    var myLazyLoad = new LazyLoad({
        threshold: 50,
    });
</script>

    <hr />
    <footer>
        <p>&copy; 2017 </p>
    </footer>
</div>

<script src="Scripts/jquery-3.1.1.js"></script>
<script src="Scripts/modernizr-2.8.3.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/respond.js"></script>
<script src="Scripts/lightbox.min.js"></script>




<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"e15b189278d8494e962f117ad56c415f"}
</script>
<script type="text/javascript" src="http://localhost:51950/66a9aeb429bb43b9951e62c2ce437bf0/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

有人能告诉我是什么让 MVC 应用页面显示在底部以及如何更正吗？

【问题讨论】：

如果您有 Web Essentials 扩展程序，您可能需要检查一下：stackoverflow.com/q/42651346/4305494
就是这样！在 VS 2015 中，我将其关闭，问题就消失了。另外，我刚刚安装了VS 2017，启用了浏览器链接，问题不存在。用 cmets 解决这个问题的正确方法是什么？另外，我很惊讶我没有找到你提供的链接，Ricky，因为我总是在发布之前搜索。
别担心，我也很难找到与该问题相关的任何内容。当我到达办公室时，我会将您的问题标记为重复，最终人们会投票关闭它。干杯。
我还在那个问题中包含了一个答案，如果它更适合您，则不涉及更改 Web.config。
这不是一个非常复杂的 mvc 应用程序，而且我是一名独立开发人员，因此切换到 VS 2017 相当容易。至少 Chrome 和 FF 解决了这个问题。如果我需要切换回 VS 2015，我会听取您的建议。

标签： javascript c# html asp.net-mvc visual-studio-2015

【解决方案1】：

您的Layout 文件调用了RenderBody，它将您的View 文件的内容呈现在该空间中，您的视图文件不会向布局表明您的<script> 代码应该被加载在其他脚本之后：https://weblogs.asp.net/scottgu/asp-net-mvc-3-layouts-and-sections-with-razor

这就是 Razor 布局文件中使用的“部分”（在 WebForms 中这些被称为 <asp:ContentPlaceholder /> 元素）。

在您的布局中，使用@RenderSection() 指定单独内容的位置，并在您的View 中使用@section {} 指定该部分的内容。

...像这样：

@model IEnumerable<MyApp.Models.PictureMin>

<img data-original="/Content/Images/photos/1_thumbnail.jpg" width="400" height="400">
<img data-original="/Content/Images/photos/2_thumbnail.jpg" width="400" height="400">
...

@section Scripts {

<script src="~/Scripts/lazyload.min.js"></script>
<script>
    var myLazyLoad = new LazyLoad({
        threshold: 50
    });
</script>

}

在你的布局中：

...

@RenderBody()

<script src="Scripts/jquery-3.1.1.js"></script>
<script src="Scripts/modernizr-2.8.3.js"></script>
<script src="Scripts/bootstrap.js"></script>
<script src="Scripts/respond.js"></script>
<script src="Scripts/lightbox.min.js"></script>

@RenderSection("Scripts")

</body>
</html>

【讨论】：

感谢您的评论。我学到了一些东西，并将您的建议添加到布局和视图中。半不幸的是，这并没有什么不同。我说“半”是因为当我将它上传到 IIS 时，页面呈现正确，所以本地网络服务器与 IIS 一定有些奇怪。