Question

的后续问题

我尝试使用此页面中建议的jQuery UI DatePicker：http://www.aspsnippets.com/Articles/jQuery-UI-DatePicker-Calendar-Example-in-ASPNet.aspx

当我在SINGLE webform中测试代码时，它就像一个魅力。

但是，当我尝试将它们与Masterpage和Contentpage合并时，我似乎无法让日历再次运作。

这是我到目前为止所尝试的：

在Masterpage中，我在script scr中添加了link和Head：

<head runat="server">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%: Page.Title %> - My ASP.NET Application</title>

<asp:PlaceHolder runat="server">
    <%: Scripts.Render("~/bundles/modernizr") %>
</asp:PlaceHolder>
<webopt:bundlereference runat="server" path="~/Content/css" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />

<%--added below--%>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" type="text/javascript"></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="Stylesheet" type="text/css" />

</head>

以下是Contentpage

中代码的一部分

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Test2._Default" %>
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
<script type="text/javascript">
    $(function () {
        $("[id$=txtDate]").datepicker({
            showOn: 'button',
        });
    });
</script>
<asp:TextBox ID="txtDate" runat="server" ReadOnly="true" Width="250px"></asp:TextBox>

我到底错过了什么？

Answer 1

使用母版页时，使用runat="server"指定的每个控件实际上都不会具有您指定的ID。如果您查看生成的页面源，则可以看到它具有的ID。

要获取实际ID，请尝试执行以下操作：

<script type="text/javascript">
    $(document).ready(function () {
        $("#<%= txtDate.ClientID %>").datepicker({
            showOn: 'button',
        });
    });
</script>
<asp:TextBox ID="txtDate" runat="server" ReadOnly="true" Width="250px"></asp:TextBox>

如果您正在使用UpdatePanel并且看到控件未被绑定，请将$(document).ready(function (){ ... });替换为function pageLoad() { ... }。

确保JavaScript也位于内容/正文标记的末尾。这将确保在所有页面控件之后最后加载。

所以它应该像

    // all my page content ...
    <script type="text/javascript">
        //sweet JS
    </script>
</asp:Content>

jQuery DatePicker无法使用母版页

1 个答案: