div弹出层的ajax登录(Jquery版+c#)

2024-12-01 04:09:21

页面初始化，界面如图所示：

Server name文本框获取焦点时候，界面如图所示（这里可以改成你登录的验证码）：

可以加载SQL Server服务列表，也是我的简易SQL查询分析器评论中静夜妙思给予的方法，非常感谢！

加载列表如下图所示：

可以随意地点击添加到Server name中，登录时截图所示：

文本框验证都写好了！还有Authentication验证方式，windows验证下面Login,Password文本框禁掉！由于时间原因，不上图了

demo.html(全部前台代码，js/css还没分文件存储)

代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<title>DataBase Test Demo</title>
<link href="js/treeview/jquery.treeview.css" rel="stylesheet" type="text/css" />

<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/treeview/jquery.treeview.js" type="text/javascript"></script>
<style type="text/css">
body{margin:0 auto;font-family:Verdana;font-size:12px;}
.top{margin:0 auto; width:100%; text-align:center; margin-top:20px;}
#browser{display:none;}
</style>
</head>
<body>
<div class="top"><h1>DataBase Test Demo</h1></div>
<ul id="browser" class="databasetree">
<li ><span class="server">SQL Server</span>
<ul>
<li class="closed"><span class="folder">DataBases</span>
<ul>
<li class="closed"><span class="database">Test</span>
<ul></ul>
</li>

</ul>
</li>
</ul>
</li>
</ul>
<style type="text/css">
#greybackground{background: #000;display: block;z-index: 100;width: 100%;position: absolute;top: 0;left: 0; }
#login{margin:0 auto;width:420px;height:auto;border:solid 1px #ccc;position:absolute;z-index:200;background-color:#fff;}
#login .heard{width:420px; height:29px;background-image:url(images/top_bg.gif); border-bottom:solid 1px #ccc;}
#login .heard .left{float:left;line-height:29px;margin-right:2px;padding-left:10px; color:#5aa608;}
#login .heard .right{float:right;line-height:29px;margin-right:5px;}
#login .heard .right a{color:#999;text-decoration:none;}
#login .heard .right a:hover{color:red;text-decoration:underline;}
#login .content{width:420px; height:200px;}
#login .content li{ list-style:none; padding:5px 0px 5px 30px;}
#login .content .top{ width:100%; margin-top:5px;height:30px;line-height:30px;}
#login .content .top .left{ float:left;width:120px; text-align:right;}
#login .content .top .right{ float:right;width:280px;text-align:right;padding-right:20px;}
#login input,#login,select,#login,button{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%;}
#login input{width: 80%;padding: 7px 7px 6px;border-color: #B3B3B3 #EAEAEA #EAEAEA #B3B3B3;border-style: solid;border-width: 1px;color:black;}
#login select{width: 86%;padding: 7px 7px 6px; border-color: #B3B3B3 #EAEAEA #EAEAEA #B3B3B3;border-style: solid;border-width: 1px;color:black;}
#login button,#login .btn-submit,#login .button,#login .btn-submit:focus,#login .button:focus,.btn-submit,.button{border-left: 1px solid #C6C6C6;
border-right: 1px solid #DDDDDD;border-top: 1px solid #DDDDDD;border-bottom: 1px solid #C6C6C6;
cursor:pointer;width:auto;margin:0 10px 0 0;padding-bottom:3px;line-height:1.3em;
color:#515151;font-weight:bold;background:url(images/button.png) #e5e3e3 repeat-x 0 0;
height:32px;padding-left:12px;padding-right: 12px;padding-top: 6px;}
#login button:hover,#login .btn-submit:hover,.button:hover,.btn-submit:hover {background-image:none;}
#login .btn-submit,#login .btn-submit:focus,.btn-submit {width:auto;border-color:#5C91A4 #2B7089 #1A6480 #2A6F89;background-image:url(images/button_highlight.png);background-color:#4e85bb;color:#fff;}
#login .bottom-btn{width:90%; margin:0 auto; padding-top:7px; border-top:1px #ccc solid; margin-top:5px;}

#layer{position:relative;}
#poper{position:absolute;z-index:10;display:none;left:39px;border:solid 1px #ccc; background-color:#fff;}

#poper .heard{height:25px;line-height:25px; width:100%;text-align:right; }
#poper .heard a{color:#999;text-decoration:none;}
#poper .heard a:hover{color:red;text-decoration:underline;}
#poper .first{height:30px;line-height:30px; width:100%;text-align:center; color:#5aa608;}
#poper .first a{color:#5aa608;text-decoration:underline;}
#poper .second{height:20px;line-height:20px; width:100%;text-align:left; margin-left:10px;}
#poper .second a{color:#999; text-decoration:none;}
#poper .second a:hover{color:#5aa608; text-decoration:underline;}
</style>
<div id="login">
<div class="heard"><div class="left">Connect to Server</div><div class="right"><a href="javascript:void(0);" id="login_close" title="close">close</a></div></div>
<div class="content">
<div class="top">
<div class="left">Server name:</div>
<div class="right">
<div id="layer">
<input id="txtServer" type="text" />
<div id="poper">
<div class="heard"><a id="layer_close" href="javascript:void(0);" title="close">close</a> </div>
<div class="first"><a id="loadServer" href="javascript:void(0);" title="点击加载SQL Server服务列表">点击加载SQL Server服务列表</a></div>
</div>
</div>
</div>
</div>
<div class="top"><div class="left">Authentication:</div><div class="right"><select id="selectAuthentication"><option value="windows">Windows Authentication</option><option value="sql" selected="selected">SQL Server Authentication</option></select></div></div>
<div class="top"><div class="left">Login:</div><div class="right"><input id="txtUserName" type="text" /></div></div>
<div class="top"><div class="left">Password:</div><div class="right"><input id="txtPassword" type="password" /></div></div>
<div class="bottom-btn"><input id="btnConnect" type="button" class="btn-submit" value="Connect" /><input id="btnCancel" type="button" class="button" value="Cancel" /><font id="message"></font></div>
</div>
</div>
</body>
</html>
<script type="text/javascript">
$(document).ready(function() {
$("#browser").treeview();

$("#selectAuthentication").change(function() {
if ($(this).val() == "windows") {
$("#txtUserName,#txtPassword").css("background-color", "#eee");
$("#txtUserName,#txtPassword").attr("disabled", "disabled");
} else {
$("#txtUserName,#txtPassword").css("background-color", "#fff");
$("#txtUserName,#txtPassword").removeAttr("disabled");
}
});

$("#txtServer").focus(function() { $("#poper").fadeIn("fast"); });

$("#poper").css({ "top": $("#txtServer").outerHeight() + 1, "width": $("#txtServer").outerWidth() });

$("#layer_close").click(function() {
$(this).parent().parent().fadeOut("fast");
});

$("#loadServer").click(function() {
$.ajax({
type: "get",
dataType: "text",
timeout: 300000,
url: "ashx/Handler.ashx",
data: "flag=server",
beforeSend: function() { $("#loadServer").fadeOut("fast"); $("#poper .first").html("<img src='images/ajax-loader.gif' title='正在加载中，请稍后……' />正在加载中，请稍后……") },
success: function(data) {
if (data == "error") {
$("#poper .first").html("<font color=red>服务列表加载失败，请刷新重新加载</font>");
} else if (data == "empty") {
$("#poper .first").html("<font color=red>没有数据，请手动填写</font>");
} else {
$("#poper .first").remove();
$("#poper").append(data);
alink();
}
},
error: function() { $("#poper .first").html("<font color=red>系统发生错误，请联系管理员！</font>"); }
});
});
})

$("#btnConnect").click(function() {
if ($("#selectAuthentication").val() == "sql") { //SQL Server Authentication
if ($("#txtServer").val().length < 1) {
$("#message").css("color", "red"); $("#message").html("请输入Server name");
} else if ($("#txtUserName").val().length < 1) {
$("#message").css("color", "red"); $("#message").html("请输入Login");
} else if ($("#txtPassword").val().length < 1) {
$("#message").css("color", "red"); $("#message").html("请输入Password");
} else {
$.ajax({
type: "get",
dataType: "text",
timeout: 300000,
url: "ashx/Handler.ashx",
data: "flag=login&sqlServer=" + encodeURIComponent($("#txtServer").val()) + "&user=" + encodeURIComponent($("#txtUserName").val()) + "&password=" + encodeURIComponent($("#txtPassword").val()),
beforeSend: function() { $("#message").css("color", "#5aa608"); $("#message").html("<img src='images/ajax-loader.gif' title='正在加载中，请稍后……' />正在验证，请稍后……"); },
success: function(data) {
if (data == "True") {
$("#message").html("");
hideLogin();
$("#browser").fadeIn("fast");
}
},
error: function() { $("#message").css("color", "red"); $("#message").html("登录失败"); }
});
}
}
});

$(function() {
var screenwidth, screenheight, mytop, getPosLeft, getPosTop
screenwidth = $(window).width();
screenheight = $(window).height();
//获取滚动条距顶部的偏移
mytop = $(document).scrollTop();
//计算弹出层的left
getPosLeft = screenwidth / 2 - 200;
//计算弹出层的top
getPosTop = screenheight / 2 - 150;
//css定位弹出层
$("#login").css({ "left": getPosLeft, "top": getPosTop });
//当浏览器窗口大小改变时
$(window).resize(function() {
screenwidth = $(window).width();
screenheight = $(window).height();
mytop = $(document).scrollTop();
getPosLeft = screenwidth / 2 - 200;
getPosTop = screenheight / 2 - 150;
$("#login").css({ "left": getPosLeft, "top": getPosTop + mytop });
});
//当拉动滚动条时，弹出层跟着移动
$(window).scroll(function() {
screenwidth = $(window).width();
screenheight = $(window).height();
mytop = $(document).scrollTop();
getPosLeft = screenwidth / 2 - 200;
getPosTop = screenheight / 2 - 150;
$("#login").css({ "left": getPosLeft, "top": getPosTop + mytop });
});
//点击关闭按钮
$("#login_close").click(function() {
hideLogin();
});

$("#btnOK").click(function() {
$("#login").fadeOut("slow");
$("#browser").fadeIn("slow");
//删除变灰的层
$("#greybackground").remove();
return false;
});
$.get("ashx/Handler.ashx?flag=islogin", function(data) {
if (data == "True") {//没有登录，显示登录框
hideLogin();
} else {
showLogin();
}
});
});

Handler.ashx

代码如下:

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;
using System.Collections.Generic;
using System.Text;
using System.Web.SessionState;

public class Handler : IHttpHandler,IRequiresSessionState {

public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
string tempValue = string.Empty;
if (context.Request["flag"] == null)
context.Response.Write("error");
else
{
string flag = context.Request["flag"];
switch (flag)
{
case "server":
tempValue = this.GetServers();
break;
case "islogin":
tempValue = (context.Session["login"] != null).ToString();//判断是否登录到SQL
break;
case "login":
tempValue = IsLogin(context);
break;
default:
tempValue = "error";
break;
}
}
context.Response.Write(tempValue);
}

/// <summary>
/// 加载SQL Server 服务列表
/// </summary>
/// <returns></returns>
private string GetServers()
{
IList<string> list = Common.GetServers();
if (list == null || list.Count == 0) return "empty";
StringBuilder sb = new StringBuilder();
foreach (string s in list)
{
sb.AppendFormat("<div class=\"second\"><a href=\"javascript:void(0);\" title=\"{0}\">{0}</a></div>", s);
}
return sb.ToString();
}

/// <summary>
/// 登录SQL Server
/// </summary>
/// <param name="context"></param>
/// <returns></returns>
private string IsLogin(HttpContext context)
{
if (context.Request["user"] == null || context.Request["password"] == null)
{
context.Session["login"] = "success";
return "";
}
else
{
string server = HttpUtility.UrlDecode(context.Request["sqlServer"]);
string user = HttpUtility.UrlDecode(context.Request["user"]);
string password = HttpUtility.UrlDecode(context.Request["password"]);
string sqlConstring;
if (Common.IsLogin(server, user, password, out sqlConstring))
{
context.Session["login"] = sqlConstring;
return "True";
}
else
{
return "False";
}
}
}

public bool IsReusable {
get {
return false;
}
}
}

Common.cs

代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data.Sql;
using System.Data.SqlClient;
using System.Data;

/// <summary>
/// Summary description for Common
/// </summary>
public class Common
{
public Common()
{
//
// TODO: Add constructor logic here
//
}

/// <summary>
/// 加载SQL服务列表
/// </summary>
/// <returns></returns>
public static IList<string> GetServers()
{
IList<string> list = new List<string>();
SqlDataSourceEnumerator sse = SqlClientFactory.Instance.CreateDataSourceEnumerator() as SqlDataSourceEnumerator;
if (sse == null) return null;
DataTable dt = sse.GetDataSources();
foreach (DataRow dr in dt.Rows)
{
string server = dr["ServerName"] as string;
string instance = dr["InstanceName"] as string;
if (string.IsNullOrEmpty(instance) || instance.ToUpper() == "MSSQLSERVER")
list.Add(server);
else
list.Add(server + @"\" + instance);
}
return list;
}

/// <summary>
/// SQL Server Authentication
/// </summary>
/// <param name="server">SQL服务</param>
/// <param name="user">用户名</param>
/// <param name="password">密码</param>
/// <param name="sqlConstring">数据库连接字符串</param>
/// <returns></returns>
public static bool IsLogin(string server,string user,string password,out string sqlConstring)
{
sqlConstring = string.Format("Data Source={0};Initial Catalog=master;Persist Security Info=True;User ID={1};Password={2}", server, user, password);
return SQLHelper.LoginSQL(sqlConstring);
}
}

SQLHelper.cs

代码如下:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Data;
using System.Data.SqlClient;

/// <summary>
/// Summary description for SQLHelper
/// </summary>
public class SQLHelper
{
public SQLHelper()
{
//
// TODO: Add constructor logic here
//
}

/// <summary>
/// 判断是否登录SQL Server
/// </summary>
/// <param name="sqlConstring"></param>
/// <returns></returns>
public static bool LoginSQL(string sqlConstring)
{
bool isLogin = false;
using(SqlConnection conn = new SqlConnection(sqlConstring))
{
conn.Open();
if (conn.State.ToString().ToLower() == "open")
isLogin = true;
return isLogin;
}
}
}

源代码下载：DataBase_jquery_div_jb51.rar

作者 cnblogs xu_happy_you

C#实现的WINDOWS登录功能示例

本文实例讲述了C#实现的WINDOWS登录功能.分享给大家供大家参考,具体如下: using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.Web
.NET C#使用微信公众号登录网站

适用于:本文适用于有一定微信开发基础的用户引言: 花了300大洋申请了微信公众平台后,发现不能使用微信公众号登录网站(非微信打开)获得微信帐号.仔细研究后才发现还要再花300大洋申请微信开放平台才能接入网站的登录.于是做为屌丝程序员的我想到了自己做一个登录接口. 工具和环境: 1. VS2013 .net4.0 C# MVC4.0 Razor 2.插件 A. Microsoft.AspNet.SignalR;时时获取后台数据 B.Gma.QrCodeNet.Encoding;文本生成二维码实
C#实现的三种模拟自动登录和提交POST信息的方法

本文实例讲述了C#实现的三种模拟自动登录和提交POST信息的方法.分享给大家供大家参考,具体如下: 网页自动登录(提交Post内容)的用途很多,如验证身份.程序升级.网络投票等,以下是用C#实现的方法. 网页自动登录和提交POST信息的核心就是分析网页的源代码(HTML),在C#中,可以用来提取网页HTML的组件比较多,常用的用WebBrowser.WebClient.HttpWebRequest这三个.以下就分别用这三种方法来实现: 1.WebBrowser是个"迷你"浏览器,其特点
c#通用登录模块分享

// 举个例子:一个网站有用户系统.商家系统.网站后台3个系统 //可以分3个userType, user ,shop , system //网站后台一般都有角色,如admin,employee //那么网站的角色就有 user,shop,admin,employee,但是admin和employee在一个客户端是不能同时登陆的,所以他们是同一类用户(system) 使用方法: 1.添加一个类LoginUser.cs 代码如下: 代码: namespace MVCCommonAuth { #re
C#实现登录窗口(不用隐藏)

(1).在程序入口处,打开登录窗口复制代码代码如下: static void Main() { Application.EnableVisualStyles(); Application.SetCompatibleTextRenderingDefault(false); Form form = new login(); form.Show(); Application.Run(); } 复制代码代码如下: private void button1_Click(object sender
C#.NET实现网页自动登录的方法

本文实例讲述了C#.NET实现网页自动登录的方法.分享给大家供大家参考.具体如下: 用C#语言编写一个Windows Form应用程序,实现自动登录一个特定的页面. 下面以自动登录:http://localhost/Web/Login.aspx 作为例子,讲解如何模拟手工输入用户名密码并点击登录,实现自动登录. 新建一个C#应用程序,给应用程序起个名字,如AutoLogin,在窗体中添加一个TextBox.Button,及WebBrowser控件,并为WebBrowser控件添加webBrows
asp.net c#采集需要登录页面的实现原理及代码

首先说明:代码片段是从网络获取,然后自己修改.我想好的东西应该拿来分享. 实现原理:当我们采集页面的时候,如果被采集的网站需要登录才能采集.不管是基于Cookie还是基于Session,我们都会首先发送一个Http请求头,这个Http请求头里面就包含了网站需要的Cookie信息.当网站接收到发送过来的Http请求头时,会从Http请求头获取相关的Cookie或者Session信息,然后由程序来处理,决定你是否有权限访问当前页面. 好了,原理搞清楚了,就好办了.我们所要做的仅仅是在采集的时候(或者
C# Winform中实现主窗口打开登录窗口关闭的方法

在使用C#进行Winform编程时,我们经常需要使用一个登录框来进行登录,一旦输入的用户名密码登录成功,这时登录窗口应该关闭,而且同时打开主程序窗口.该如何来实现呢? 乍一想,很简单啊,打开主窗口就用主窗口的Show()方法,而关闭登录窗口就用登录窗口的Close()方法即可.即代码如下: Program.cs中代码: 复制代码代码如下: Application.Run(new FormLogin()); 登录窗口(FormLogin)代码: 复制代码代码如下: private void b
c#通过进程调用cmd判断登录用户权限代码分享

复制代码代码如下: /// <summary>/// 应用程序的主入口点./// </summary>[STAThread]static void Main(){ if (RunCmd("net localgroup administrators").IndexOf(System.Environment.UserName) >= 0) { //顺利执行. } else { //报错提示系统不是管理员用户登录,容易导致
C#实现简单的登录界面

首先我们来看一个简单的制作过程打开visual 2010,新建窗体,既然是登录窗口,那么就不让它出现最大化.最小化以及拖拉大小功能(上一节已经提到过怎么设置大小),如图所示,甚至窗体的Text属性值为"登录窗口",大小随意. 创建窗体之后就开始界面详细的组件布局了,主要是在左边拖拉控件,然后放到窗体中去,定义属性值.这些都比较简单. 到了代码响应阶段,双击登录按钮,进入代码视图: private void button1_Click(object sender, EventArgs
C#中登录窗体和欢迎窗体关闭方法分析

本文实例分析了C#中登录窗体和欢迎窗体关闭方法.分享给大家供大家参考.具体分析如下: 在c#的winform编程中,我们经常会做登录窗体或欢迎窗体,并把他们作为启动窗体. 但是,我们有可能会遇到一些问题. 请看下面的代码: 复制代码代码如下: private void button1_Click(object sender, EventArgs e) { this.Close(); new Form2().Show(); } 这段代码想让form1中的button1在点

div弹出层的ajax登录(Jquery版+c#)

相关推荐

随机推荐