JQuery Datepicker 不能在具有用户控件的同一个 Web 表单中工作吗？

Question

我有一个具有用户控件的 ASP.NET Web 表单，即 Loading.ascx，它只在页面中央包含一个 .gif。这用于在用户单击页面中的任何 button/link 时显示加载图像。

该页面还有一个 asp:TextBox，它链接到 JQuery Datepicker。在运行程序中，出现以下错误：

未捕获类型错误：无法读取未定义的属性 'setDefaults'

最初我在 Stack Overflow 上做了一些研究，但 none 的解决方案对我有用。在做一些随机工作时，我从 aspx 页面中删除了 .ascx Register 命令：

<%@ Register Src="~/Common/Loading.ascx" TagName="LoadingScreen" TagPrefix="UC" %>

日期选择器没有任何问题运行。所有问题都得到解决。当我尝试在带有 JQuery Datepicker 的 .aspx 中使用 .ascx 文件时，谁能帮我理解出了什么问题？

下面是Loading.ascx、

的代码

> <%@ Control Language="vb" AutoEventWireup="false"
> CodeBehind="Loading.ascx.vb" Inherits="eLearnWebRole.Loading" %>
> <script
> src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"
> type="text/javascript"></script>
> 
> <style>    #divLoading{
>       display: none; 
>       width: 100%; 
>       background-color: rgba(255,246,246,0.5); 
>       top: 0px; 
>       left: 0px; 
>       position: absolute; 
>       text-align: center; 
>       vertical-align: middle;
>       z-index: 99999;    }
>        #divLoadingImage{
>       position: absolute; 
>       display: block;
>       width: 200px;
>       height: 200px;    }
> 
> </style>
> 
> <div id="divLoading">    <div id="divLoadingImage">
>       <asp:Image ID="imgLoading" AlternateText="LoadMsg" ImageUrl="~/Common/Images/Loading.gif" runat="server" />    </div>
> </div>
> 
> <script>    $(document).ready(function () {
> 
>       $("#divLoadingImage").css({
>          "left": (($(window).width() - $("#divLoadingImage").width()) / 2) + "px",
>          "top": (($(window).height() - $("#divLoadingImage").height()) / 2) + "px"
>       });
> 
>       $("#divLoading").height($(document).height());
> 
>       $(window).resize(function () {
>          $("#divLoading").height($(window).height());
> 
>          $("#divLoadingImage").css({
>             "left": (($(window).width() - $("#divLoadingImage").width()) / 2) + "px",
>             "top": (($(window).height() - $("#divLoadingImage").height()) / 2) + "px"
>          });
>       });
> 
>    }); </script>

下面是注册了 .ascx 代码的 Aspx 代码片段：

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="StudentActivityReport.aspx.vb" Inherits="eLearnWebRole.StudentActivityReport" %>

<%--Cannot use Loading.ascx with pages that have datepicker.  Have to find an alternative to use both loading.ascx and datepicker in the same page--%>
<%--<%@ Register Src="~/Common/Loading.ascx" TagName="LoadingScreen" TagPrefix="UC" %>--%>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title>Page Title goes here</title>
   <link rel="stylesheet" href="Style/jquery-ui.min.css" />
   <link rel="stylesheet" href="Style/jquery-ui.theme.min.css" />
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

   <script src="Script/jquery-ui.min.js"></script>

</head>

<body>
   <form id="form1" runat="server">
.
.
.
.
                     <asp:RadioButton ID="rdoViewFrom" Value="Between" GroupName="rdogroupWeeklyOrViewFrom" AutoPostBack="true" runat="server"></asp:RadioButton>View From:  
                     <asp:TextBox ID="txtCalFromDate" runat="server" AutoPostBack="true"></asp:TextBox>
                     To:
                  <asp:TextBox ID="txtCalToDate" runat="server" AutoPostBack="true"></asp:TextBox>
.
.
.
.
</form>
</body>
</html>

以下是将默认设置为 datepicker 时出错的 .js 文件：

$(document).ready(function () {
.
.
.
.
   $.datepicker.setDefaults({    //Throws an error here.
      changeMonth: true,
      changeYear: true,
      dateFormat: "dd/mm/yy",
      defaultDate: new Date(),
      firstDay: 1,
      nextText: "Next",
      prevText: "Prev",
      showAnim: "fold",
      showOn: "focus"
   });
.
.
.

});

提前致谢。

Answer 1

您不需要在用户控件中再次添加 Jquery 文件，因为您已经在调用的 aspx 页面中引用了它们这个 UserControl.
尝试将您的 $("#divLoadingImage").css() 移动到 aspx 页面

JQuery Datepicker 不能在具有用户控件的同一个 Web 表单中工作吗？

Does JQuery Datepicker not work in the same web form that has a User Control?

asp.net

webforms

user-controls

jquery-ui-datepicker