The div pop-up layer Ajax login (jquery version +c#)

The div pop-up layer Ajax login (jquery version +c#) _ Practical Tips

Last Update:2017-01-19 Source: Internet

Author: User

Tags httpcontext

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

Page initialization, the interface as shown in the picture:

When the Server name text box gets the focus, the interface looks like this (this can be changed to your login verification code):

You can load the SQL Server services list, which is also my simple SQL Query Analyzer comment on the method given by the silent night, thank you very much!

The load list is shown in the following illustration:

You can click Add to server name at random, as shown in the screenshot at login:

text box validation is all written! There are authentication authentication methods, Windows verify that the Login,password text box is banned! Due to time reasons, not on the map

demo.html (all foreground code, JS/CSS is not yet stored in the file)

Copy Code code as follows:

<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<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>
<body>
<div class= "Top" ><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;d isplay:block;z-index:100;width:100%;p osition:absolute;top:0;left:0;}
#login {margin:0 auto;width:420px;height:auto;border:solid 1px #ccc;p osition: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%;p adding:7px 7px 6px;border-color: #B3B3B3 #EAEAEA #EAEAEA #B3B3B3; border-style:solid; Border-width:1px;color:black;}
#login select{width:86%;p adding:7px 7px 6px border-color: #B3B3B3 #EAEAEA #EAEAEA #B3B3B3; border-style:solid;border-w Idth: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. 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 ' right ' class= ><a ' 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= "The" "><a id=" Loadserver "href=" javascript:void (0); "title=" Click Load SQL Server Services list > click Load SQL Server Services list </a></div>
</div>
</div>
</div>
</div>
<div class= ' top ' ><div class= ' left ' >authentication:</div><div ' right ' class= ><select ' 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 ' right ' class= ><input ' txtUserName "type=" text "/></div></div>
<div class= ' top ' ><div class= ' left ' >password:</div><div ' right ' class= ><input ' 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>
<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. I"). html (" is loading, please wait a moment ... '},
Success:function (data) {
if (data = = "Error") {
$ ("#poper. a"). html ("<font color=red> Service list failed to load, refresh reload </font>");
else if (data = = "Empty") {
$ ("#poper. I"). html ("<font color=red> no data, please fill </font> manually");
} else {
$ ("#poper. a"). Remove ();
$ ("#poper"). Append (data);
ALink ();
}
},
Error:function () {$ ("#poper. a"). html ("<font color=red> system error, please contact admin!") </font> "); }
});
});
})

$ ("#btnConnect"). Click (function () {
if ($ ("#selectAuthentication"). val () = "sql") {//sql Server authentication
if ($ ("#txtServer"). Val (). length < 1) {
$ ("#message"). CSS ("Color", "red"); $ ("#message"). HTML ("Please enter server name");
else if ($ ("#txtUserName"). Val (). length < 1) {
$ ("#message"). CSS ("Color", "red"); $ ("#message"). HTML ("Please enter login");
else if ($ ("#txtPassword"). Val (). length < 1) {
$ ("#message"). CSS ("Color", "red"); $ ("#message"). HTML ("Please enter 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 (" is verifying, please later ... '); },
Success:function (data) {
if (data = = "True") {
$ ("#message"). HTML ("");
Hidelogin ();
$ ("#browser"). FadeIn ("fast");
}
},
Error:function () {$ ("#message"). CSS ("Color", "red"); $ ("#message"). HTML ("Logon failed");
});
}
}
});

$ (function () {
var screenwidth, ScreenHeight, Mytop, Getposleft, Getpostop
ScreenWidth = $ (window). width ();
ScreenHeight = $ (window). Height ();
Get offset from top of scroll bar
Mytop = $ (document). ScrollTop ();
Calculates left of the pop-up layer
Getposleft = SCREENWIDTH/2-200;
Calculate top of pop-up layer
Getpostop = SCREENHEIGHT/2-150;
CSS Positioning pop-up layer
$ ("#login"). CSS ({"Left": Getposleft, "Top": Getpostop});
When the browser window size changes
$ (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});
});
When you pull the scroll bar, the pop-up layer moves along
$ (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});
});
Click on the Close button
$ ("#login_close"). Click (function () {
Hidelogin ();
});

$ ("#btnOK"). Click (function () {
$ ("#login"). Fadeout ("slow");
$ ("#browser"). FadeIn ("slow");
Remove dimmed layer
$ ("#greybackground"). Remove ();
return false;
});
$.get ("Ashx/handler.ashx?flag=islogin", function (data) {
if (data = = "True") {//no login, show login box
Hidelogin ();
} else {
Showlogin ();
}
});
});

function Showlogin () {//Display landing box
$ ("#login"). FadeIn ("slow");
Get the height of the page document
var docheight = $ (document). Height ();
Append a layer to make the background dimmed
$ ("Body"). Append ("<div id= ' Greybackground ' ></div>");
$ ("#greybackground"). CSS ({"opacity": "0.5", "Height": docheight});
return false;
}
function Hidelogin () {
$ ("#login"). Fadeout ("slow");
Remove dimmed layer
$ ("#greybackground"). Remove ();
return false;
}
Function ALink () {//generated a append click event
$ ("#poper. Second a"). each (function () {
$ (this). Click (function () {
var a = $ (this). html ();
$ ("#txtServer"). Val (a);
});
});
}
</script>

Handler.ashx

Copy Code code as follows:

<%@ 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 ()//To determine whether to log on to SQL
Break
Case "Login":
Tempvalue = IsLogin (context);
Break
Default
Tempvalue = "Error";
Break
}
}
Context. Response.Write (Tempvalue);
}

<summary>
Load SQL Server Services list
</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>
Log on to 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["SQL Server"]);
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

Copy Code code as follows:

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>
Load SQL Services list
</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 services </param>
<param name= "User" > Username </param>
<param name= "password" > Password </param>
<param name= "sqlconstring" > Database connection string </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

Copy Code code as follows:

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>
To determine whether to log on to 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;
}
}
}

Source code Download: Database_jquery_div_jb51.rar

Author Cnblogs xu_happy_you

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More