Question

我一直在尝试让jquery datepicker插件在内容页面上运行，但是根本无法让页面执行任何jquery。我设法让我的主页上的日期选择器工作，而不是内容页面。另外firefox的firebug工具没有发现任何javascript错误。如果有人有一个解决方案，使我的内容页面上的日期选择器工作，这将是伟大的。提前致谢。

.ASPX：

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
  <script type="text/javascript">
    $(document).ready(function () {
      $("#TextBoxConnectedOn").datepicker();
    });
  </script>
</asp:Content> 

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
  <input type="text" name="TextBoxConnectedOn" id="TextBoxConnectedOn" 
  runat="server" MaxLength="10"/>  
</asp:Content>

Masterpage head：

<head runat="server">
  <link type="text/css" href="pages/scripts/themes/ui-darkness/jquery.ui.all.css"
  rel="stylesheet" />
  <script type="text/javascript" src="scripts/jquery-1.4.2.js"></script>
  <script type="text/javascript" src="scripts/ui/jquery.ui.core.min.js"></script> 
  <script type="text/javascript" src="scripts/ui/jquery.ui.datepicker.min.js"></script>
  <asp:ContentPlaceHolder ID="HeadContent" runat="server">
  </asp:ContentPlaceHolder>
</head>

EDIT
我将“#TextBoxConnectedOn”更改为“＃＆lt;％= TextBoxConnectedOn.ClientID％＆gt;”现在，当我点击输入时，firebug显示它加载了所需的图片，但它仍然没有显示日期选择器。我的问题主题和沮丧的主要来源是jquery没有执行，所以我想这篇文章得到了回答，感谢所有的信息，我看看我是否能找出它为什么不显示

Answer 1

作为服务器生成的控件，输入框的id实际上不是TextBoxConnectedOn; ASP.NET将为您生成id。在浏览器中查看该页面的来源以验证这一点。

您有两种选择：

从控件中删除runat="server"属性，使其成为常规HTML元素（它确实需要由服务器生成吗？），或者
引用正确的id

像这样：

 <script type="text/javascript">
   $(document).ready(function () {
     $("#<%= TextBoxConnectedOn.ClientID %>").datepicker();
   });
 </script>

修改

根据@ jbn的评论，从ASP.NET 4开始，您可以通过将服务器控件ClientIDMode设置为Static来告诉服务器控件使用静态ID。

Answer 2

之前我遇到过类似的问题，jQuery被加载到母版页上，然后是内容页面，这导致内容页面上的jQuery无法正常工作，所以请查看firebug中的.net选项卡确保jQuery只被加载一次。

希望这有帮助

Answer 3

 <script type="text/javascript" src='<%=Url.Content("~/scripts/ui/jquery.ui.core.min.js")%>'></script>

这通常是由于路由的工作原理导致js文件无法加载的结果。尝试使用Url.Content（）方法，如上所示。

Answer 4

这是因为您的内容页面会更改input type="text"的ID。

有两种方法可以解决这个问题。

（a）给一个类输入类型并使用它调用它。

<input type="text" name="TextBoxConnectedOn" id="TextBoxConnectedOn" 
  runat="server" MaxLength="10" class="mypicker/>

现在称之为

$(document).ready(function () {
  $(".mypicker").datepicker();
});

（b）使HTMLControl成为ASP.NET控件并设置ClientIDMode="static"

<asp:TextBox ID="TextBoxConnectedOn"  runat="server" 
        ClientIDMode="Static"
        Width="240">
</asp:TextBox>

然后无需更改脚本。

内容页面中的JQuery未执行

4 个答案: