Hi pandeygolu420...,
Set the ActiveIndex in model class.
Add the ActiveIndex as HiddenField inside the form.
On Button Click set the ActiveIndex HiddenField and set it from Controller.
Check the example.
Model
public class CustomerModel
{
public Basic Basic { get; set; }
public Detail Detail { get; set; }
public int ActiveIndex { get; set; }
}
public class Basic
{
[Required(ErrorMessage = "Name is Required")]
public string Name { get; set; }
}
public class Detail
{
[Required(ErrorMessage = "Country is Required")]
public string Country { get; set; }
[Required(ErrorMessage = "DOB is Required")]
[DataType(DataType.Date, ErrorMessage = "DOB is Required")]
[DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true)]
public DateTime? DOB { get; set; }
}
Controller
public class HomeController : Controller
{
public IActionResult Index()
{
CustomerModel model = new CustomerModel();
model.ActiveIndex = 1;
Detail detail = new Detail();
detail.DOB = DateTime.Now.AddDays(5);
model.Detail = detail;
return View(model);
}
[HttpPost]
public IActionResult Index(CustomerModel model)
{
if (ModelState.IsValid)
{
model.ActiveIndex = model.ActiveIndex + 1;
return View("Index", model);
}
else
{
return View(model);
}
}
}
View
@model Redirect_Tab_Submit_MVC_Core.Models.CustomerModel
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Index</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"
integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-transparent py-4 px-4">
<div class="d-flex align-items-center">
<i class="fas fa-align-left primary-text fs-4 me-3" id="menu-toggle"></i>
<h2 class="fs-4 m-0">Add Provider</h2>
</div>
</nav>
<div class="master-tab-wrapper provider-wrapper">
<div class="container-fluid px-4">
<div class="stepper-wrapper">
<div class="card p-3 mb-3">
<ul class="nav nav-tabs mt-3" data-bs-tabs="tabs" id="myTab">
<li class="nav-item me-2">
<a class="nav-link active" aria-current="true" data-bs-toggle="tab" href="#step1">
Step 1
<h6>Personal Details</h6>
</a>
@Html.ValidationMessage("CustomError", new { @class = "text-danger" })
</li>
<li class="nav-item me-2">
<a class="nav-link" data-bs-toggle="tab" href="#step2">
Step 2
<h6>License, Certifications & More</h6>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-bs-toggle="tab" href="#step3">
Step 3
<h6>Primary/Sub Specialities</h6>
</a>
</li>
</ul>
<form method="post" enctype="multipart/form-data" asp-controller="Home" asp-action="Index" class="tab-content mt-3">
@Html.HiddenFor(c => c.ActiveIndex)
<div class="tab-pane active" id="step1">
<div class="provider-details-wrapper">
<h6>Personal Details</h6>
<div class="row">
<div class="col-lg-3 col-md-4">
<div class="form-group">
<label for="Name">Name</label>
@Html.TextBoxFor(c => c.Basic.Name, new { @class = "form-control", id = "txtName", placeholder = "Enter Name" })
<span asp-validation-for="Basic.Name" class="text-danger"></span>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="form-group">
<label for="Country">Country</label>
@Html.TextBoxFor(c => c.Detail.Country, new { @class = "form-control", id = "txtCountry", placeholder = "Enter Country" })
<span asp-validation-for="Detail.Country" class="text-danger"></span>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="form-group">
<label for="DOB">DOB</label>
@Html.TextBoxFor(c => c.Detail.DOB, "{0:yyyy-MM-dd}", new { id = "txtDOB", type = "date", @class = "form-control" })
<span asp-validation-for="Detail.DOB" class="text-danger"></span>
</div>
</div>
<div class="d-flex justify-content-end mt-5">
<a href="manage-provider.html" class="btn cancel-btn me-3">Back</a>
<input type="submit" class="btn add-btn" value="Save & next" id="btnSaveNext">
</div>
</div>
</div>
</div>
<div class="tab-pane" id="step2">
<div class="provider-details-wrapper">
<h6>License, Certifications & Documents</h6>
<div class="row">
<div class="col-lg-3 col-md-4">
<div class="form-group">
<label for="firstname">Document Name</label>
<input type="text" class="form-control" id="firstname">
</div>
</div>
<div class="col-lg-3 col-md-4">
<label for="state">State</label>
<div class="form-group">
<select class="form-control form-select">
<option>Noida</option>
<option value="1"></option>
<option value="2"></option>
</select>
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="form-group">
<label for="isuuedate">Isuue Date</label>
<input type="date" class="form-control" id="isuuedate">
</div>
</div>
<div class="col-lg-3 col-md-4">
<div class="form-group">
<label for="tax">Expiration Date</label>
<input type="date" class="form-control" id="tax">
</div>
</div>
</div>
<div class="row">
<div class="col-xl-12 col-lg-12 col-md-12 mt-3">
<button class="btn disabled-btn me-3 mb-2">
Drag file here, or Click to Upload
</button>
<button class="btn upload-btn px-5">Upload</button>
</div>
</div>
<div class="d-flex justify-content-end mt-5">
<a href="manage-provider.html" class="btn cancel-btn me-3">Back</a>
<a href="manage-provider.html" class="btn save-btn">Save & next</a>
</div>
</div>
</div>
<div class="tab-pane" id="step3">
<div class="provider-details-wrapper">
<h6>Primary/Sub Specialities Details</h6>
<div class="d-flex justify-content-end mt-5">
<a href="manage-provider.html" class="btn cancel-btn me-3">Back</a>
<a href="manage-provider.html" class="btn save-btn px-4">Save</a>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div class="position-fixed top-0 end-0 p-3" style="z-index: 11;display:none;">
<div id="liveToastdelete" class="toast hide " role="alert" aria-live="assertive" aria-atomic="true"
data-bs-animation="true" data-bs-autohide="true">
<div class="toast-header bg-white">
<strong class="me-auto text-dark">Provider has been Added Succesfully.</strong>
<small class="text-dark"></small>
<button type="button" class="btn-close" id="closebtn" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#myTab li:nth-child(' +@Model.ActiveIndex+') a').tab('show');
$('body').on('click','input[type=submit], button' ,function () {
$('#ActiveIndex').val($(this).closest('.tab-pane').attr('id').replace('step', ''));
});
});
</script>
</body>
</html>
