使用上次加载的PartialView刷新页面

问题描述

我正在使用ASP.NET Core。在我的页面之一中，我有一个div，可以将不同的PartialView加载到其中

<html>
<body style="background:url('/images/bg.png')">
    <div class="text-center">
        <div class="container" style="overflow-x:auto; background-color:white">
            <input type="button" class="btn btn-primary" value="Patients" onclick="LoadPartial('recipe')" />
            <input type="button" class="btn btn-primary" value="Orders" onclick="LoadPartial('orders')" />
            <input type="button" class="btn btn-primary" value="Delivered" onclick="LoadPartial('deliveries')" />
            <div id="mypage">
                <partial name="RecipeList.cshtml" />
            </div>
        </div>
        </div>
        <script>
        function LoadPartial(type) {
            var url = '@Url.Action("Recipes","Glasses")';
            if (type == 'recipe')
                url = '@Url.Action("Recipes","Glasses")';
            if (type == 'orders')
                url = '@Url.Action("Orders","Glasses")';
            if (type == 'deliveries')
                url = '@Url.Action("Deliveries","Glasses")';

            $('#mypage').load(url);
        }

        </script>
</body>

当用户首次打开此页面时，它应加载partialview，就像单击第一个按钮一样。

加载另一个partialview并单击浏览器上的“刷新”按钮时，我要刷新一个不是第一个加载的partiaview。

我该怎么办？

解决方法

单击按钮后，您可以将URL存储在localStorage中，并从$（document）.ready（）函数中获取该值，然后加载部分视图。

<body>
    <div class="text-center">
        <div class="container" style="overflow-x:auto; background-color:white">
            <input type="button" class="btn btn-primary" value="Patients" onclick="LoadPartial('recipe')" />
            <input type="button" class="btn btn-primary" value="Orders" onclick="LoadPartial('orders')" />
            <input type="button" class="btn btn-primary" value="Delivered" onclick="LoadPartial('deliveries')" />
            <div id="mypage">
            </div>
        </div>
    </div>

</body>

@section scripts{ 
    <script>
        $(document).ready(function () {
            var url = localStorage.getItem('url');
            $('#mypage').load(url);
        })


        function LoadPartial(type) {
            var url = '@Url.Action("Recipes","Home")';
            if (type == 'recipe')
                url = '@Url.Action("Recipes","Home")';
            if (type == 'orders')
                url = '@Url.Action("Orders","Home")';
            if (type == 'deliveries')
                url = '@Url.Action("Deliveries","Home")';
            localStorage.setItem('url',url);
            $('#mypage').load(url);
        }

    </script>
}

结果：

更新：

使用sessionStorage：

<body>
    <div class="text-center">
        <div class="container" style="overflow-x:auto; background-color:white">
            <input type="button" class="btn btn-primary" value="Patients" onclick="LoadPartial('recipe')" />
            <input type="button" class="btn btn-primary" value="Orders" onclick="LoadPartial('orders')" />
            <input type="button" class="btn btn-primary" value="Delivered" onclick="LoadPartial('deliveries')" />
            <div id="mypage">
                
            </div>
        </div>
    </div>

</body>

@section scripts{ 
    <script>
        $(document).ready(function () {
            var orignalurl = '@Url.Action("Recipes","Home")';
            var url = sessionStorage.getItem('url');
            if(url != null)
                $('#mypage').load(url);
            else
                $('#mypage').load(orignalurl);
        })


        function LoadPartial(type) {
            var url = '@Url.Action("Recipes","Home")';
            sessionStorage.setItem('url',url);
            $('#mypage').load(url);
        }

    </script>
}

asp.net-core-mvc partial-views razor-pages