![](/img/trans.png)
[英]asp.net bootstrap Keep current active tab after post-back event
[英]Current selected tab is not loaded when post back of multi steps form. JavaScript and asp.net
我有来自 W3schools.com 的简单多步骤表单模板。 在步骤表单的第二个选项卡中,单击服务器端按钮(asp 按钮),然后页面回发并加载第一个选项卡表单(第一步)。 因此我尝试了在回发后加载相同标签的方法。 那还不成功。 我希望您为我的代码提供解决方案。
Javascript:
<script>
var currentTabnew;
var last = sessionStorage.getItem('tab');
// Current tab is set to be the first tab (0)
if (last==0 ||last==null ) {
currentTabnew = 0;
}
else {
currentTabnew = last;
}
showTab(currentTabnew); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form ...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
// ... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == (x.length - 1)) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
// ... and run a function that displays the correct step indicator:
fixStepIndicator(n)
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form... :
if (currentTab >= x.length) {
//...the form gets submitted:
document.getElementById("regForm").submit();
return false;
}
// Otherwise, display the correct tab:
//sessionStorage.setItem('tab');
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x, y, i, valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false:
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i, x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class to the current step:
x[n].className += " active";
}
</script>
我的.aspx 代码:
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
* {
box-sizing: border-box;
}
#regForm {
background-color: #ffffff;
margin: 100px auto;
font-family: Raleway;
padding: 40px;
width: 70%;
min-width: 300px;
margin-bottom: 5px;
}
h1 {
text-align: center;
}
input {
padding: 10px;
width: 100%;
font-size: 17px;
font-family: Raleway;
border: 1px solid #aaaaaa;
}
/* Mark input boxes that gets an error on validation: */
input.invalid {
background-color: #ffdddd;
}
/* Hide all steps by default: */
.tab {
display: none;
}
/* Make circles that indicate the steps of the form: */
.step {
height: 15px;
width: 15px;
margin: 0 2px;
background-color: #bbbbbb;
border: none;
border-radius: 50%;
display: inline-block;
opacity: 0.5;
}
.step.active {
opacity: 1;
}
/* Mark the steps that are finished and valid: */
.step.finish {
background-color: #04AA6D;
}
</style>
<div id="regForm" class="shadow">
<h3>Registration Form</h3>
<br />
<div class="tab"><h5>Personal Details</h5> <br />
<div class="row">
<div class="col">
<div class="mb-3"><asp:textbox runat="server" type="text" class="form-control" placeholder="Full Name"></asp:textbox></div>
<div class="mb-3"><asp:textbox runat="server" type="text" class="form-control" placeholder="Surename"></asp:textbox></div>
<div class="mb-3"><asp:textbox runat="server" type="date" class="form-control" placeholder="Date of Birth"></asp:textbox></div>
<div class="mb-3"><asp:dropdownlist runat="server" class="form-control">
<asp:ListItem Value="" selected hidden>Civil Status</asp:ListItem>
<asp:ListItem Value="CV1">Single</asp:ListItem>
<asp:ListItem Value="CV2">Married</asp:ListItem>
<asp:ListItem Value="CV3">Widowed</asp:ListItem>
<asp:ListItem Value="CV4">Divorced</asp:ListItem>
<asp:ListItem Value="CV5">Separated</asp:ListItem>
</asp:dropdownlist> </div>
<div class="mb-3"><asp:textbox runat="server" type="text" class="form-control" placeholder="Land Phone"></asp:textbox></div>
<div class="mb-3"><asp:textbox runat="server" type="texxt" class="form-control" placeholder="Address" TextMode="MultiLine"></asp:textbox></div>
<div class="mb-3"><asp:textbox runat="server" type="text" class="form-control" placeholder="E-mail"></asp:textbox></div>
</div>
<div class="col">
<div class="mb-3"><asp:textbox runat="server" type="text" class="form-control" placeholder="Other Name"></asp:textbox></div>
<div class="mb-3"><asp:textbox runat="server" type="text" class="form-control" placeholder="NIC"></asp:textbox></div>
<div class="mb-3"><asp:dropdownlist runat="server" class="form-control">
<asp:ListItem Value="" selected hidden>Gender</asp:ListItem>
<asp:ListItem Value="G1">Male</asp:ListItem>
<asp:ListItem Value="G0">Female</asp:ListItem>
</asp:dropdownlist> </div>
<div class="mb-3"><asp:dropdownlist runat="server" class="form-control">
<asp:ListItem Value="" selected hidden>Religion</asp:ListItem>
<asp:ListItem Value="R1">Christianity</asp:ListItem>
<asp:ListItem Value="R2">Hinduism</asp:ListItem>
<asp:ListItem Value="R3">Buddhism</asp:ListItem>
<asp:ListItem Value="R4">Islam</asp:ListItem>
</asp:dropdownlist> </div>
<div class="mb-3"><asp:textbox runat="server" type="text" class="form-control" placeholder="Mobile"></asp:textbox></div>
<div class="mb-3"><asp:dropdownlist runat="server" class="form-control">
<asp:ListItem Value="" selected hidden>District</asp:ListItem>
<asp:ListItem Value="CV1"> Jaffna </asp:ListItem>
<asp:ListItem Value="CV1"> Kilinochchi </asp:ListItem>
<asp:ListItem Value="CV1"> Mannar </asp:ListItem>
<asp:ListItem Value="CV1"> Mullaitivu </asp:ListItem>
<asp:ListItem Value="CV1"> Vavuniya </asp:ListItem>
<asp:ListItem Value="CV1"> Puttalam </asp:ListItem>
<asp:ListItem Value="CV1"> Kurunegala </asp:ListItem>
<asp:ListItem Value="CV1"> Gampaha </asp:ListItem>
<asp:ListItem Value="CV1"> Colombo </asp:ListItem>
<asp:ListItem Value="CV1"> Kalutara </asp:ListItem>
<asp:ListItem Value="CV1"> Anuradhapura </asp:ListItem>
<asp:ListItem Value="CV1"> Polonnaruwa </asp:ListItem>
<asp:ListItem Value="CV1"> Matale </asp:ListItem>
<asp:ListItem Value="CV1"> Kandy </asp:ListItem>
<asp:ListItem Value="CV1"> Nuwara Eliya </asp:ListItem>
<asp:ListItem Value="CV1"> Kegalle </asp:ListItem>
<asp:ListItem Value="CV1"> Ratnapura </asp:ListItem>
<asp:ListItem Value="CV1"> Trincomalee </asp:ListItem>
<asp:ListItem Value="CV1"> Batticaloa </asp:ListItem>
<asp:ListItem Value="CV1"> Ampara </asp:ListItem>
<asp:ListItem Value="CV1"> Badulla </asp:ListItem>
<asp:ListItem Value="CV1"> Monaragala </asp:ListItem>
<asp:ListItem Value="CV1"> Hambantota </asp:ListItem>
<asp:ListItem Value="CV1"> Matara </asp:ListItem>
<asp:ListItem Value="CV1"> Galle </asp:ListItem>
</asp:dropdownlist> </div>
<div class="mb-3"><asp:textbox runat="server" type="text" class="form-control" placeholder="Nearest Police Station"></asp:textbox></div>
</div>
</div>
</div>
<div class="tab">
<h5>Educational Qualification </h5> <br />
<div class="row">
<div class="mb-3"><asp:dropdownlist runat="server" class="form-control">
<asp:ListItem Value="" selected hidden>Select Highest Education...</asp:ListItem>
<asp:ListItem Value="R1">Grade 8</asp:ListItem>
<asp:ListItem Value="R2">O/L</asp:ListItem>
<asp:ListItem Value="R3">A/L</asp:ListItem>
<asp:ListItem Value="R4">Degree</asp:ListItem>
<asp:ListItem Value="R2">Doctor</asp:ListItem>
<asp:ListItem Value="R3">PHD</asp:ListItem>
<asp:ListItem Value="R4">Not Mentioned</asp:ListItem>
</asp:dropdownlist> </div>
</div>
<br />
<h5>Professional Qualification</h5>
<br />
<div class="row">
<asp:gridview ID="Gridview1" runat="server" ShowFooter="True"
AutoGenerateColumns="False" CssClass="table table-hover" BorderStyle="None">
<Columns>
<asp:TemplateField HeaderText="Institute">
<ItemTemplate>
<asp:TextBox ID="TextBox1" runat="server" class="form-control" ></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Qualification">
<ItemTemplate>
<asp:TextBox ID="TextBox2" runat="server" class="form-control" ></asp:TextBox>
</ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Duration">
<ItemTemplate>
<asp:TextBox ID="TextBox3" runat="server" class="form-control" ></asp:TextBox>
</ItemTemplate>
<FooterStyle HorizontalAlign="Right" />
<FooterTemplate>
<input id="btnAdd" type="button" style="width:200px;" class="btn btn-info" value="Add" onclick="addRowToTable(<%= Gridview1.ClientID %>)"/>
</FooterTemplate>
</asp:TemplateField>
<asp:CommandField HeaderText="sdfsd" />
</Columns>
</asp:gridview>
<asp:button runat="server" text="Button" />
</div>
</div>
<div class="tab">Birthday:
<p><input placeholder="dd" oninput="this.className = ''" name="dd"></p>
<p><input placeholder="mm" oninput="this.className = ''" name="nn"></p>
<p><input placeholder="yyyy" oninput="this.className = ''" name="yyyy"></p>
</div>
<div class="tab">Login Info:
<p><input placeholder="Username..." oninput="this.className = ''" name="uname"></p>
<p><input placeholder="Password..." oninput="this.className = ''" name="pword" type="password"></p>
</div>
<div style="overflow:auto;">
<div style="float:right;">
<button type="button" id="prevBtn" onclick="nextPrev(-1)" class="btn btn-secondary">Previous</button>
<button type="button" id="nextBtn" onclick="nextPrev(1)" class="btn btn-primary">Next</button>
</div>
</div>
<!-- Circles which indicates the steps of the form: -->
<div style="text-align:center;margin-top:40px;">
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
<span class="step"></span>
</div></div>
<div style="text-align:center;">
<p class="mt-5 mb-3 text-muted">©2021 SLFEA</p>
<p class="mb-3 text-muted" style="font-size:small;">Designed by Dockyard Total Solutions Pvt Ltd</p></div>
<script>
function addRowToTable(containerId) {
// Get a reference to the table/GridView...
var tableRef = document.getElementById('<%= Gridview1.ClientID %>');
// Get the index of the current last row...
var lastRow = tableRef.rows.length;
// Add a row (<tr>) to the table/GridView...
var newRow = tableRef.insertRow(lastRow - 1);
// Add a cell (<td>) to the row...
var newCell = newRow.insertCell(0);
var newCell1 = newRow.insertCell(1);
var newCell2 = newRow.insertCell(2);
// Create a TextBox...
var controlRef = document.createElement('input');
controlRef.type = 'text';
controlRef.id = containerId + '_TextBox' + lastRow;
controlRef.name = controlRef.id;
controlRef.size = 20;
var controlRef1 = document.createElement('input');
controlRef.type = 'text';
controlRef.id = '01' + '_TextBox' + lastRow;
controlRef.name = controlRef.id;
controlRef.size = 20;
var controlRef2 = document.createElement('input');
controlRef.type = 'text';
controlRef.id = '02' + '_TextBox' + lastRow;
controlRef.name = controlRef.id;
controlRef.size = 20;
// Add the TextBox to the cell...
newCell.appendChild(controlRef);
newCell1.appendChild(controlRef1);
newCell2.appendChild(controlRef2);
}
</script>
</asp:Content>
谢谢大家。 因为没有考虑我的问题。
这对我有用。
<script>
var currentTab;
var newCurrentTab = sessionStorage.getItem("lastTab");
if (newCurrentTab == 0 || newCurrentTab == null) {
currentTab = 0;
} else {
currentTab = newCurrentTab;
}
showTab(currentTab); // Display the current tab
function showTab(n) {
// This function will display the specified tab of the form ...
var x = document.getElementsByClassName("tab");
x[n].style.display = "block";
// ... and fix the Previous/Next buttons:
if (n == 0) {
document.getElementById("prevBtn").style.display = "none";
} else {
document.getElementById("prevBtn").style.display = "inline";
}
if (n == x.length - 1) {
document.getElementById("nextBtn").innerHTML = "Submit";
} else {
document.getElementById("nextBtn").innerHTML = "Next";
}
// ... and run a function that displays the correct step indicator:
fixStepIndicator(n);
}
function nextPrev(n) {
// This function will figure out which tab to display
var x = document.getElementsByClassName("tab");
// Exit the function if any field in the current tab is invalid:
if (n == 1 && !validateForm()) return false;
// Hide the current tab:
x[currentTab].style.display = "none";
// Increase or decrease the current tab by 1:
currentTab = currentTab + n;
// if you have reached the end of the form... :
if (currentTab >= x.length) {
//...the form gets submitted:
document.getElementById("regForm").submit();
return false;
}
// Otherwise, display the correct tab:
sessionStorage.setItem("lastTab", currentTab);
showTab(currentTab);
}
function validateForm() {
// This function deals with validation of the form fields
var x,
y,
i,
valid = true;
x = document.getElementsByClassName("tab");
y = x[currentTab].getElementsByTagName("input");
// A loop that checks every input field in the current tab:
for (i = 0; i < y.length; i++) {
// If a field is empty...
if (y[i].value == "") {
// add an "invalid" class to the field:
y[i].className += " invalid";
// and set the current valid status to false:
valid = false;
}
}
// If the valid status is true, mark the step as finished and valid:
if (valid) {
document.getElementsByClassName("step")[currentTab].className += " finish";
}
return valid; // return the valid status
}
function fixStepIndicator(n) {
// This function removes the "active" class of all steps...
var i,
x = document.getElementsByClassName("step");
for (i = 0; i < x.length; i++) {
x[i].className = x[i].className.replace(" active", "");
}
//... and adds the "active" class to the current step:
x[n].className += " active";
}
</script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.