服务器之家

服务器之家 > 正文

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

时间:2019-10-08 09:56     来源/作者:asp.net技术网

页面初始化,界面如图所示:

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

Server name文本框获取焦点时候,界面如图所示(这里可以改成你登录的验证码):

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

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

加载列表如下图所示:

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

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

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

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

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

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

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <title>DataBase Test Demo</title>  
  4. <link href="js/treeview/jquery.treeview.css" rel="stylesheet" type="text/css" />  
  5. <!--<script src="js/jquery-1.4.2-vsdoc.js" type="text/javascript"></script>-->  
  6. <script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>  
  7. <script src="js/treeview/jquery.treeview.js" type="text/javascript"></script>  
  8. <style type="text/css">  
  9. body{margin:0 auto;font-family:Verdana;font-size:12px;}  
  10. .top{margin:0 auto; width:100%; text-align:center; margin-top:20px;}  
  11. #browser{display:none;}  
  12. </style>  
  13. </head>  
  14. <body>  
  15. <div class="top"><h1>DataBase Test Demo</h1></div>  
  16. <ul id="browser" class="databasetree">  
  17. <li ><span class="server">SQL Server</span>  
  18. <ul>  
  19. <li class="closed"><span class="folder">DataBases</span>  
  20. <ul>  
  21. <li class="closed"><span class="database">Test</span>  
  22. <ul></ul>  
  23. </li>  
  24.  
  25. </ul>  
  26. </li>  
  27. </ul>  
  28. </li>  
  29. </ul>  
  30. <style type="text/css">  
  31. #greybackground{background: #000;display: block;z-index: 100;width: 100%;position: absolute;top: 0;left: 0; }  
  32. #login{margin:0 auto;width:420px;height:auto;border:solid 1px #ccc;position:absolute;z-index:200;background-color:#fff;}  
  33. #login .heard{width:420px; height:29px;background-image:url(images/top_bg.gif); border-bottom:solid 1px #ccc;}  
  34. #login .heard .left{float:left;line-height:29px;margin-right:2px;padding-left:10px; color:#5aa608;}  
  35. #login .heard .right{float:right;line-height:29px;margin-right:5px;}  
  36. #login .heard .right a{color:#999;text-decoration:none;}  
  37. #login .heard .right a:hover{color:red;text-decoration:underline;}  
  38. #login .content{width:420px; height:200px;}  
  39. #login .content li{ list-style:none; padding:5px 0px 5px 30px;}  
  40. #login .content .top{ width:100%; margin-top:5px;height:30px;line-height:30px;}  
  41. #login .content .top .left{ float:left;width:120px; text-align:right;}  
  42. #login .content .top .right{ float:right;width:280px;text-align:right;padding-right:20px;}  
  43. #login input,#login,select,#login,button{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%;}  
  44. #login input{width: 80%;padding: 7px 7px 6px;border-color: #B3B3B3 #EAEAEA #EAEAEA #B3B3B3;border-style: solid;border-width: 1px;color:black;}  
  45. #login select{width: 86%;padding: 7px 7px 6px; border-color: #B3B3B3 #EAEAEA #EAEAEA #B3B3B3;border-style: solid;border-width: 1px;color:black;}  
  46. #login button,#login .btn-submit,#login .button,#login .btn-submit:focus,#login .button:focus,.btn-submit,.button{border-left: 1px solid #C6C6C6;  
  47. border-right: 1px solid #DDDDDD;border-top: 1px solid #DDDDDD;border-bottom: 1px solid #C6C6C6;  
  48. cursor:pointer;width:auto;margin:0 10px 0 0;padding-bottom:3px;line-height:1.3em;  
  49. color:#515151;font-weight:bold;background:url(images/button.png) #e5e3e3 repeat-x 0 0;  
  50. height:32px;padding-left:12px;padding-right: 12px;padding-top: 6px;}  
  51. #login button:hover,#login .btn-submit:hover,.button:hover,.btn-submit:hover {background-image:none;}  
  52. #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;}  
  53. #login .bottom-btn{width:90%; margin:0 auto; padding-top:7px; border-top:1px #ccc solid; margin-top:5px;}  
  54.  
  55. #layer{position:relative;}  
  56. #poper{position:absolute;z-index:10;display:none;left:39px;border:solid 1px #ccc; background-color:#fff;}  
  57.  
  58. #poper .heard{height:25px;line-height:25px; width:100%;text-align:right; }  
  59. #poper .heard a{color:#999;text-decoration:none;}  
  60. #poper .heard a:hover{color:red;text-decoration:underline;}  
  61. #poper .first{height:30px;line-height:30px; width:100%;text-align:center; color:#5aa608;}  
  62. #poper .first a{color:#5aa608;text-decoration:underline;}  
  63. #poper .second{height:20px;line-height:20px; width:100%;text-align:left; margin-left:10px;}  
  64. #poper .second a{color:#999; text-decoration:none;}  
  65. #poper .second a:hover{color:#5aa608; text-decoration:underline;}  
  66. </style>  
  67. <div id="login">  
  68. <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>  
  69. <div class="content">  
  70. <div class="top">  
  71. <div class="left">Server name:</div>  
  72. <div class="right">  
  73. <div id="layer">  
  74. <input id="txtServer" type="text" />  
  75. <div id="poper">  
  76. <div class="heard"><a id="layer_close" href="javascript:void(0);" title="close">close</a>  </div>  
  77. <div class="first"><a id="loadServer" href="javascript:void(0);" title="点击加载SQL Server服务列表">点击加载SQL Server服务列表</a></div>  
  78. </div>  
  79. </div>  
  80. </div>  
  81. </div>  
  82. <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>  
  83. <div class="top"><div class="left">Login:</div><div class="right"><input id="txtUserName" type="text" /></div></div>  
  84. <div class="top"><div class="left">Password:</div><div class="right"><input id="txtPassword" type="password" /></div></div>  
  85. <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>  
  86. </div>  
  87. </div>  
  88. </body>  
  89. </html>  
  90. <script type="text/javascript">  
  91. $(document).ready(function() {  
  92. $("#browser").treeview();  
  93.  
  94. $("#selectAuthentication").change(function() {  
  95. if ($(this).val() == "windows") {  
  96. $("#txtUserName,#txtPassword").css("background-color""#eee");  
  97. $("#txtUserName,#txtPassword").attr("disabled""disabled");  
  98. else {  
  99. $("#txtUserName,#txtPassword").css("background-color""#fff");  
  100. $("#txtUserName,#txtPassword").removeAttr("disabled");  
  101. }  
  102. });  
  103.  
  104. $("#txtServer").focus(function() { $("#poper").fadeIn("fast"); });  
  105.  
  106. $("#poper").css({ "top": $("#txtServer").outerHeight() + 1, "width": $("#txtServer").outerWidth() });  
  107.  
  108. $("#layer_close").click(function() {  
  109. $(this).parent().parent().fadeOut("fast");  
  110. });  
  111.  
  112. $("#loadServer").click(function() {  
  113. $.ajax({  
  114. type: "get",  
  115. dataType: "text",  
  116. timeout: 300000,  
  117. url: "ashx/Handler.ashx",  
  118. data: "flag=server",  
  119. beforeSend: function() { $("#loadServer").fadeOut("fast"); $("#poper .first").html("<img src='images/ajax-loader.gif' title='正在加载中,请稍后……' />正在加载中,请稍后……") },  
  120. success: function(data) {  
  121. if (data == "error") {  
  122. $("#poper .first").html("<font color=red>服务列表加载失败,请刷新重新加载</font>");  
  123. else if (data == "empty") {  
  124. $("#poper .first").html("<font color=red>没有数据,请手动填写</font>");  
  125. else {  
  126. $("#poper .first").remove();  
  127. $("#poper").append(data);  
  128. alink();  
  129. }  
  130. },  
  131. error: function() { $("#poper .first").html("<font color=red>系统发生错误,请联系管理员!</font>"); }  
  132. });  
  133. });  
  134. })  
  135.  
  136.  
  137. $("#btnConnect").click(function() {  
  138. if ($("#selectAuthentication").val() == "sql") { //SQL Server Authentication  
  139. if ($("#txtServer").val().length < 1) {  
  140. $("#message").css("color""red"); $("#message").html("请输入Server name");  
  141. else if ($("#txtUserName").val().length < 1) {  
  142. $("#message").css("color""red"); $("#message").html("请输入Login");  
  143. else if ($("#txtPassword").val().length < 1) {  
  144. $("#message").css("color""red"); $("#message").html("请输入Password");  
  145. else {  
  146. $.ajax({  
  147. type: "get",  
  148. dataType: "text",  
  149. timeout: 300000,  
  150. url: "ashx/Handler.ashx",  
  151. data: "flag=login&sqlServer=" + encodeURIComponent($("#txtServer").val()) + "&user=" + encodeURIComponent($("#txtUserName").val()) + "&password=" + encodeURIComponent($("#txtPassword").val()),  
  152. beforeSend: function() { $("#message").css("color""#5aa608"); $("#message").html("<img src='images/ajax-loader.gif' title='正在加载中,请稍后……' />正在验证,请稍后……"); },  
  153. success: function(data) {  
  154. if (data == "True") {  
  155. $("#message").html("");  
  156. hideLogin();  
  157. $("#browser").fadeIn("fast");  
  158. }  
  159. },  
  160. error: function() { $("#message").css("color""red"); $("#message").html("登录失败"); }  
  161. });  
  162. }  
  163. }  
  164. });  
  165.  
  166. $(function() {  
  167. var screenwidth, screenheight, mytop, getPosLeft, getPosTop  
  168. screenwidth = $(window).width();  
  169. screenheight = $(window).height();  
  170. //获取滚动条距顶部的偏移  
  171. mytop = $(document).scrollTop();  
  172. //计算弹出层的left  
  173. getPosLeft = screenwidth / 2 - 200;  
  174. //计算弹出层的top  
  175. getPosTop = screenheight / 2 - 150;  
  176. //css定位弹出层  
  177. $("#login").css({ "left": getPosLeft, "top": getPosTop });  
  178. //当浏览器窗口大小改变时  
  179. $(window).resize(function() {  
  180. screenwidth = $(window).width();  
  181. screenheight = $(window).height();  
  182. mytop = $(document).scrollTop();  
  183. getPosLeft = screenwidth / 2 - 200;  
  184. getPosTop = screenheight / 2 - 150;  
  185. $("#login").css({ "left": getPosLeft, "top": getPosTop + mytop });  
  186. });  
  187. //当拉动滚动条时,弹出层跟着移动  
  188. $(window).scroll(function() {  
  189. screenwidth = $(window).width();  
  190. screenheight = $(window).height();  
  191. mytop = $(document).scrollTop();  
  192. getPosLeft = screenwidth / 2 - 200;  
  193. getPosTop = screenheight / 2 - 150;  
  194. $("#login").css({ "left": getPosLeft, "top": getPosTop + mytop });  
  195. });  
  196. //点击关闭按钮  
  197. $("#login_close").click(function() {  
  198. hideLogin();  
  199. });  
  200.  
  201. $("#btnOK").click(function() {  
  202. $("#login").fadeOut("slow");  
  203. $("#browser").fadeIn("slow");  
  204. //删除变灰的层  
  205. $("#greybackground").remove();  
  206. return false;  
  207. });  
  208. $.get("ashx/Handler.ashx?flag=islogin"function(data) {  
  209. if (data == "True") {//没有登录,显示登录框  
  210. hideLogin();  
  211. else {  
  212. showLogin();  
  213. }  
  214. });  
  215. });  
  216.  
  217. function showLogin() {//显示登陆框  
  218. $("#login").fadeIn("slow");  
  219. //获取页面文档的高度  
  220. var docheight = $(document).height();  
  221. //追加一个层,使背景变灰  
  222. $("body").append("<div id='greybackground'></div>");  
  223. $("#greybackground").css({ "opacity""0.5""height": docheight });  
  224. return false;  
  225. }  
  226. function hideLogin() {  
  227. $("#login").fadeOut("slow");  
  228. //删除变灰的层  
  229. $("#greybackground").remove();  
  230. return false;  
  231. }  
  232. function alink() {//生成的a追加click事件  
  233. $("#poper .second a").each(function() {  
  234. $(this).click(function() {  
  235. var a = $(this).html();  
  236. $("#txtServer").val(a);  
  237. });  
  238. });  
  239. }  
  240. </script>  

Handler.ashx 

  1. <%@ WebHandler Language="C#" Class="Handler" %>  
  2.  
  3. using System;  
  4. using System.Web;  
  5. using System.Collections.Generic;  
  6. using System.Text;  
  7. using System.Web.SessionState;  
  8.  
  9. public class Handler : IHttpHandler,IRequiresSessionState {  
  10.  
  11. public void ProcessRequest (HttpContext context) {  
  12. context.Response.ContentType = "text/plain";  
  13. string tempValue = string.Empty;  
  14. if (context.Request["flag"] == null)  
  15. context.Response.Write("error");  
  16. else  
  17. {  
  18. string flag = context.Request["flag"];  
  19. switch (flag)  
  20. {  
  21. case "server":  
  22. tempValue = this.GetServers();  
  23. break;  
  24. case "islogin":  
  25. tempValue = (context.Session["login"] != null).ToString();//判断是否登录到SQL  
  26. break;  
  27. case "login":  
  28. tempValue = IsLogin(context);  
  29. break;  
  30. default:  
  31. tempValue = "error";  
  32. break;  
  33. }  
  34. }  
  35. context.Response.Write(tempValue);  
  36. }  
  37.  
  38. /// <summary>  
  39. /// 加载SQL Server 服务列表  
  40. /// </summary>  
  41. /// <returns></returns>  
  42. private string GetServers()  
  43. {  
  44. IList<string> list = Common.GetServers();  
  45. if (list == null || list.Count == 0) return "empty";  
  46. StringBuilder sb = new StringBuilder();  
  47. foreach (string s in list)  
  48. {  
  49. sb.AppendFormat("<div class="second"><a href="javascript:void(0);" title="{0}">{0}</a></div>", s);  
  50. }  
  51. return sb.ToString();  
  52. }  
  53.  
  54. /// <summary>  
  55. /// 登录SQL Server  
  56. /// </summary>  
  57. /// <param name="context"></param>  
  58. /// <returns></returns>  
  59. private string IsLogin(HttpContext context)  
  60. {  
  61. if (context.Request["user"] == null || context.Request["password"] == null)  
  62. {  
  63. context.Session["login"] = "success";  
  64. return "";  
  65. }  
  66. else  
  67. {  
  68. string server = HttpUtility.UrlDecode(context.Request["sqlServer"]);  
  69. string user = HttpUtility.UrlDecode(context.Request["user"]);  
  70. string password = HttpUtility.UrlDecode(context.Request["password"]);  
  71. string sqlConstring;  
  72. if (Common.IsLogin(server, user, password, out sqlConstring))  
  73. {  
  74. context.Session["login"] = sqlConstring;  
  75. return "True";  
  76. }  
  77. else  
  78. {  
  79. return "False";  
  80. }  
  81. }  
  82. }  
  83.  
  84. public bool IsReusable {  
  85. get {  
  86. return false;  
  87. }  
  88. }  
  89. }  

Common.cs 

  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Data.Sql;  
  6. using System.Data.SqlClient;  
  7. using System.Data;  
  8.  
  9. /// <summary>  
  10. /// Summary description for Common  
  11. /// </summary>  
  12. public class Common  
  13. {  
  14. public Common()  
  15. {  
  16. //  
  17. // TODO: Add constructor logic here  
  18. //  
  19. }  
  20.  
  21. /// <summary>  
  22. /// 加载SQL服务列表  
  23. /// </summary>  
  24. /// <returns></returns>  
  25. public static IList<string> GetServers()  
  26. {  
  27. IList<string> list = new List<string>();  
  28. SqlDataSourceEnumerator sse = SqlClientFactory.Instance.CreateDataSourceEnumerator() as SqlDataSourceEnumerator;  
  29. if (sse == nullreturn null;  
  30. DataTable dt = sse.GetDataSources();  
  31. foreach (DataRow dr in dt.Rows)  
  32. {  
  33. string server = dr["ServerName"] as string;  
  34. string instance = dr["InstanceName"] as string;  
  35. if (string.IsNullOrEmpty(instance) || instance.ToUpper() == "MSSQLSERVER")  
  36. list.Add(server);  
  37. else  
  38. list.Add(server + @"" + instance);  
  39. }  
  40. return list;  
  41. }  
  42.  
  43. /// <summary>  
  44. /// SQL Server Authentication  
  45. /// </summary>  
  46. /// <param name="server">SQL服务</param>  
  47. /// <param name="user">用户名</param>  
  48. /// <param name="password">密码</param>  
  49. /// <param name="sqlConstring">数据库连接字符串</param>  
  50. /// <returns></returns>  
  51. public static bool IsLogin(string server,string user,string password,out string sqlConstring)  
  52. {  
  53. sqlConstring = string.Format("Data Source={0};Initial Catalog=master;Persist Security Info=True;User ID={1};Password={2}", server, user, password);  
  54. return SQLHelper.LoginSQL(sqlConstring);  
  55. }  
  56. }  

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.rar 

作者 cnblogs xu_happy_you

标签:

相关文章

热门资讯

玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分
玄元剑仙肉身有什么用 玄元剑仙肉身境界等级划分 2019-06-21
华为nova5pro和p30pro哪个好 华为nova5pro和华为p30pro对比详情
华为nova5pro和p30pro哪个好 华为nova5pro和华为p30pro对比详情 2019-06-22
男生常说24816是什么意思?女生说13579是什么意思?
男生常说24816是什么意思?女生说13579是什么意思? 2019-09-17
抖音撒撒累累是什么歌 撒撒累累张艺兴歌曲名字
抖音撒撒累累是什么歌 撒撒累累张艺兴歌曲名字 2019-06-05
超A是什么意思 你好a表达的是什么
超A是什么意思 你好a表达的是什么 2019-06-06
返回顶部