Jquery UI未在ASP.NET页面中加载
我正在尝试将Jquery日期选择器分配给一个aspx页面，但无论我怎么努力，Jquery似乎都没有加载。这是我的网页代码
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> Movie Form</title>
<style type="text/css">
* {margin: 0; padding: 0; border: 0; line-height: -1; font-family: 'Arial Rounded MT', Verdana, Tahoma, sans-serif;}
body {background: white url('bg.jpg') top left repeat-x;}
h1 {color: white; margin-bottom: 8px;}
#wrapper {margin: 0 auto; width: 450px;}
#content {margin: 100px 0 20px 0; padding: 40px 20px; border: 10px solid white; width: 380px; background: #4ec0e5;background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzRlYzBlNSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzMjk2YjYiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);background: -moz-linear-gradient(top, #4ec0e5 0%, #3296b6 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#4ec0e5), color-stop(100%,#3296b6));background: -webkit-linear-gradient(top, #4ec0e5 0%,#3296b6 100%);background: -o-linear-gradient(top, #4ec0e5 0%,#3296b6 100%);background: -ms-linear-gradient(top, #4ec0e5 0%,#3296b6 100%);background: linear-gradient(top, #4ec0e5 0%,#3296b6 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#4ec0e5', endColorstr='#3296b6',GradientType=0 );-moz-border-radius: 52px;border-radius: 52px;}
.rqd {color: #f00;}
#buttons{margin-top: 20px;text-align: center;}
#submit, #reset {-moz-box-shadow:inset 0px 1px 0px 0px #ffffff;-webkit-box-shadow:inset 0px 1px 0px 0px #ffffff;box-shadow:inset 0px 1px 0px 0px #ffffff;background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #ededed), color-stop(1, #dfdfdf) );background:-moz-linear-gradient( center top, #ededed 5%, #dfdfdf 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ededed', endColorstr='#dfdfdf');background-color:#ededed;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;border:1px solid #dcdcdc;display:inline-block;color:#777777;padding:6px 24px;text-decoration:none;text-shadow:1px 1px 0px #ffffff;}
#submit:hover, #reset:hover {background:-webkit-gradient( linear, left top, left bottom, color-stop(0.05, #dfdfdf), color-stop(1, #ededed) );background:-moz-linear-gradient( center top, #dfdfdf 5%, #ededed 100% );filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#dfdfdf', endColorstr='#ededed');background-color:#dfdfdf;}
#ValidationSummary1 ul{list-style: none; margin: 10px 0 0 10px; font-size: smaller;color: white;}
#ValidationSummary1 li{border-bottom: 1px solid red;}
#resultLbl{margin: 10px 0 0 10px; font-size: smaller;color: white;}
</style>
<!--[if gte IE 9]>
<style type="text/css">
.gradient {
filter: none;
}
</style>
<![endif]-->
<link type="text/css" href="css/ui-lightness/jquery-ui-1.8.18.custom.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.18.custom.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="wrapper">
<div id="content" class="gradient">
<h1>Movie <strong>Form</strong></h1>
<asp:Table ID="Table1" runat="server" Width="380px">
<asp:TableRow>
<asp:TableCell Width="45%">
<span class="rqd">*</span> <asp:Label ID="fNameLbl" runat="server" Text="First Name"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="fName" runat="server" Width="140px"></asp:TextBox>
<asp:RequiredFieldValidator ID="fNameRqd" ControlToValidate="fName" runat="server" Text=" <img src='err.png' alt='*' title='Please enter your first name'>" ErrorMessage="Please enter your first name"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="fNameReg" ControlToValidate="fName" runat="server" ValidationExpression="^[\s\S]{0,40}$" Text=" <img src='err.png' alt='*' title='Your name can be no more than 40 characters'>" ErrorMessage="Your name can be no more than 40 characters"></asp:RegularExpressionValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="address1lbl" runat="server" Text="Address Line 1"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="address1" runat="server" Width="140px"></asp:TextBox>
<asp:RequiredFieldValidator ID="address1Rqd" runat="server" ControlToValidate="address1" Text=" <img src='err.png' alt='*' title='Please enter your address'>" ErrorMessage="Please enter your address"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="address1Reg" ControlToValidate="address1" runat="server" ValidationExpression="^[\s\S]{0,120}$" Text=" <img src='err.png' alt='*' title='Your address can be no more than 120 characters'>" ErrorMessage="Your address can be no more than 120 characters"></asp:RegularExpressionValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="townlbl" runat="server" Text="Town/City"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="town" runat="server" Width="140px"></asp:TextBox>
<asp:RequiredFieldValidator ID="townRqd" runat="server" ControlToValidate="town" Text=" <img src='err.png' alt='*' title='Please enter your Town/City'>" ErrorMessage="Please enter your Town/City"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="townReg" ControlToValidate="town" runat="server" ValidationExpression="^[\s\S]{0,76}$" Text=" <img src='err.png' alt='*' title='Your Town/City name can be no more than 76 characters'>" ErrorMessage="Your Town/City name can be no more than 76 characters"></asp:RegularExpressionValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="postcodelbl" runat="server" Text="Postcode"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="postcode" runat="server" Width="140px"></asp:TextBox>
<asp:RequiredFieldValidator ID="postcodeRqd" runat="server" ControlToValidate="postcode" Text=" <img src='err.png' alt='*' title='Please enter your Postcode'>" ErrorMessage="Please enter your Postcode"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="postcodeReg" runat="server" ControlToValidate="postcode" ValidationExpression="\d{4}" Text=" <img src='err.png' alt='*' title='Your Postcode can only be 4 digits long'>" ErrorMessage="Your Postcode can only be 4 digits long"></asp:RegularExpressionValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="emaillbl" runat="server" Text="Email"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="email" runat="server" Width="140px"></asp:TextBox>
<asp:RequiredFieldValidator ID="emailRqd" runat="server" ControlToValidate="email" Text=" <img src='err.png' alt='*' title='Please enter your email'>" ErrorMessage="Please enter your email"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="emailReg" runat="server" ControlToValidate="email" ValidationExpression="^(?=.{0,100}$)\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$" Text=" <img src='err.png' alt='*' title='Please enter a valid email address less than 100 characters long'>" ErrorMessage="Please enter a valid email address less than 100 characters long"></asp:RegularExpressionValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="phonelbl" runat="server" Text="Phone No."></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="phone" runat="server" Width="140px"></asp:TextBox>
<asp:RequiredFieldValidator ID="phoneReq" runat="server" ControlToValidate="phone" Text=" <img src='err.png' alt='*' title='Please enter your phone number'>" ErrorMessage="Please enter your phone number"></asp:RequiredFieldValidator>
<asp:RegularExpressionValidator ID="phoneReg" runat="server" ControlToValidate="phone" ValidationExpression="\d{0,14}" Text=" <img src='err.png' alt='*' title='Your phone number can be no longer than 14 digits'>" ErrorMessage="Your phone number can be no longer than 14 digits"></asp:RegularExpressionValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="doblbl" runat="server" Text="D.O.B"></asp:Label> <span style="font-style: italic; font-size: x-small;">(dd/mm/yyy)</span>
</asp:TableCell>
<asp:TableCell>
<asp:TextBox ID="dob" runat="server" Width="140px" CssClass="datePicker"></asp:TextBox>
<asp:RequiredFieldValidator ID="dobRqd" runat="server" ControlToValidate="dob" Text=" <img src='err.png' alt='*' title='Please enter your Date of Birth'>" ErrorMessage="Please enter your Date of Birth"></asp:RequiredFieldValidator>
<asp:CompareValidator id="dateValidator" runat="server" Type="Date" Operator="DataTypeCheck" ControlToValidate="dob" Text=" <img src='err.png' alt='*' title='Please enter a valid date in the format dd/mm/yyy'>" ErrorMessage="Please enter a valid date in the format dd/mm/yyy"></asp:CompareValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="movielbl" runat="server" Text="Favourite Move"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:DropDownList ID="movie" runat="server" Width="140px">
<asp:ListItem>We Bought a Zoo</asp:ListItem>
<asp:ListItem>The Breakfast Club</asp:ListItem>
<asp:ListItem>Puss in Boots</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="movieReq" runat="server" ControlToValidate="movie" Text=" <img src='err.png' alt='*' title='Please pick a movie'>" ErrorMessage="Please pick a movie"></asp:RequiredFieldValidator>
</asp:TableCell>
</asp:TableRow>
<asp:TableRow>
<asp:TableCell>
<span class="rqd">*</span> <asp:Label ID="genderlbl" runat="server" Text="Gender"></asp:Label>
</asp:TableCell>
<asp:TableCell>
<asp:DropDownList ID="gender" runat="server" Width="140px">
<asp:ListItem Value="male">Male</asp:ListItem>
<asp:ListItem Value="female">Female</asp:ListItem>
</asp:DropDownList>
<asp:RequiredFieldValidator ID="genderReq" runat="server" ControlToValidate="gender" Text=" <img src='err.png' alt='*' title='Please pick a gender'>" ErrorMessage="Please pick a gender"></asp:RequiredFieldValidator>
</asp:TableCell>
</asp:TableRow>
</asp:Table>
<div id="buttons">
<asp:Button ID="submit" runat="server" Text="Submit" OnClick="Submit_Click" /> <input type="reset" name="reset" value="Clear" id="reset" />
</div>
<asp:Label ID="resultLbl" runat="server"></asp:Label>
<asp:ValidationSummary ID="ValidationSummary1" runat="server" />
</div>
</div>
</form>
<script>
$(function () {
$(".datePicker").datepicker({
changeMonth: true,
changeYear: true,
showOn: "button",
buttonImage: "calendar.gif",
buttonImageOnly: true,
dateFormat: 'dd-mm-yy'
});
})();
</script>
</body>
</html>
CS档案
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void Submit_Click(object sender, EventArgs e)
{
if (Page.IsValid)
{
resultLbl.Text = "Congratulations this is valid data!";
}
}
}
所有文件都是正确的，它们都在那里，它不会显示。有什么想法吗？
我还尝试了底部脚本中的id为＃＆lt;％= dob.ClientID％＆gt;有些人建议，但它不会加载。
3 个答案:
答案 0 :(得分：3)
您是否尝试过首先声明jquery脚本引用？
<script type="text/javascript" src="Scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.8.18.custom.min.js"></script>
更新！正如我在下面的评论中所说，我得到了它的工作，只需删除该行：
showOn: "button"
答案 1 :(得分：1)
假设您发布了完整的代码，我可以想到两件事：
-
您好像没有引用jQuery UI的CSS文件。它是必需的，应该是您下载的软件包的一部分。您的默认名称应与
jquery-ui-1.8.18.custom.css类似。请记住，css还指的是需要位于相对于css文件的正确位置的许多静态资源。 jQuery UI Getting Started Guide具有正确设置jQuery UI所需的所有信息。 -
由于您似乎已经下载了jQuery UI的自定义版本，您是否记得要包含DatePicker小部件？
答案 2 :(得分：-1)
底部的脚本语句可能需要另一组括号来实际运行该函数。现在它被宣布但没有被运行。
<script>
$(function () {
$(".datePicker").datepicker({
changeMonth: true,
changeYear: true,
showOn: "button",
buttonImage: "calendar.gif",
buttonImageOnly: true,
dateFormat: 'dd-mm-yy'
});
})();
</script>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？