Asp.net core mvc 使用上次加载的PartialView刷新页面_Asp.net Core Mvc_Partial Views_Razor Pages

Asp.net core mvc 使用上次加载的PartialView刷新页面

asp.net-core-mvc

Asp.net core mvc 使用上次加载的PartialView刷新页面,asp.net-core-mvc,partial-views,razor-pages,Asp.net Core Mvc,Partial Views,Razor Pages,我使用的是ASP.NET核心。在我的一个页面中，我有一个div，可以将不同的PartialView加载到其中 <html> <body style="background:url('/images/bg.png')"> <div class="text-center"> <div class="container" style="overflow-x:auto

我使用的是

ASP.NET核心

。在我的一个页面中，我有一个

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>


函数LoadPartial（类型）{
var url='@url.Action（“食谱”、“眼镜”）；
如果（类型==‘配方’）
url='@url.Action（“食谱”、“眼镜”）；
如果（类型==“订单”）
url='@url.Action（“订单”、“眼镜”）；
如果（类型=‘交付’）
url='@url.Action（“传递”、“眼镜”）；
$（'#mypage'）.load（url）；
}

当用户第一次打开此页面时，它应该加载

partialview

，就像单击第一个按钮一样

当另一个

partialview

加载时，我单击了浏览器上的刷新按钮，我想刷新一个不是第一个加载的

partialview

如何执行这些操作？

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


@节脚本{
$（文档）.ready（函数（）{
var url=localStorage.getItem（'url'）；
$（'#mypage'）.load（url）；
})
函数LoadPartial（类型）{
var url='@url.Action（“菜谱”、“主页”）；
如果（类型==‘配方’）
url='@url.Action（“菜谱”、“主页”）；
如果（类型==“订单”）
url='@url.Action（“订单”，“主页”）；
如果（类型=‘交付’）
url='@url.Action（“交付”、“主页”）；
setItem（'url'，url）；
$（'#mypage'）.load（url）；
}
}

结果:

更新：

使用会话存储：

<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>
}


@节脚本{
$（文档）.ready（函数（）{
var orignalurl='@Url.Action（“菜谱”、“主页”）；
var url=sessionStorage.getItem（'url'）；
如果（url！=null）
$（'#mypage'）.load（url）；
其他的
$（'#mypage'）.load（原始文件）；
})
函数LoadPartial（类型）{
var url='@url.Action（“菜谱”、“主页”）；
如果（类型==‘配方’）
url='@url.Action（“菜谱”、“主页”）；
如果（类型==“订单”）
url='@url.Action（“订单”，“主页”）；
如果（类型=‘交付’）
url='@url.Action（“交付”、“主页”）；
setItem（'url'，url）；
$（'#mypage'）.load（url）；
}
}

谢谢，但是当用户打开页面时，它应该加载本地存储中的第一个页面，而不是最后一个。您的意思是当用户第一次访问此页面时，它应该加载原始部分视图吗？使用So怎么样？您是否尝试过我上面提到的

sessionStorage

？不，很遗憾，我不知道如何使用它，您的意思是代替localStorage？你能解释更多吗？是的，用会话存储替换

localStorage

，看看我的更新，也看看他的