javascript在使用母版页的内容页面中不起作用

时间:2012-10-08 21:02:39

标签: javascript asp.net

我使用了一种javascript,当我在没有母版页的页面中使用它时它可以正常工作但是当我在使用母版页的内容页面中使用它时它不起作用我应该怎么做才能解决这个问题?

我不在javascript的masterpage中使用任何代码是否有必要?

//Page1 without MasterPage
....
<head runat="server">
    <link rel="stylesheet" href="StyleSheet.css" type="text/css" media="screen"/>
    <script src="jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="jquery.maskedinput.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () 
        {
            $.mask.definitions['~'] = "[+-]";
            $("#date").mask("99/99/9999"); //Date
            $("input").blur(function () 
            {
                $("#info").html("Unmasked value: " + $(this).mask());
            }).dblclick(function () {
                $(this).unmask();
            });
        });
    </script>
</head>
....
<body>
    <form id="form1" runat="server">
    date :  <asp:TextBox ID="date"  runat="server" ></asp:TextBox>
.....

//page2 with MasterPage
...
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
   <link rel="stylesheet" href="StyleSheet.css" type="text/css" media="screen"/>
    <script src="jquery.maskedinput.js" type="text/javascript" charset="utf-8"></script>
    <script src="jquery-1.4.4.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () 
        {
            $.mask.definitions['~'] = "[+-]";
            $("#date").mask("99/99/9999"); //Date
            $("input").blur(function () 
            {
                $("#info").html("Unmasked value: " + $(this).mask());
            }).dblclick(function () {
                $(this).unmask();
            });
        });
    </script>
</asp:Content>
....
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
     date : <asp:TextBox ID="date"  runat="server" ></asp:TextBox>
</asp:Content>


//Master Page
...
<head runat="server">
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

2 个答案:

答案 0 :(得分:1)

在asp.net中,当UserControl放置在容器中时,将重新计算其包含的控件的唯一ID,以避免同一类型的多个控件出现问题。即使对于母版页内的页面也是如此。

要检索页面中控件的正确唯一ID,您需要编写类似这样的内容

$("#<%= date.ClientID %>").mask("99/99/9999");

<%= ... %>将在运行时进行评估并替换为正确的id(ClientID是asp.net控件的一个属性,它包含要呈现的控件的唯一ID)

答案 1 :(得分:0)

渲染控件的ID与您调用的ID不同。

如果您查看发送到浏览器的HTML源代码,您的date控件实际上会被称为ct100_date

因此,找到实际呈现的ID并将$("#date")更改为$("#ct100_date")

例如,您查看源代码并在呈现的HTML中找到您的文本框控件,它将类似于:

<input type="text" id="ct100_date" />

如果您搜索控件的完全 id,浏览器上运行的Javascript \ jQuery将只能找到该控件。因此,请使用HTML中的id控件并使用(例如$("#ct100_date")

进行搜索