如何解决使用上次加载的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>
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。