在 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”應該是可訪問的。