Как перенаправить на другую вкладку панели вкладок при нажатии кнопки в 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 в этот View и проверил, есть ли значение в ViewBag, поэтому, если да, то установите третью вкладку как активную, скоро я опубликую свой код, потому что я сейчас пишу этот ответ с моего мобильного телефона!:)

Но теоретически это было то, как я решил это