0

ユーザーがドロップダウンからオプションを選択すると、それぞれの div が表示されるこのフォームがあります。ただし、私の問題は、送信ボタンがクリックされたとき、クリック時のメソッドが正常に実行されていますが、現在の div が非表示になり、最初の div が表示されることです。どうすればこれを防ぐことができますか?

jQuery コード:

$(document).ready(function () {
        displayDiv();
        $('#ddlist').change(displayDiv);

        function displayDiv() {
            switch ($("#ddlist").val()) {
                case "addition":
                    $("#addition").show();
                    $('#conversion').hide();
                    $('#triangle').hide();
                    $('#quadratic').hide();
                    break;
                case "conversion":
                    $("#addition").hide();
                    $('#conversion').show();
                    $('#triangle').hide();
                    $('#quadratic').hide();
                    break;
                case "triangle":
                    $("#addition").hide();
                    $('#conversion').hide();
                    $('#triangle').show();
                    $('#quadratic').hide();
                    break;
                case "quadratic":
                    $("#addition").hide();
                    $('#conversion').hide();
                    $('#triangle').hide();
                    $('#quadratic').show();
                    break;
            }
        }
    });

フォームコード:

Please choose required calculation from the following list:
    <select id="ddlist">
        <option value="addition">Addition of three numbers</option>
        <option value="conversion">Convert from Fahrenheit to Celsius</option>
        <option value="triangle">Calculate the side of a right-angled triangle</option>
        <option value="quadratic">Find x using the Quadratic Equation</option>
    </select><br /><br />
</p>

<div id="addition">
    <p>
    Input variable a : <asp:TextBox runat="server" ID="varA" CssClass="numeric"></asp:TextBox><br /><br />
    Input variable c : <asp:TextBox runat="server" ID="varB" CssClass="numeric"></asp:TextBox><br /><br />
    Input variable b : <asp:TextBox runat="server" ID="varC" CssClass="numeric"></asp:TextBox><br /><br />
    <asp:Button ID="additionSubmit" runat="server" Text="Submit"  
            onclick="additionSubmit_Click" /><br /><br />
     <asp:Label ID="lblAddition" runat="server" Text="" CssClass="label"></asp:Label>
    </p>
</div>

<div id="conversion">
    <p>
    Input Fahrenheit Temperature : <asp:TextBox runat="server" ID="temperatureF" CssClass="numeric"></asp:TextBox><br /><br />
    <asp:Button ID="converstionSubmit" runat="server" Text="Submit" 
            onclick="converstionSubmit_Click" /><br /><br />
     <asp:Label ID="lblConversion" runat="server" Text="" CssClass="label"></asp:Label>
    </p>
</div>

<div id="triangle">
    <p>
    Input side a : <asp:TextBox runat="server" ID="tsideA" CssClass="numeric"></asp:TextBox><br /><br />
    Input side b : <asp:TextBox runat="server" ID="tsideB" CssClass="numeric"></asp:TextBox><br /><br />
    <asp:Button ID="triangleSubmit" runat="server" Text="Submit" 
            onclick="triangleSubmit_Click" /><br /><br />
     <asp:Label ID="lblTriangle" runat="server" Text="" CssClass="label"></asp:Label>
    </p>
</div>

<div id="quadratic">
    <p>
    Input side a : <asp:TextBox runat="server" ID="sideA" CssClass="numeric"></asp:TextBox><br /><br />
    Input side c : <asp:TextBox runat="server" ID="sideB" CssClass="numeric"></asp:TextBox><br /><br />
    Input side b : <asp:TextBox runat="server" ID="sideC" CssClass="numeric"></asp:TextBox><br /><br />
    <asp:Button ID="quadraticSubmit" runat="server" Text="Submit" 
            onclick="quadraticSubmit_Click" /><br /><br />
     <asp:Label ID="lblQuadratic" runat="server" Text="" CssClass="label"></asp:Label>
    </p>
</div>

クリックコードで（追加のみ、残りは同様です）：

protected void additionSubmit_Click(object sender, EventArgs e)
    {
        if (varA.Text != null && varB.Text != null && varC.Text != null)
        {
            int result = Convert.ToInt32(varA.Text) + Convert.ToInt32(varB.Text) + Convert.ToInt32(varC.Text);
            lblAddition.Text = " a + b + c = " + result.ToString("#.##") + "\r (a+b+c)";
        }
        else
        {
            lblAddition.Text = "Please input all fields!";
        }
    }

AJAXで上記を達成しようとしています。これが私が今まで持っているものです：

$("#btnSubmit").click(function() {

        $.ajax({
             $('#addition,#conversion,#triangle').hide(),
             $('#quadratic').show();
        });
        });
4

2 に答える 2

1

ここではサーバー側とクライアント側の機能を混在させているため、結果が直感的でないように見える場合があります。サーバー側のロジックを実行すると、ページ全体が再読み込みされます。したがって、クライアント側のロジックに関する限り、ページのまったく新しいコンテキストが返されます。したがって、 への最初の呼び出しは、最初のページの読み込みであるかのように をdisplayDiv()表示/非表示にします。div

いくつかのオプションがあります。それぞれの適用可能性と、開発に慣れているもの、またはサポートする必要があるその他の機能はあなた次第です。

  • クライアント側のコードではなく、サーバー側のコードの を表示/非表示divにします。これにより、サーバー側のイベント ハンドラーにロジックを含めて、ページがポストバックしたときに処理されるようにすることができます。また
  • AJAX 呼び出しでサーバー側のロジックを実行して、ポストバックからクライアント側の状態が失われないようにします。また
  • クライアント側でロジックを実行します。

最初のオプションはあなたにとってより快適かもしれませんが、クライアント側の表示/非表示ロジックを置き換えるためにポストバックをさらに実行する必要があるか (UX が貧弱です)、CSS プロパティサーバーの設定に扱いにくいコードが必要になります。クライアント側の CSS プロパティと手動で同期させます。(ヒント:.Visible = false要素がクライアント側でまったくレンダリングされないため、設定できません。)

2 番目のオプションは、おそらく最高の学習体験になるでしょう。

3 番目のオプションは、実行しようとしている残りのロジックをクライアント側でも実行できる場合に最適です。数学の方程式について話しているだけなら、それはおそらく真実です。これにより、どの機能でもネットワークの遅延を待つ必要がないため、最適な UX が得られます。

于 2013-07-08T12:39:01.447 に答える