在 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>

问题是我有这个按钮用于文件上传控件，它执行回发以显示 label 以显示文件是否已上传

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

但是页面当前选项卡在回发后返回到第一个选项卡，我该如何防止这种情况发生？ 这是我点击“上传文件”按钮后运行的代码

 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

作为一种通用技术，定义一个隐藏字段：

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

创建 javascript function 以保存当前选项卡 position：

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

当 POST 发生时，它还将存储在 HiddenField 中的“currentTab”值发送回服务器。 在现在的响应中，您将不得不使用：

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

现在，您应该在“currentTab”变量中将选项卡 position 放回客户端。 顺便提一下，“currentTab”应该是可访问的。