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

Question

我正在使用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。

我该怎么做？

Answer 1

您可以在单击按钮时将 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>
}

结果：

更新：

使用会话存储：

<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")';
            if (type == 'recipe')
                url = '@Url.Action("Recipes", "Home")';
            if (type == 'orders')
                url = '@Url.Action("Orders", "Home")';
            if (type == 'deliveries')
                url = '@Url.Action("Deliveries", "Home")';
            sessionStorage.setItem('url', url);
            $('#mypage').load(url);
        }

    </script>
}