如何在 MVC 中提交按钮时重定向到另一个选项卡面板选项卡

Question

我正在开发MVC应用程序，在我的一个视图中有一个选项卡控件，它有三个选项卡，在每个选项卡(第一个和第二个)上，用户必须填充一些可能在第三个选项卡上看到的数据，因此例如当用户在第一个选项卡上填写输入时，他将单击另一个选项卡，用户将在第二个选项卡上填充输入， 当用户单击"保存更改"时，我想将更改保存到数据库(通过在控制器中调用我的方法)并将用户重定向到第三个选项卡

以下是我的观点：

这是来自我的视图(上图)的 html：

<div class="" role="tabpanel" data-example-id="togglable-tabs">
<ul id="myTab" class="nav nav-tabs bar_tabs" role="tablist">
<li role="presentation" class="active">
<a href="#tab_content1" id="home-tab" role="tab" data-toggle="tab" aria-expanded="true">TAB 1</a>
</li>
<li role="presentation" class="">
<a href="#tab_content2" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">TAB 2</a>
</li>
<li role="presentation" class="">
<a href="#tab_content3" role="tab" id="profile-tab" data-toggle="tab" aria-expanded="false">TAB 3</a>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div role="tabpanel" class="tab-pane fade active in" id="tab_content1" aria-labelledby="home-tab">
<div class="col-md-6 col-sm-6">
<div class="form-group">
//My inputs as text boxes
</div>
<div class="form-group">
//My inputs as text boxes
</div>
<div class="form-group">
//My inputs as text boxes
</div>
<div class="form-group">
//My inputs as text boxes
</div>
<div class="form-group">
//My inputs as text boxes 
</div>
<div class="form-group">
//My inputs as text boxes 
</div>
<div class="form-group">
//My inputs as text boxes 
</div>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab_content2" aria-labelledby="profile-tab">
<div class="table-responsive">
<table class="table table-striped  jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title">Name </th>
<th class="column-title">Title  </th>
</tr>
</thead>
<tbody>
</table>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="tab_content3" aria-labelledby="profile-tab">
<div class="row">
<div class="col-md-5 col-sm-12 col-xs-12">
</div>
<div class="col-md-7 col-sm-12 col-xs-12">
<div class="table-responsive">
<table class="table table-striped  jambo_table bulk_action">
<thead>
<tr class="headings">
<th class="column-title">Name </th>
<th class="column-title">Title</th>
<th class="column-title">Value</th>
</tr>
</thead>                                                       
</table>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="form-group">
<div class="col-md-12">
<br />
<button type="submit" class="btn btn-warning pull-right" id="btnSaveThis"><i class="fa fa-save"></i> Save changes</button>
</div>
</div>
</div>
</div>

正如您从代码中看到的那样，此视图中只有一个"保存更改"按钮，它正在将数据提交到服务器并将其保存到数据库，保存后，我将其重定向到如下所示的索引页面：

return RedirectToAction("Index", "Articles");

但是现在我想知道如何将用户重定向到"TAB 3"，当他位于TAB 2上并且如果他按"保存更改"时。

我现在做的是接下来，我在我的按钮上附加了单击事件，该按钮正在向数据库提交更改，它看起来像这样：

$('#btnSaveThis').click(function (e) {
e.preventDefault();
$('#myTab a[href="#tab_content3"]').tab('show');
})

当我在第二个选项卡上时，上面的代码将打开第三个选项卡，如果我按保存更改，但是由于以下行，我位于控制器中的方法不会被击中：e.preventDefault();

所以伙计们，我怎样才能向我的控制器发出 POST，以保存对数据库的更改，同时从我的 javascript 执行代码以打开第三个选项卡？

谢谢大家 干杯

Answer 1

用 Ajax 解决这个问题太复杂了，因为有很多项目需要循环，所以我决定用另一种方式解决这个问题。

我在这里做的是接下来：

• 在控制器中定义 ViewBag 的方法，在第二个选项卡上提交表单时调用该方法
• 将该 ViewBag 传递给此视图，并检查 ViewBag 中是否有值，所以如果是，则将第三个 Tab 设置为活动状态，很快我将发布我的代码，因为我现在正在用手机写这个答案！ :)

但从理论上讲，这就是我解决这个问题的方式