javascript 步進條件在 asp.net c# 中不起作用

Question

我在 asp.net 中使用 HTML 標記用於多步進度條目的。 但是腳本在我的應用程序中不起作用，請為此提供解決方案

我的 Asp.net 代碼是-

    <div class="progress" runat="server">

        <div class="progress-track" runat="server" ></div>
        <div id="step1" class="progress-step" runat="server"   >
           Step1
        </div>
    .
    .
    .
    .
    </div>
     

<asp:Button ID="Button1" runat="server" Text="Next" type="button" OnClientClick="return next();" onClick="NextStep" />

 

和 javascript 是-

<script type="text/javascript">

    let step = 'step1';
    const step1 = document.getElementById('ctl00_ContentPlaceHolder1_step1');
    const step2 = document.getElementById('ctl00_ContentPlaceHolder1_step2');
    const step3 = document.getElementById('ctl00_ContentPlaceHolder1_step3');

    function next(step) {
        if (step === 'step1') {
            step = 'step2';
            step1.classList.remove("is-active");
            step1.classList.add("is-complete");
            step2.classList.add("is-active");

        .
        .
        .
        } else if (step === 'complete') {
            step = 'step1';
            step3.classList.remove("is-complete");
            step2.classList.remove("is-complete");
            step1.classList.remove("is-complete");
            step1.classList.add("is-active");
        }
    }
</script>

步驟過程不起作用

Answer 1

這是因為您創建了對服務器的回發，而服務器不關心客戶端更改並再次呈現舊的 state。

最簡單的解決方案是將您的 javascript 轉換為 c# 代碼，並按照我的假設在代碼后面執行此操作，您也在按鈕處理程序中執行其他服務器端操作。