使用上次加载的 PartialView 刷新页面
Refresh page with PartialView that was loaded the last time
我正在使用 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>
}
结果:
更新:
使用会话存储:
<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>
}
我正在使用 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>
}
结果:
更新:
使用会话存储:
<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>
}