asp.net - jQuery在按钮单击时重置

Question

我有这个表单，用户从下拉列表中选择选项并显示相应的 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();
        });
        });

score 1 · Accepted Answer

您在这里混合了服务器端和客户端功能，因此结果对您来说可能看起来不直观。当您执行服务器端逻辑时，会重新加载整个页面。因此，就客户端逻辑而言，您得到的是一个全新的页面上下文。displayDiv()因此，您对显示/隐藏s的初始调用就div好像它是初始页面加载一样。

您有几个选项，每个选项的适用性取决于您以及您喜欢开发的内容或您需要支持的其他功能：

在服务器端代码而不是客户端代码中显示/隐藏divs，因此您可以在页面回发时在服务器端事件处理程序中包含要处理的逻辑；或者
在 AJAX 调用中执行服务器端逻辑，这样您就不会从回发中丢失客户端状态；或者
执行逻辑客户端。

第一个选项对您来说可能更舒服，但它将涉及执行更多回发以替换客户端显示/隐藏逻辑（这是糟糕的 UX），或者在设置 CSS 属性服务器时需要一些笨拙的代码 -并手动使它们与客户端 CSS 属性保持同步。（提示：您不能设置.Visible = false，因为这样元素根本不会在客户端呈现。）

第二种选择可能是你最好的学习经历。

如果您要执行的其余逻辑也可以在客户端完成，则第三个选项很棒。如果您只是在谈论数学方程式，那可能是正确的。这将产生最佳的用户体验，因为任何功能都无需等待网络延迟。

score 0 · Accepted Answer

大卫是对的，因为页面正在回发完整的帖子，它会导致“displayDiv”每次调用 ddlist，选择“添加”项目。我们需要一些东西来保存服务器处理正在发生的 ddl 的值。请看一下我已经实现的代码解决了您遇到的问题....

********************** Script Begin*****************
 $(document).ready(function () {
            SetDdlListValue();
            $('#ddlist').change(displayDiv);
            displayDiv();
        });

        function SetDdlListValue() {
            var hidValue = $('#<%= hidListSelectedValue.ClientID %>').val();
            if (hidValue != '') {
                $("#ddlist").val(hidValue);
            }
        }

        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;
                }

            }
********************** Script End *****************

**********************Add hidden control at aspx*****

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

*****************************************************

********************** .cs page code Begin*********

string[] ddlListValues = new string[] { "addition", "conversion", "triangle", "quadratic" };

        protected void Page_Load(object sender, EventArgs e)
        {
        }

        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)";
                hidListSelectedValue.Value = ddlListValues[0];
            }
            else
            {
                lblAddition.Text = "Please input all fields!";
            }
        }

        protected void converstionSubmit_Click(object sender, EventArgs e)
        {
            hidListSelectedValue.Value = ddlListValues[1];
        }

        protected void triangleSubmit_Click(object sender, EventArgs e)
        {
            hidListSelectedValue.Value = ddlListValues[2];
        }

        protected void quadraticSubmit_Click(object sender, EventArgs e)
        {
            hidListSelectedValue.Value = ddlListValues[3];
        }

********************** .cs page code End*********

asp.net - jQuery在按钮单击时重置

2 回答 2

Related

Reference