Question

我有这个表单，用户从下拉列表中选择选项，并显示相应的div。但是我的问题是当单击提交按钮时，on click方法正在成功执行但当前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();
        });
        });

Answer 1

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

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

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

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

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

如果你想要执行的其余逻辑也可以在客户端完成，那么第三个选项很棒。如果你只是在谈论数学方程，那么这可能是真的。这将导致最好的用户体验，因为没有等待任何功能的网络延迟。

Answer 2

大卫是正确的，因为页面正在完整回发它导致“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*********

单击按钮时jQuery重置

2 个答案: