I'm working on MVC application, and in one of my Views there is tab control which has three tabs, on each tab (first and second) user has to fill some data which might be seen on third tab, so for example when user fills input on first tab, he will click on another tab and user will fill input on second tab, and when user clicks Save Changes then I would like save changes to a database (by calling my method in a controller) and redirect user to a third tab
Here is an image of how that looks on my view:
And here is an html from my View (image above) for this:
<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>
As you can see guys from a code there is only one "Save changes" button in this View, and it is submiting data to a server and saving it to a database, and after it is saved I ussualy redirected it to a Index page like this:
return RedirectToAction("Index", "Articles");
But now I am wondering how can I redirect user to a "TAB 3" when he is located on a TAB 2 and if he press "Save changes".
What I did for now is next, I acctually attached on click event on my button which is submiting changes to a database, and it looks like this:
$('#btnSaveThis').click(function (e) {
e.preventDefault();
$('#myTab a[href="#tab_content3"]').tab('show');
})
And this code above will open third tab when I 'm on second tab and if I press Save changes, but then my method which is located in a Controller wont be hitted because of this line: e.preventDefault();
So guys, how can I make a POST to my Controller, to save changes to a database, but also execute code from my javascript to open third tab?
Thanks guys Cheers
It would be too complicated to solve this by Ajax, because there is a lot of items to loop throught, so I decided to solve this on another way.
What I did here was next:
But theoreticaly that was how I solved this