欢迎来到Doc100.Net免费学习资源知识分享平台!
您的位置:首页 > 程序异常 >

asp.net jquery ajax用户登录功能的实现_asp.net jquery 实例9 通过控件hyperlink实现返回顶部效果

更新时间: 2015-04-20 00:00:00 责任编辑: Author_N11

 

主页面调用代码片段:
复制代码 代码如下:
<asp:HyperLink ID="lnkLogin" runat="server" NavigateUrl="#" >登录</asp:HyperLink>
<script language="javascript" type="text/javascript">
$('#<%=this.lnkLogin.ClientID %>').click(
function(){
jBox.open('iframe-jBoxID','iframe','Login.aspx','用户登录
','width=400,height=250,center=true,draggable=true,model=true');
} );
</script>

Login.aspx代码:
复制代码 代码如下:
<form id="form1" onsubmit="return false;">
<table id="login-table">
<tr>
<td width="60">学号:</td>
<td><input class="textbox" type="text" style="width:160px;" id="txtUserName"
maxlength="9" onblur="checkUserName()" onclick="$.trim(this.value)"/><span></span>
</td>
</tr>
<tr>
<td width="60">密码:</td>
<td><input class="textbox" type="password" style="width:160px;" id="txtUserPwd"
onblur="checkUserPwd()" onclick="$.trim(this.value)" /><span></span>
</td>
</tr>
<tr>
<td width="60">验证码:</td>
<td><input class="textbox" type="text" style="width:160px;" maxlength="5"
id="txtCheckCode" onblur="checkCheckCode()" onclick="$.trim(this.value)"/><span>
</span>
</td>
</tr>
<tr>
<td width="60"></td>
<td><div style="color:#808080;">输入下图中的字符,不区分大小写</div><br />
<img src="CheckCode.aspx" style="vertical-align:middle;" alt="验证码" id="imgCheckCode" />
<a href="#" id="change_image">看不清,换一张</a></td>
</tr>
<tr>
<td width="60"></td>
<td><input type="image" src="App_Themes/Images/btn_login.jpg" id="btnLogin"
alt="马上登录" style="border:0;"/></td>
</tr>
</table>
</form>

jQuery代码:
复制代码 代码如下:
<script language="javascript" type="text/javascript" >
$(document).ready(function(){
// 验证码更新
$('#change_image').click(
function(){
$('#imgCheckCode').attr('src','CheckCode.aspx?'+Math.random());
});
//关键的代码
$("#btnLogin").click(function(){
if(checkUserName() && checkUserPwd() && checkCheckCode())
{
var data = {
UserName: $('#txtUserName').val(),
UserPwd: $('#txtUserPwd').val(),
CheckCode: $('#txtCheckCode').val()
};
//提交数据给Login.ashx页面处理
$.post("Ajax/Login.ashx",data,function(result){
if(result == "1") //登录成功
{
alert("登录成功!您可以进行其他操作了!");
// 关闭模拟窗口
window.parent.window.jBox.close();
}
else if(result == "2") //验证码错误
{
$('#txtCheckCode').next("span").css("color","red").text("*
验证码错误");
}
else
{
alert("登录失败!请重试");
}
});
}
else
{
checkUserName();
checkUserPwd();
checkCheckCode();
}
});
});
//check the userName
function checkUserName()
{
if($("#txtUserName").val().length == 0)
{
$("#txtUserName").next("span").css("color","red").text("*用户名不为空");
return false;
}
else
{
var reg = /^\d{9}$/;
if(!reg.test($('#txtUserName').val()))
{
$('#txtUserName').next("span").css("color","red").text("*正确的格式
如:030602888");
return false;
}
else
{
$("#txtUserName").next("span").css("color","red").text("");
return true;
}
}
}
//check the pwd
function checkUserPwd()
{
if($('#txtUserPwd').val().length == 0)
{
$('#txtUserPwd').next("span").css("color","red").text("*密码不为空");
return false;
}
else
{
$('#txtUserPwd').next("span").css("color","red").text("");
return true;
}
}
// check the check code
function checkCheckCode()
{
if($('#txtCheckCode').val().length == 0)
{
$('#txtCheckCode').next("span").css("color","red").text("*验证码不为空");
return false;
}
else
{
$('#txtCheckCode').next("span").css("color","red").text("");
return true;
}
}
</script>

Login.ashx代码:
复制代码 代码如下:
using System;
using System.Collections;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Services;
using System.Web.Services.Protocols;
using System.Xml.Linq;
using System.Data.SqlClient;
using System.Web.SessionState; //支持session必须的引用
namespace Website.Ajax
{
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
public class Login : IHttpHandler,IRequiresSessionState
{
public void ProcessRequest(HttpContext context)
{
context.Response.ContentType = "text/plain";
string checkCode = "";
if (context.Session["checkCode"] != null)
{
checkCode = Convert.ToString(context.Session["checkCode"]).ToLower();
}
if (context.Request.Form["CheckCode"].ToLower() == checkCode)
{
using (SqlConnection conn = new SqlConnection(SqlHelper.StudentConnectionString))
{
string sql = "select ID,stuNumber,userPassword,realName from t_stuUser
where stuNumber=@UserName and userPassword=@UserPwd";
SqlCommand cmd = new SqlCommand(sql, conn);
SqlParameter pUserName = cmd.Parameters.Add("@UserName", SqlDbType.VarChar, 30);
SqlParameter pUserPwd = cmd.Parameters.Add("@UserPwd", SqlDbType.VarChar, 150);
pUserName.Value = context.Request.Form["UserName"];
pUserPwd.Value = Common.MD5(context.Request.Form["UserPwd"]);
conn.Open();
SqlDataReader sdr = cmd.ExecuteReader(CommandBehavior.CloseConnection);
if (sdr.Read())
{
context.Session["UserID"] = Convert.ToString(sdr["ID"]);
context.Session["StuName"] = Convert.ToString(sdr["realName"]);
context.Session["StuNumber"] = Convert.ToString(sdr["stuNumber"]);
context.Response.Write("1"); // 登录成功
}
else
{
context.Response.Write("0"); //登录失败,用户名或密码错误
}
}
}
else
{
context.Response.Write("2"); // 验证码错误
}
}
public bool IsReusable
{
get
{
return false;
}
}
}
}
要实现该效果,首先要先了解以下几点基础知识:
窗体滚动事件:$(window).scroll(function(){...});
获取窗体滚动距离:$(window).scrollTop();
获取窗体高度:$(window).height();
了解以上内容就可以实现通过hyperlink控件实现返回顶部的效果了。
1.准备界面结构代码:
复制代码 代码如下:
<form id="form1" runat="server">
<div>
<asp:HyperLink ID="Top" runat="server"></asp:HyperLink>
<h1 style="text-align: center">
利用jQuery实现返回顶部效果</h1>
<div style="width: 800px; border: 1px; text-align: left; margin-left: 230px;">
。。。。。。(很多内容,可以滚动)
</div>
<asp:HyperLink ID="backToTopLink" runat="server" CssClass="backToTop">回顶部</asp:HyperLink>
</div>
</form>

2.给回顶部控件添加样式:
复制代码 代码如下:
<style type="text/css">
.backToTop
{
background-color: Yellow;
width: 30px;
border-style: outset;
border-width: 1px;
text-align: center;
font-weight: bold;
font-family: Arial;
font-size: x-large;
cursor: pointer;
position:absolute; // 注意要设置为绝对位置
right: 100px;
}
</style>

3.添加实现置顶效果脚本代码:
复制代码 代码如下:
<script type="text/javascript">
$(document).ready(function () {
$("#backToTopLink").attr("title", "回顶部");
$("#backToTopLink").attr("href", "#Top"); // 通过链接实现置顶
$(window).scroll(function () {
if ($(window).scrollTop() <= 100) {
$("#backToTopLink").fadeOut(200);
}
else {
$("#backToTopLink").fadeIn(400);
}
var v_Top = $(window).height() - $(".backToTop").height() - 10 + $(window).scrollTop(); // 动态计算滚动后置顶按钮top位置
$(".backToTop").css("top", v_Top + "px");
});
});
</script>

注意,本代码只是为了演示hyperlink控件来实现返回顶部的效果。还可以通过jQuery的动画效果,实现平滑置顶。
平滑过渡返回顶部代码如下:
$('#backToTopLink').click(function(){$('html,body').animate({scrollTop: '0px'}, 800);}); // 替换$("#backToTopLink").attr("href", "#Top");即可 分享到:
相关文章
上一篇:上一篇
下一篇:下一篇

 

随机推荐程序问答结果

 

 

如对文章有任何疑问请提交到问题反馈,或者您对内容不满意,请您反馈给我们DOC100.NET论坛发贴求解。
DOC100.NET资源网,机器学习分类整理更新日期::2015-04-20 00:00:00
如需转载,请注明文章出处和来源网址:http://www.doc100.net/bugs/t/1274148/
本文WWW.DOC100.NET DOC100.NET版权所有。