我目前正在做一个注册页面。 我首先在html中完成它，它让我在我的登录，注册和忘记密码表单之间移动，这些表单都位于html的同一页面上，但表单只是通过JavaScript改变了形状和功能，成为登录表单密码表格和注册表格取决于点击的链接。
它在html中运行良好，但在asp.net中，它根本不起作用。
是asp.net的新手，因为它一直在html中工作。
有谁知道如何在asp.net中使用javaScript代码。
Javascript代码位于此asp.net页面的末尾
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="registration.aspx.cs" Inherits="DocStore_asp.registration" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>DocStore Registration & Login Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<meta name="description" content="Expand, contract, animate forms with jQuery wihtout leaving the page" />
<meta name="keywords" content="expand, form, css3, jquery, animate, width, height, adapt, unobtrusive javascript"/>
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon"/>
<link rel="stylesheet" type="text/css" href="registrationcss/registrationstyle.css" />
<script src="js/cufon-yui.js" type="text/javascript"></script>
<script src="js/ChunkFive_400.font.js" type="text/javascript"></script>
<script type="text/javascript">
Cufon.replace('h1', { textShadow: '1px 1px #fff' });
Cufon.replace('h2', { textShadow: '1px 1px #fff' });
Cufon.replace('h3', { textShadow: '1px 1px #000' });
Cufon.replace('.back');
</script>
</head>
<body>
<form id="form1" runat="server">
<div class="wrapper">
<h1>DocStore Registration & Login </h1>
<h2></h2>
<div class="content">
<div id="form_wrapper" class="form_wrapper">
<form class="register active" action="registered_users.aspx" method="post" id="regusers" >
<h3>Register</h3>
<p></p>
<h2>Please fill out the form below to register for a DocStore Account. Access your account today!</h2>
<p><strong> - Note: Fields with an asterik (*) are required.</strong></p>
<p><strong> - Note: Password must contain at least 8 characters.</strong></p>
</form>
<div class="column">
<div>
<label>*Company Name:</label>
<input type="text" name="company_name"/>
<span class="error">This is an error</span>
</div>
<div>
<label>*Company Address:</label>
<input type="text" name="company_address" />
<span class="error">This is an error</span>
</div>
<div>
<label>*Address Line 2:</label>
<input type="text" name="address_line2" />
<span class="error">This is an error</span>
</div>
</div>
<div class="column">
<div>
<label>*Town:</label>
<input type="text" name="town"/>
<span class="error">This is an error</span>
</div>
<div>
<label>*City:</label>
<input type="text" name="city"/>
<span class="error">This is an error</span>
</div>
<div>
<label>*County:</label>
<input type="text" name="county"/>
<span class="error">This is an error</span>
</div>
</div>
<div class="column">
<div>
<label>*First Name</label>
<input type="text" name="first_name"/>
<span class="error">This is an error</span>
</div>
<div>
<label>*Surname</label>
<input type="text" name="surname" />
<span class="error">This is an error</span>
</div>
<div>
<label>*Email Address</label>
<input type="text" name="useremail"/>
<span class="error">This is an error</span>
</div>
</div>
<div class="column">
<div>
<label>*Username</label>
<input type="text" name="username"/>
<span class="error">This is an error</span>
</div>
<div>
<asp:Label ID="lblpassword" runat="server" Text="Password"></asp:Label>
<asp:TextBox ID="txtPassword" runat="server" TextMode="Password" > </asp:TextBox>
<asp:RegularExpressionValidator ID="valPassword" runat="server"
ErrorMessage="Password must contain between 8 - 15 characters"
ControlToValidate="txtpassword"
ValidationExpression="[a-zA-Z'.\s]{8,15}$"></asp:RegularExpressionValidator>
</div>
<div>
<label>*Re-enter Password</label>
<input type="password" name="re_password" />
<span class="error">This is an error</span>
</div>
</div>
<div class="bottom">
<div class="remember">
<input type="checkbox" />
<span>Email me DocStore updates</span>
</div>
<input type="submit" value="Register" />
<a href="registration.aspx" rel="login" class="linkform">You have a DocStore account already? Log in here</a>
<a href="home.aspx">Return to DocStore HomePage</a>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</form>
<form class="login" action="registered_users.aspx" method="post" id="regusers1" >
<h3>Login</h3>
<p><strong> <i> *Please enter your username and password in order to access your account.</i></strong></p>
<div>
<label>Username:</label>
<input type="text" name="username" />
<span class="error">This is an error</span>
</div>
<div>
<label>Password: <a href="registration.aspx" rel="forgot_password" class="forgot linkform">Forgot your password?</a></label>
<input type="password" />
<span class="error">This is an error</span>
</div>
<div class="bottom">
<div class="remember"><input type="checkbox" /><span>Keep me logged in</span></div>
<input type="submit" value="Login"/>
<a href="registration.aspx" rel="register" class="linkform">Don't have a DocStore account yet? Register here</a>
<div class="clear"></div>
</div>
</form>
<form class="forgot_password" action="registered_users.aspx" method="post" id="regusers2" >
<h3>Forgot Password</h3>
<div>
<label>Username or Email:</label>
<input type="text" />
<span class="error">This is an error</span>
</div>
<div class="bottom">
<input type="submit" value="Send reminder"/>
<a href="registration.aspx" rel="login" class="linkform">Suddenly remebered account details?<br/> Log in here</a>
<a href="registration.aspx" rel="register" class="linkform">You don't have a DocStore account yet? Register here</a>
<div class="clear"></div>
</div>
<!--/div-->
</form>
<div class="clear"></div>
<!-- The JavaScript -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
//the form wrapper (includes all forms)
var $form_wrapper = ('<%= #form_wrapper.ClientID) %>');
//the current form is the one with class active
$currentForm = $form_wrapper.children('form.active'),
//the change form links
$linkform = $form_wrapper.find('.linkform');
//get width and height of each form and store them for later
$form_wrapper.children('form').each(function (i) {
var $theForm = $(this);
//solve the inline display none problem when using fadeIn fadeOut
if (!$theForm.hasClass('active'))
$theForm.hide();
$theForm.data({
width: $theForm.width(),
height: $theForm.height()
});
});
//set width and height of wrapper (same of current form)
setWrapperWidth();
/*
clicking a link (change form event) in the form
makes the current form hide.
The wrapper animates its width and height to the
width and height of the new current form.
After the animation, the new form is shown
*/
$linkform.bind('click', function (e) {
var $link = $(this);
var target = $link.attr('rel');
$currentForm.fadeOut(400, function () {
//remove class active from current form
$currentForm.removeClass('active');
//new current form
$currentForm = $form_wrapper.children('form.' + target);
//animate the wrapper
$form_wrapper.stop()
.animate({
width: $currentForm.data('width') + 'px',
height: $currentForm.data('height') + 'px'
}, 500, function () {
//new form gets class active
$currentForm.addClass('active');
//show the new form
$currentForm.fadeIn(400);
});
});
e.preventDefault();
});
function setWrapperWidth() {
$form_wrapper.css({
width: $currentForm.data('width') + 'px',
height: $currentForm.data('height') + 'px'
});
}
/*
I need to check the
which form was submited, and give the class active
to the form I want to show
*/
$form_wrapper.find('input[type="submit"]')
.click(function (e) {
e.preventDefault();
});
});
</script>
</body>
</html>