javascript - ASP.NET MVC - 不时重新加载特定页面,而无需重新加载 _Layout 页面

标签 javascript jquery asp.net-mvc

我有一个图表不断从用户那里获取输入数据,所以我只需要重新加载此页面即可不时显示新信息。问题是,当使用 setTimeOut 时,系统会重新加载整个页面,包括 _Layout,这是主页面,其中有一个侧栏。

_布局

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="RVE Online">

    <body>
    <div class="page-wrapper chiller-theme toggled">
        <a id="show-sidebar" class="btn btn-sm btn-dark" href="#">
            <i class="fas fa-bars"></i>
        </a>
        <nav class="navbar navbar-light fixed-top  flex-md-nowrap p-0 shadow" style="background-color: #dadbed;">
            <a class="navbar-brand   " href="#"> </a>

            <ul class="navbar-nav px-3">
                <li class="nav-item text-nowrap">
                </li>
            </ul>
        </nav>
        <nav id="sidebar" class="sidebar-wrapper">
            <div class="sidebar-content">
                <div class="sidebar-brand text-center">
                    <a href="#"></a>
                    <div id="close-sidebar">
                        <i class="fas fa-times"></i>
                    </div>
                </div>              
                <!-- sidebar-header  -->
                <!-- sidebar-search  -->
                <div class="sidebar-menu">
                    <ul>
                        <li class="header-menu">
                            <span>Painel Operacional</span>
                        </li>
                        @if (User.IsInRole("Administrator"))
                        {
                            <li class="sidebar-dropdown">
                                <a href="#">
                                    <i class="fa fa-users"></i>
                                    <span>Usuários</span>
                                </a>

                                <div class="sidebar-submenu">
                                    <ul>
                                        <li>
                                            <a href="@Url.Action("Index", "AdminUser")" onclick="trytoredirect()">
                                                Listagem
                                                <span class="badge badge-pill badge-success">Pro</span>
                                            </a>
                                        </li>
                                        <li>
                                            <a href="@Url.Action("ViewAllRoles", "AdminUser")" onclick="trytoredirect()">
                                                Editar perfils
                                                <span class="badge badge-pill badge-success">Pro</span>
                                            </a>
                                        </li>
                                    </ul>
                                </div>

                            </li>
                        }
                        @if (User.IsInRole("Administrator") || (User.IsInRole("OLNF")) || (User.IsInRole("OLS")))
                        {
                            <li class="sidebar-dropdown">
                                <a href="#">
                                    <i class="fa fa-ship"></i>
                                    <span>Embarcações</span>
                                </a>
                                <div class="sidebar-submenu">
                                    <ul>
                                        <li>
                                            <a href="@Url.Action("Index", "Barcos")" onclick="trytoredirect()">
                                                Listagem

                                            </a>
                                        </li>
                                        <li>
                                            <a href="@Url.Action("ListarEstoque","Barcos")">Consultar Estoque</a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                        }

                <!-- sidebar-menu  -->
            </div>
            <!-- sidebar-content  -->

        </nav>
        <!-- sidebar-wrapper  -->
        <main class="page-content">
            <div class="container-fluid">
                @RenderBody()

            </div>
        </main>
        @Html.Partial("_Footer")
    </div>
    <!-- page-wrapper -->

    @Scripts.Render("~/bundles/bootstrap")
    @Scripts.Render("~/bundles/LayoutPage")
    @Scripts.Render("~/bundles/Canvas")
    <script src=" @Url.Content("~/scripts/sistema.js")"></script>

    @RenderSection("scripts", false)


    <div id="modalContainer">
    </div>

</body>
</html>

我的想法是时不时地调用 Controller ,类似的东西......

 <script type="text/javascript">
    $(doument).ready(function(){
       setTimeout(function () {
            window.location.reload(1);}, 10000)
            .load("@Url.Action("Index", "Home")");  
        });
    });
   //i know the code is wrong, just a idea
</script>

我的主页 View

<div class="container">
    <div id="chartContainer" style="height: 400px;"></div>
</div>

<script>
window.onload = function () {
    var timeInMs = Date.now();

var chart = new CanvasJS.Chart("chartContainer", {
    theme: "light2", // "light1", "light2", "dark1", "dark2"
    exportEnabled: true,
    animationEnabled: true,

    title: {
        text: "Relação de Apontamentos x Códigos Operacionais " + " na data de "+ CanvasJS.formatDate(new Date(timeInMs)),
        fontSize: 21

    },
    verticalAlign: "center",
    horizontalAlign: "center",
    width:1100,
    data: [{
        type: "pie",
        startAngle: 160,
        toolTipContent: "<b>{label}</b>: {y}%",
        indexLabel: "{label} - {y}%",
        dataPoints: @Html.Raw(ViewBag.DataPoints)
    }]
});
chart.render();

        }

        $(document).ready(function () {
            setTimeout(function () {
                window.location.reload(1);
            }, 10000); 
        });
</script>

我目前在索引页面上有这个脚本,但正如我所说,它会重新加载 _Layout 页面,因为我会不时自己加载此页面。

最佳答案

您想重新加载页面的特定部分吗?我建议查看这个函数,因为您似乎正在使用 jQuery: .load() .

这是此问题的另一个答案 Refresh Part of Page

关于javascript - ASP.NET MVC - 不时重新加载特定页面,而无需重新加载 _Layout 页面,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57367471/

相关文章:

javascript - 如何将输入文件参数从html页面传递给Javascript

javascript - 打破经典的 ASP 页面

javascript - 退出全屏不起作用?

.net - 可以在 ASP.NET MVC 中的 ValidationAttribute 中访问 HttpContext 吗?

javascript - 在谷歌地图反向地理编码中获取明确的城市名称

javascript - 使用 Angular 形式将元素值形成为 JSON

javascript - 具有重复背景的自定义高亮文本

javascript - 将 Jquery 对象数组传递到 php 数组

javascript - 如何使用 Razor 检查是否在 View 页面中选中了复选框,如果选中则显示文本框

c# - MVC - 并行任务中的 System.Threading.ThreadAbortException