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

时间:2016-09-22 16:34:15

标签: asp.net webforms user-controls jquery-ui-datepicker

我有一个ASP.NET Web表单,它有一个用户控件,即Loading.ascx,它只包含页面中心的.gif文件。这用于在用户点击页面中的任何按钮/链接时显示加载图像。

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

未捕获的TypeError:无法读取未定义的属性'setDefaults'

最初我在Stack Overflow做了一些研究,但没有一个解决方案适合我。在做一些随机工作时,我从aspx页面中删除了.ascx Register命令:

<%@ Register Src =“〜/ Common / Loading.ascx”TagName =“LoadingScreen”TagPrefix =“UC”%>

并且datepicker没有运行任何问题。所有问题都得到解决。当我尝试在带有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"
   });
.
.
.

});

提前致谢。

1 个答案:

答案 0 :(得分:0)

  1. 您不需要在Usercontrol中再次添加Jquery文件 你已经在你打电话的aspx页面中引用了它们 这个UserControl。

  2. 尝试将$("#divLoadingImage").css()移至aspx页面