Question

净

最近我尝试在内容页面中使用我的jquery函数验证一些asp控件。

下面我给出了一些代码，我想验证一个下拉列表，它将检查它下拉列表的选定索引为0.如果为零，则为下拉列表的背景将是红色的。否则它将保持不变。

另一个控件是TextBox。以同样的方式，如果文本框的长度为0，则背景颜色将为是红色的。

点击保存按钮后，验证将开始。

这里我已经在jquery中提供了所有必要的代码。

但问题是当我点击保存按钮时，Dropdown和Textbox都会变红一段时间（1或2秒）然后自动变成白色背景。

    <asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1"   runat="server">
<script>
    $(document).ready(function () {
        var valid = 0;

        // check all fields validity when "Save" Button clicked
        $("#<%= btnSave.ClientID%>").bind("click", function () {
             var validity = validateAllFields();
             if (validity == false) {
                 return false;
             }
             else {
             }
         });
    });

    /// validating all fields
    // if all fields are valid then return true else return false//
    function validateAllFields() {
        var nValid = 0;
        //validate DropDown box
        nValid += checkDropdownList($("#<%= ddl1.ClientID%>")); // check ddl1 is Selected or not

        //validate Text Field
        nValid += checkTBLength($("#<%= tb1.ClientID%>"), 1); // check "tb1" length
        if (nValid > 0) {
            return false;
        }
        else {
            return true;
        }
    }

// check whether the dropdownlist is selected other than "Select Item"
// parametes- idDropdown= id the of the dropdown List
function checkDropdownList(idDropdown) {
    // check if the dropdown selected index is 0 or not
    // if zero then set the background color red
    if ($(idDropdown).prop('selectedIndex') == 0) {
        $(idDropdown).css("background-color", "red").trigger("change"); // set dropdownlist background color to red
        return 1;
    }
    else { // set the background color white
        $(idDropdown).css("border-color", "");
        return 0;
    }
}

/// check minimum required length of the textbox
// Parameters-  idTextbox= id of the textbox, minLength= minimum Required Length
function checkTBLength(idTextbox, minLength) {
    //check if the textbox's lenth is less than minimum Required Length or not
    if ($(idTextbox).val().length < minLength) {
        $(idTextbox).css("background-color", "red"); // set the background textbox color to red
        return 1; // return 1 for validation failed
    }
    else {
        $(idTextbox).css("background-color", "white");// set the background textbox color to red
        return 0; // return 1 for validation passed
    }
}

</script>


<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<div class="form-group">
    <asp:UpdatePanel ID="UP1" runat="server">
        <ContentTemplate>
            <asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true">
                <asp:ListItem Selected="true">Select</asp:ListItem>
            </asp:DropDownList>
        </ContentTemplate>
        <Triggers>
            <asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
        </Triggers>
    </asp:UpdatePanel>
</div>

<div class="span4">
    <div class="form-group">
        <label for="pwd">Query Details</label>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:TextBox ID="tb1" runat="server" TextMode="MultiLine" MaxLength="500" class="form-control" Rows="4" Width="100%"></asp:TextBox>
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="btnSave" EventName="Click" />
            </Triggers>
        </asp:UpdatePanel>
    </div>
</div>

<div class="form-group">
    <asp:Button ID="btnSave" runat="server" Text="Save" class="btn btn-info" OnClick="btnSave_Click" />
</div>
</asp:Content>

请注意，我在两个控件中都使用了AsyncPostBackTrigger。

你能否提一下为什么会这样，以及如何解决它。

谢谢。

在asp.net中，Jquery无法正常工作AsyncPostBackTrigger

0 个答案: