How to Handle PartialView form submit action in Bootstrap tab panel?

user_19539992 0
Viewed 48

I have bootstrap tabs with 5 tabs. each tabs contains Partial View. when I post the form in Partial View from any tab then I want to stay on same tab after form submit successfully or if model validation fires. Currently, if I post form in Partial view then it loads full view and display first tab partial view

Tabpenl.cshtml

<div class="container">
    <div class="row">
       <div class="col-xl-12">
           <h3> 
           First tab
           </h3>
         <section>
            @Html.Partial("_Example1")
         </section>
         
          <h3> 
           Second tab
           </h3>
         <section>
            @Html.Partial("_Example2")
         </section>
         
          <h3> 
           Third tab
           </h3>
         <section>
            @Html.Partial("_Example3")
         </section>
         
          <h3> 
           Fourth tab
           </h3>
         <section>
            @Html.Partial("_Example4")
         </section>
         
          <h3> 
           Firth tab
           </h3>
         <section>
            @Html.Partial("_Example5")
         </section>
         
       </div>
    </div>
</div>

_Example2.cshtml

<div class="form-group">
    <div class="form-row">
       <div class="col-md-8">
            <input type="text" asp-for="City" class="form-control" maxlength="50" placeholder="Add City Name" required>
       </div>      
       <div class="col-md-4">
              <button id="btnSubmit" class="btn btn-warning btn-rounded btn-block " data-ftrans="slide" type="submit" style="height:50px; font-size:20px;">Submit</button>
       </div>
    </div>
</div>

asp.net-core-mvc bootstrap-4 asp.net-mvc
1 Answers

You can trigger validation if(!$("#form_id").valid()) to navigate to the wrongly tab, also to keep current tab status, you can get the onChange event to save the information of current in local Storage or query parameter etc and navigate to it on reload.

user_192959480
Related