Question

我有一个带有div的剃刀视图网页，我以某种方式（延迟加载或循环无关紧要）将数据填充到其中。

如果我不使用布局，即IE：

@{
    Layout = "_Layout";
}

然后div将使用我配置的高度，并在需要时显示滚动条（使用overflow: auto）

但是，当我添加一个布局时，即使是一个空的布局，我似乎都无法修改div的高度，这会使它把所有屏幕从布局移到底部，并且没有滚动

什么使我无法改变身高？

（{div我正在将数据加载到div ID container中）

index.cshtml：

@{
    Layout = "_Layout";
}

<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        padding: 5px;
        text-align: center;
        width: 15%;
    }

    .Good {
        background-color: green
    }

    .Bad {
        background-color: red
    }

    #container {
        background: #eee;
    }
</style>

<head>
    <script src="/JQuery/jquery-3.3.1.min.js"></script>
</head>

<body style="overflow: hidden;">

    <div>
        <div>
            <h3 id="Progression"></h3>
        </div>
        <div id="container" style="width: 100%; height: 80%; overflow: auto;">

        </div>
        <div id="progress" style="display: none; height: 20%">
            <h4>Loading...</h4>
        </div>
    </div>
</body>

_Layout.cshtml：

<!DOCTYPE html>
<style>
    .main-header {
        background: url(/images/bg-header.png) transparent repeat-x 0 0;
    }
</style>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
</head>
<body>
    <header class="main-header" role="banner">
        <div>
            <a href="/" title="Home" rel="home">
                <img src="/images/COMPANY-logo.png" style="background-color:white;" alt="Home">
            </a>

        </div>
    </header>
<div>
    @RenderBody()
</div>
</body>
</html>

空_Layout.cshtml： （此布局也存在问题）

<!DOCTYPE html>
<style>
    .main-header {
        background: url(/images/bg-header.png) transparent repeat-x 0 0;
    }
</style>
<html>
<head>
</head>
<body>

<div>
    @RenderBody()
</div>
</body>
</html>

生成的页面（使用了空布局）：

<!DOCTYPE html>
<style>
    .main-header {
        background: url(/images/bg-header.png) transparent repeat-x 0 0;
    }
</style>
<html>
<head>
</head>
<body>

<div>

<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        padding: 5px;
        text-align: center;
        width: 15%;
    }

    .Good {
        background-color: green
    }

    .Bad {
        background-color: red
    }

    #container {
        background: #eee;
    }
</style>

<head>
    <script src="/JQuery/jquery-3.3.1.min.js"></script>
</head>

<body style="overflow: hidden;">

    <div>
        <div>
            <h3 id="Progression"></h3>
        </div>
        <div id="container" style="width: 100%; height: 80%; overflow: auto;">

        </div>
        <div id="progress" style="display: none; height: 20%">
            <h4>Loading...</h4>
        </div>
    </div>
</body>

<script>
    var pageSize = 50;
    var pageIndex = 0;
    var totalItemsDisplayed = 0;

    $(document).ready(function() {
        lazyLoadCards(0);
        $('#container').scroll(function() {
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(this).prop('scrollHeight');
            var clientHeight = $(this).prop('clientHeight');

            if (scrollTop + clientHeight === scrollHeight) {
                pageIndex++;
                lazyLoadCards(pageIndex);
            }
        });

        function lazyLoadCards(index) {
            $.ajax({
                type: 'GET',
                url: '/AllCards/OnScrollEnd',
                data: { "startIndex": index, "size": pageSize },
                dataType: 'json',
                success: function(data) {
                    if (data != null) {
                        totalItemsDisplayed += data.length;
                        for (var i = 0; i < data.length; i++) {
                            $("#container").append("<h2>" +
                                data[i].cardNumber +
                                "</h2>");
                        }

                        updateProgression();
                    }
                },
                beforeSend: function() {
                    $("#progress").show();
                },
                complete: function() {
                    $("#progress").hide();
                },
                error: function() {
                    alert("Error while retrieving data!");
                }
            });
        }

        function loadCards(index) {
            $.ajax({
                type: 'GET',
                url: '/AllCards/OnScrollEnd',
                data: { "startIndex": index, "size": pageSize },
                dataType: 'json',
                success: function(data) {
                    if (data != null) {
                        totalItemsDisplayed += data.length;
                        for (var i = 0; i < data.length; i++) {
                            $("#container").append("<h2>" +
                                data[i].cardNumber +
                                "</h2>");
                        }
                        updateProgression();
                        if (data.length > 0) {
                            loadCards(index + 1);
                        }
                    }
                },
                beforeSend: function() {
                    $("#progress").show();
                },
                complete: function() {
                    $("#progress").hide();
                },
                error: function() {
                    alert("Error while retrieving data!");
                }
            });
        }

        function updateProgression() {
            $('#Progression').text("Displaying " +  totalItemsDisplayed + " Cards out of " +  6930);
        }
    });

</script>
</div>
</body>
</html>

视觉查看当前输出和所需结果： （请注意，灰色框中的文本只是带有一些文本的元素。这就是ajax调用的作用）

添加@section和@style并删除除_Layout以外的所有人的代码后生成的代码

<!DOCTYPE html>
<html>
<head>
    <style>
        .main-header {
            background: url(/images/bg-header.png) transparent repeat-x 0 0;
        }
    </style>

    <style>
        table, th, td {
            border: 1px solid black;
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            padding: 5px;
            text-align: center;
            width: 15%;
        }

        .Good {
            background-color: green
        }

        .Bad {
            background-color: red
        }

        #container {
            background: #eee;
        }
    </style>

</head>
<body>
<header class="main-header" role="banner">
    <div>
        <a href="/" title="Home" rel="home">
            <img src="/images/COMPANY-logo.png" style="background-color:white;" alt="Home">
        </a>
    </div>
</header>
<div>

<div>
    <div>
        <h3 id="Progression"></h3>
    </div>
    <div id="container" style="width: 100%; height: 80%; overflow: visible;">

    </div>
    <div id="progress" style="display: none; height: 20%">
        <h4>Loading...</h4>
    </div>
</div>




</div>

    <script src="/JQuery/jquery-3.3.1.min.js"></script>
    <script>
    var pageSize = 50;
    var pageIndex = 0;
    var totalItemsDisplayed = 0;

    $(document).ready(function() {
        lazyLoadCards(0);
        $('#container').scroll(function() {
            var scrollTop = $(this).scrollTop();
            var scrollHeight = $(this).prop('scrollHeight');
            var clientHeight = $(this).prop('clientHeight');

            if (scrollTop + clientHeight === scrollHeight) {
                pageIndex++;
                lazyLoadCards(pageIndex);
            }
        });

        function lazyLoadCards(index) {
            $.ajax({
                type: 'GET',
                url: '/AllCards/OnScrollEnd',
                data: { "startIndex": index, "size": pageSize },
                dataType: 'json',
                success: function(data) {
                    if (data != null) {
                        totalItemsDisplayed += data.length;
                        for (var i = 0; i < data.length; i++) {
                            $("#container").append("<h2>" +
                                data[i].cardNumber +
                                "</h2>");
                        }

                        updateProgression();
                    }
                },
                beforeSend: function() {
                    $("#progress").show();
                },
                complete: function() {
                    $("#progress").hide();
                },
                error: function() {
                    alert("Error while retrieving data!");
                }
            });
        }

        function loadCards(index) {
            $.ajax({
                type: 'GET',
                url: '/AllCards/OnScrollEnd',
                data: { "startIndex": index, "size": pageSize },
                dataType: 'json',
                success: function(data) {
                    if (data != null) {
                        totalItemsDisplayed += data.length;
                        for (var i = 0; i < data.length; i++) {
                            $("#container").append("<h2>" +
                                data[i].cardNumber +
                                "</h2>");
                        }
                        updateProgression();
                        if (data.length > 0) {
                            loadCards(index + 1);
                        }
                    }
                },
                beforeSend: function() {
                    $("#progress").show();
                },
                complete: function() {
                    $("#progress").hide();
                },
                error: function() {
                    alert("Error while retrieving data!");
                }
            });
        }

        function updateProgression() {
            $('#Progression').text("Displaying " +  totalItemsDisplayed + " Cards out of " +  6930);
        }
    });

    </script>

</body>
</html>

Answer 1

您应该使用sections。部分允许您在布局上添加样式，脚本等。除了布局页面，您在任何地方都没有head和body标签。

空_Layout.cshtml：

<!DOCTYPE html>
<head>
    <style>
        .main-header {
            background: url(/images/bg-header.png) transparent repeat-x 0 0;
        }
    </style>
    @RenderSection("Styles", required: false)
</head>
    <body>
        <div>
            @RenderBody()
        </div>
        @RenderSection("Scripts", required: false)
    </body>
</html>

Index.cshtml：

@{
    Layout = "_Layout";
}
@section Styles {
<style>
    table, th, td {
        border: 1px solid black;
        border-collapse: collapse;
        width: 100%;
    }

    th, td {
        padding: 5px;
        text-align: center;
        width: 15%;
    }

    .Good {
        background-color: green
    }

    .Bad {
        background-color: red
    }

    #container {
        background: #eee;
    }
</style>
}

<div>
    <div>
        <h3 id="Progression"></h3>
    </div>
    <div id="container" style="width: 100%; height: 80%; overflow: auto;">

    </div>
    <div id="progress" style="display: none; height: 20%">
        <h4>Loading...</h4>
    </div>
</div>  
@section Scripts {
        <script src="/JQuery/jquery-3.3.1.min.js"></script>
}

更新

您需要进行以下更改：

<div id="container" style="width: 100%;height: 155px;overflow: scroll;display: block;">

除非添加position:absolute;，否则不能使用百分比表示高度。如果只需要垂直滚动条，则需要使用overflow-y:scroll;。

添加布局后无法更改div高度

1 个答案: