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

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>

大家可以从代码中看到，这个视图中只有一个 "Save changes" 按钮，它正在向服务器提交数据并将其保存到数据库中，保存后我通常会重定向它到这样的索引页面：

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

但现在我想知道当用户位于 TAB 2 上并且按 "Save changes" 时如何将他重定向到 "TAB 3"。

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

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

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

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

谢谢大家干杯

Answer 1

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

接下来我在这里做的是：

在控制器中的方法上定义了 ViewBag，在第二个选项卡上提交表单时调用该方法
将那个 ViewBag 传递给这个视图，并检查 ViewBag 中是否有值，如果是，则将第三个选项卡设置为活动状态，很快我将 post 我的代码，因为我正在写这个立即通过我的手机 phone 回答！ :)

但理论上我就是这样解决的

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

How to redirect to another tabpanel tab when button is submited in a MVC

javascript

asp.net-mvc

jquery

tabs

bootstrap-tabs