我有一个 View ,其中包含一组选项卡,每个选项卡呈现不同的部分 View 。阅读这些 Bootstrap 选项卡的文档和 W3Schools 示例后,我无法找到一种方法使事件选项卡在回发时保持事件状态。我见过的所有示例都使用旧版本的 .Net,也不适用。
这是我的代码。
我的 Controller 操作:
public IActionResult DisplayCharts(DashboardChartsByMonthModel model)
{
//...do stuff
model.MonthOrQuarterChart = monthChart;
model.UserChart = userChart;
return View(model);
}
在 View @Scripts
部分中:
<script>
$(function(){
var hash = window.location.hash;
hash && $('ul.nav a[href="' + hash + '"]').tab('show');
$('.nav-tabs a').click(function (e) {
$(this).tab('show');
var scrollmem = $('body').scrollTop() || $('html').scrollTop();
window.location.hash = this.hash;
$('html,body').scrollTop(scrollmem);
});
});
</script>
<script>
$('a[data-toggle="tab"]').on('shown.bs.tab',
function(e) {
switch ($(e.target).attr('href')) {
case '#tab1':
drawMonthAndQuarterChart();
break;
case '#tab2':
drawUserChart();
break;
}
});
</script>
体内:
<ul class="nav nav-tabs" role="tablist" id="myTabs">
<li class="nav-item">
<a class="nav-link active" id="tab1-tab" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-selected="true">By Month & Quarter</a>
</li>
<li class="nav-item">
<a class="nav-link" id="tab2-tab" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2" aria-selected="false">By Leasing / Billing Rep</a>
</li>
<div class="tab-content" id="myTabContent">
<div class="tab-pane active" id="tab1" role="tabpanel" aria-labelledby="tab1-tab">
<form method="post">
...model fields, etc.
<button type="submit" class="btn btn-success">Submit</button>
<div id="chart_monthandquarter_div"></div>
</form>
<div class="tab-pane" id="tab2" role="tabpanel" aria-labelledby="tab2-tab">
<form method="post">
....
</form>
选项卡 2、选项卡 3 等也会发生同样的情况。每个选项卡都有自己的表单,带有自己的提交模型的按钮,当页面在提交后重新加载时,我可以在两个选项卡之间交换并查看我的图表渲染得很好,但每次我发帖时它都会使第一个选项卡处于事件状态。
我尝试过的几件事之一是使用隐藏字段来解决一些较旧的示例,我看到有些人使用过这些示例,但我无法使其发挥作用。
因此,根据所提供的代码,如何才能使您在单击“提交”时查看的当前选项卡是在回发时处于事件状态的选项卡?
最佳答案
当用户提交表单时,您应该遵循P-R-G pattern 。因此,保存后,您应该返回一个重定向响应,该响应发出一个全新的 GET 请求以从头开始加载页面。
发出重定向响应时,您可以添加特定于要选择的选项卡的查询字符串。例如,对于下面的示例标记,您可以发送不带 #
的 href 值作为查询字符串值,并在 View 中读取此查询字符串值并将其设置为 js 变量。在文档就绪事件中,您可以明确启用所需的选项卡。
<ul class="nav nav-tabs" role="tablist" id="myTabs">
<li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
并在您的 HttpPost 操作中
public IActionResult UpdateProfile(YourViewModel model)
{
// to do :Save
return RedirectToAction("Index", new { t = "profile" });
}
在 View 中,您注入(inject) IHttpContextAccessor
实现,以便我们可以访问 Request
和查询字符串
@inject IHttpContextAccessor HttpContextAccessor
<!-- your code for the tabs goes here-->
<script>
$(function() {
var t = '@HttpContextAccessor.HttpContext.Request.Query["t"]';
if (t.length) {
$('#myTabs a[href="#' + t + '"]').tab('show');
}
});
</script>
关于javascript - ASP.Net Core 回发后如何保持选项卡处于事件状态,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46961517/