Question

我有一些单独工作的代码但是当我在Master页面添加它时，它无效。我认为jQuery不能与Update Panel一起使用，所以我也删除了它，但仍然没用。我相信这是Master Page的一些问题。任何人都可以看看并给出任何建议。

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master"AutoEventWireup="true"
CodeBehind="Default.aspx.cs" Inherits="AdhocTest._Default" %>

<asp:Content ID="HeaderContent" runat="server"     ContentPlaceHolderID="ContentPlaceHolder2"><b>Adhoc ArchivingTest  Page</b>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="ContentPlaceHolder1">


<script  src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        alert(2);
        function isDate(txtDate) {
            var currVal = txtDate;
            if (currVal == '')
                return false;

            //Declare Regex 
            //  var rxDatePattern = /^(\d{1,2})(\/|-)(\d{1,2})(\/|-)(\d{4})$/;
            var rxDatePattern = /^(\d{4})(\d{1,2})(\d{1,2})(\d{1,2})(\d{1,2})(\d{1,2})$/
            var dtArray = currVal.match(rxDatePattern); // is format OK?

            if (dtArray == null)
                return false;

            //Checks for mm/dd/yyyy format.
            //    dtMonth = dtArray[1];
            //   dtDay = dtArray[3];
            //   dtYear = dtArray[5];


            dtMonth = dtArray[2];
            dtDay = dtArray[3];
            dtYear = dtArray[1];
            ddhours = dtArray[4];
            ddminute = dtArray[5];
            ddseconds = dtArray[6];

            if (ddhours > 24)
                return false;
            if (ddminute > 60)
                return false;
            if (ddseconds > 60)
                return false;

            if (dtMonth < 1 || dtMonth > 12)
                return false;
            else if (dtDay < 1 || dtDay > 31)
                return false;

            else if ((dtMonth == 4 || dtMonth == 6 || dtMonth == 9 || dtMonth == 11) && dtDay == 31)
                return false;
            else if (dtMonth == 2) {
                var isleap = (dtYear % 4 == 0 && (dtYear % 100 != 0 || dtYear % 400 == 0));
                if (dtDay > 29 || (dtDay == 29 && !isleap))
                    return false;
            }
            return true;
        }

        $(function () {



            $('#txtname').blur(function (e) {
                alert(1);
                //     var GetValue = $('#txtname').val();


                var txtVal = $('#txtname').val();

                if (isDate(txtVal))

                    alert('Valid Date format');

                else

                    alert('Invalid Date format');
            });
        });

    });


</script>


<%--
<form id="form1" runat="server">--%>
    <div>
    <asp:Table ID="tblAdhocReq" runat="server" BackColor="White" 
            BorderColor="#999999" BorderStyle="None" BorderWidth="1px" cellpadding="3" 
            cellspacing="5" CssClass="contentheadlinemed" Font-Size="Smaller" 
            GridLines="Both" visible="true">
            <asp:TableRow>
       <asp:TableCell BackColor="#E0E0E0" HorizontalAlign="Right">ENTER REPORT VERSION DATE: : </asp:TableCell><asp:TableCell>
           <asp:TextBox ID="txtname"  runat="server" />
            &nbsp&nbsp<i>(Must enter in format YYYYMMDDHHMMSS)</i>  

        </asp:TableCell><asp:TableCell  BorderWidth="0"><asp:Label ID="Label2"  runat="server" Font-Italic="true" 
            Visible="false" ForeColor="red"/></asp:TableCell></asp:TableRow></asp:Table><%-- <asp:TextBox runat="server" ID="txtname"></asp:TextBox>

         <asp:TextBox runat="server" ID="TextBox1"></asp:TextBox>--%></div><%--</form>--%><%--</ContentTemplate>--%><%--</asp:UpdatePanel>--%><asp:Label id="ADDMsg" ForeColor="Red"  Runat="Server" Font-Bold="true"/>
<br />

Answer 1

这里可能发生了两件事。

首先，您的控件可能被分配了与您提供的控件不同的唯一ID。您可以使用Milind或ZiNNED的建议或按类名引用它们：

<input type="text" id="txtname" class="text-name" runat="server" />

$(".text-name")

另一个原因是，由于您正在使用UpdatePanel，因此一旦更新发生，事件可能会被分离。为了解决这个问题，请使用.on()：

$(document).on("blur", ".text-name", function (e) {
    alert(1);

    var txtVal = $(this).val();

    if (isDate(txtVal)) {
        alert('Valid Date format');
    } else {
        alert('Invalid Date format');
    }
});

Answer 2

这是因为服务器端控件的ID在与母版页一起使用时会被修改。在这种情况下使用ClientID绑定事件：

$('#<%=txtname.ClientID%>').blur(function (e) {
   //rest code
});

Answer 3

使用母版页更改ASP控件的ID。要继续使用您已经习惯的ID，您可以将ClientIDMode属性设置为Static，如下所示：

<asp:TextBox ID="txtname" ClientIDMode="Static" runat="server" />

jQuery不使用母版页

3 个答案: