Multiple tabs in MVC5

Question

0.00/5 (No votes)

See more:

HI,

WE are are using MVC5 razor , i have requirement to display multiple tabs and each tab has different data entry screen , each tab/screen belongs to different model.

I am able to display data in the tabs , but how to save data in individual tab and show that particular tab after saving.

As on post validation for other tabs failed as filling data in one tab and on post all other tab also posted.

Pleas suggest for this.

Posted 30-Sep-15 23:05pm

Member 11541057

Updated 1-Oct-15 2:49am

F-ES Sitecore

v2

Add a Solution

Comments

Krunal Rohit 1-Oct-15 5:18am

make use of jQuery.

-KR

Nathan Minier 1-Oct-15 7:57am

Are you using a display framework like bootstrap?

Member 11541057 1-Oct-15 8:05am

Yes we are using Boostrap framework

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Nathan Minier · Answer 1 · 2015-10-01T02:35:00

Okay, using the bootstrap tabs, as described in http://getbootstrap.com/javascript/#tabs[^], You can put a different form with a different target controller/action on each form. That way each form will target a different model. Your easiest route is to create a partial view for each edit model action, and use that. Please bear with me, it's been awhile since I've done razor:

HTML

<div>

  <!-- Nav tabs -->
  <ul class="nav nav-tabs" role="tablist">
    <li role="presentation" class="active"><a href="#first" aria-controls="first" role="tab" data-toggle="tab">First</a></li>
    <li role="presentation"><a href="#second" aria-controls="second" role="tab" data-toggle="tab">Second</a></li>
  </ul>

  <!-- Tab panes -->
  <div class="tab-content">
    <div role="tabpanel" class="tab-pane active" id="first">
        @Html.RenderAction("GetMyFirstForm","MyController)
    </div>
    <div role="tabpanel" class="tab-pane" id="second">
        @Html.RenderAction("GetMySecondForm","MyController)
    </div>
  </div>

</div>

Form page, form section example:

HTML

@model MyNamespace.FirstModel
<div>
    @using(Html.BeginForm("EditMyFirstModel", "MyController", FormMethod.Post, 
                                      new { enctype = "multipart/form-data" }))
    {
        <!-- Needed fields here -->
        <input class="btn btn-default" type="submit" value="Submit" />
    }
</div>

Krunal Rohit · Answer 2 · 2015-10-01T02:50:00

Solution 2

You can use something like multi-step form (which has similar functionality that you're looking for).

http://codepen.io/atakan/pen/gqbIz[^]
http://www.jqueryrain.com/demo/jquery-step-form-wizard/page/2/[^]
http://webdesign.tutsplus.com/articles/build-a-multi-step-form-interface--webdesign-11715[^]

Loads of examples are there, you can modify it according to your need.

-KR

Posted 1-Oct-15 2:50am

Krunal Rohit

Comments

Member 11541057 1-Oct-15 12:59pm

Hi Nathan,

Thanks for the suggestion , i got problem now using @Html.RenderAction both tabs are loading , on loading the page.
Also on click of Save button on second tab it is not maintaining the _Layout and it returns to indiviual PArtialView in page i return like
return PartialView("GetParameters", parameters);