Question

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

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

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

@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的路径），则按照它应该加载，停留在页面顶部而不是底部：< / p>

<!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应用程序页面到底并且如何纠正它？

Answer 1

您的Layout文件呼叫RenderBody，在该空间中呈现View文件的内容，您的查看文件未向布局指明您的{{1}在其他脚本之后，应该加载代码：https://weblogs.asp.net/scottgu/asp-net-mvc-3-layouts-and-sections-with-razor

这就是Razor布局文件中使用的“部分”（在WebForms中，它们被称为<script>元素）。

在您的布局中，使用<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> }

带有图像的MVC页面加载到底部

1 个答案: