您好我正在asp.net中创建一个网站,并试图在我的页面中包含一个jquery,但是jquery无效。 我试图将jquery插入非母版页。
我的代码是:
<%@ Page Title="Register" Language="C#" MasterPageFile="~/User.master" AutoEventWireup="true"
CodeFile="~/Register.aspx.cs" Inherits="Account_Register" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContentHolder">
<link href="Styles/register.css" rel="Stylesheet" type="text/css" />
<style type="text/css">
ul#stepForm, ul#stepForm li {
margin: 0;
padding: 0;
}
ul#stepForm li {
list-style: none outside none;
}
label{margin-top: 10px;}
.help-inline-error{color:red;}
</style>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div class="container" style="padding-left: 0px; padding-right: 15px;">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Complete your Registration in 3 easy steps..</h3>
</div>
<div class="panel-body">
<form name="basicform" id="basicform" class="basicform" method="post" action="Register.aspx">
<div id="sf1" class="frm">
<fieldset>
<legend>Step 1 of 3</legend>
<div class="form-group">
<label class="col-lg-2 control-label" for="uname">Your Name: </label>
<div class="col-lg-6">
<input type="text" placeholder="Your Name" id="uname" name="uname" class="form-control" autocomplete="off" runat="server" />
</div>
</div>
<div class="clearfix" style="height: 10px;clear: both;"></div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button class="btn btn-primary open1" type="button" runat="server">Next <span class="fa fa-arrow-right"></span></button>
</div>
</div>
</fieldset>
</div>
<div id="sf2" class="frm" style="display: none;">
<fieldset>
<legend>Step 2 of 3</legend>
<div class="form-group">
<label class="col-lg-2 control-label" for="uemail">Your Email: </label>
<div class="col-lg-6">
<input type="text" placeholder="Your Email" id="uemail" name="uemail" class="form-control" autocomplete="off">
</div>
</div>
<div class="clearfix" style="height: 10px;clear: both;"></div>
<div class="clearfix" style="height: 10px;clear: both;"></div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button class="btn btn-warning back2" type="button"><span class="fa fa-arrow-left"></span> Back</button>
<button class="btn btn-primary open2" type="button">Next <span class="fa fa-arrow-right"></span></button>
</div>
</div>
</fieldset>
</div>
<div id="sf3" class="frm" style="display: none;">
<fieldset>
<legend>Step 3 of 3</legend>
<div class="form-group">
<label class="col-lg-2 control-label" for="upass1">Password: </label>
<div class="col-lg-6">
<input type="password" placeholder="Your Password" id="upass1" name="upass1" class="form-control" autocomplete="off">
</div>
</div>
<div class="clearfix" style="height: 10px;clear: both;"></div>
<div class="form-group">
<label class="col-lg-2 control-label" for="upass1">Confirm Password: </label>
<div class="col-lg-6">
<input type="password" placeholder="Confirm Password" id="upass2" name="upass2" class="form-control" autocomplete="off">
</div>
</div>
<div class="clearfix" style="height: 10px;clear: both;"></div>
<div class="form-group">
<div class="col-lg-10 col-lg-offset-2">
<button class="btn btn-warning back3" type="button"><span class="fa fa-arrow-left"></span> Back</button>
<button class="btn btn-primary open3" type="button">Submit </button>
<img src="images/register/spinner.gif" alt="" id="loader" style="display: none">
</div>
</div>
</fieldset>
</div>
</form>
</div>
</div>
</div>
<div id="progress_bar">
<div id="progress"></div>
<div id="progress_text">0% Complete</div>
</div>
</asp:Content>
<asp:Content ID="JavascriptContent" runat="server" ContentPlaceHolderID="JavascriptContentHolder">
<script type="text/javascript">
jQuery().ready(function () {
// validate form on keyup and submit
var v = jQuery("#basicform").validate({
rules: {
uname: {
required: true,
minlength: 2,
maxlength: 16
},
uemail: {
required: true,
minlength: 2,
email: true,
maxlength: 100
},
upass1: {
required: true,
minlength: 6,
maxlength: 15
},
upass2: {
required: true,
minlength: 6,
equalTo: "#upass1"
}
},
errorElement: "span",
errorClass: "help-inline-error"
});
$(".open1").click(function () {
if (v.form()) {
$(".frm").hide("fast");
$("#sf2").show("slow");
}
});
$(".open2").click(function () {
if (v.form()) {
$(".frm").hide("fast");
$("#sf3").show("slow");
}
});
$(".open3").click(function () {
if (v.form()) {
$("#loader").show();
setTimeout(function () {
$("#basicform").html('<h2>Thanks for your time.</h2>');
}, 1000);
return false;
}
});
$(".back2").click(function () {
$(".frm").hide("fast");
$("#sf1").show("slow");
});
$(".back3").click(function () {
$(".frm").hide("fast");
$("#sf2").show("slow");
});
});
我的母版页中有3个内容占位符,所有必需的js文件都已导入:
<script src="Scripts/jquery-2.1.3.min.js" type="text/javascript" />
<script src="Scripts/jquery-ui-1.11.4.min.js" type="text/javascript" />
<script src="Scripts/bootstrap.min.js" type="text/javascript" />
<script src="Scripts/jquery.easing.1.3.js" type="text/javascript" />
<script src="Scripts/jquery.inputfocus-0.9.min.js" type="text/javascript" />
<script src="Scripts/jquery.main.js" type="text/javascript" />
<script src="Scripts/jquery.validate.js" type="text/javascript" />
<asp:ContentPlaceHolder id="JavascriptContentHolder" runat="server">
</asp:ContentPlaceHolder>
母版页的负责人是:
<title></title>
<link href="Content/bootstrap.css" rel="Stylesheet" type="text/css" />
<link href="Content/bootstrap-theme.css" rel="Stylesheet" type="text/css" />
<link href="Content/normalize.css" rel="Stylesheet" type="text/css" />
<link href="Content/font-awesome.css" rel="Stylesheet" type="text/css" />
<link href="Styles/style.css" rel="Stylesheet" type="text/css" />
<asp:ContentPlaceHolder id="HeadContentHolder" runat="server">
</asp:ContentPlaceHolder>