在 asp.net 回发后，如何在代码 slider 中保留当前选项卡？

Question

Im creating an asp.net booking page that has a coda slider effect,the page is also a content page of a master page, i have this JavaScript that allows the slider effect

<script>
            var currentTab = 0; // Current tab is set to be the first tab (0)
            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";
                    document.getElementById("Submit").style.display = "none";
                } else {
                    document.getElementById("prevBtn").style.display = "inline";
                }
                if (n == (x.length - 1)) {
                    document.getElementById("Submit").style.display = "inline";
                    document.getElementById("prevBtn").style.display = "none";
                    document.getElementById("nextBtn").style.display = "none";
                } 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 true;
                // 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:
                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>

The problem is that i have this button for a file Upload control that does a postback to display a label to show if the file is uploaded

            <input type="submit" runat="server" class="btn btn-success" value="Upload File" onserverclick="Button1_Click"/>

but the page current tab returns to the first tab after post back, how can i prevent this from happening? this is the code that runs after i have clicked the "Upload File" button

 protected void Button1_Click(object sender, EventArgs e)
    {
        if (payment.HasFile)
        {
            string FileExtention = Path.GetExtension(payment.FileName);
            if (FileExtention.ToLower() != ".pdf" && FileExtention.ToLower() != ".docx")
            {
                message2.Visible = true;
                message3.Visible = false;
                message.Visible = false;
                message1.Visible = false;
            }
            else
            {
                int FileSize = payment.PostedFile.ContentLength;
                if (FileSize > 2097152)
                {
                    message3.Visible = true;
                    message2.Visible = false;
                    message.Visible = false;
                    message1.Visible = false;
                }
                else
                {
                    payment.SaveAs(Server.MapPath("~/ApplicantUploads/" + payment.FileName));
                    message.Visible = true;
                }

            }

        }
        else
        {
            message1.Visible = true;
            message3.Visible = false;
            message.Visible = false;
            message2.Visible = false;
        }
        
    }

Answer 1

As a general technique, define a hidden field:

<asp:HiddenField ID="HiddenField" runat="server" value="" />

Create a javascript function to save the current tab position:

function SaveTabPosition(position) {
     document.getElementById('<%=HiddenField.ClientID%>').value = position;
 }

When the POST will take place, it will send also the "currentTab" value stored in HiddenField back to the server. In the response now you will have to use:

ScriptManager.RegisterStartupScript(this.Page, this.GetType(), "setTabPosition", "var currentTab="+HiddenField.Value, true);

Now you should have the tab position back on the client side in "currentTab" variable. As a small mention, the "currentTab" should be accessible.