Namespace loading Layer
{
/// <Summary>
/// $ Codebehindclassname $ abstract description
/// </Summary>
[WebService (Namespace = "http://tempuri.org/")]
[WebServiceBinding (ConformsTo = WsiProfiles. BasicProfile1_1)]
Public class ReadData: IHttpHandler
{
Public void ProcessRequest (HttpContext context)
{
// Context. Response. ContentType = "text/plain ";
// Context. Response. Write ("Hello World ");
// Obtain the variable I that is passed in externally
Int I = Int32.Parse (context. Request. QueryString ["I"]);
// Connect to the database
SqlConnection con = new SqlConnection ("data source =.; user id = sa; pwd = 5239898; database = librarydatabase ;");
Con. Open ();
SqlDataAdapter ada = new SqlDataAdapter ("select * from reader where serial number = '" + I + "'", con );
SqlCommandBuilder com = new SqlCommandBuilder (ada );
DataSet ds = new DataSet ();
Ada. Fill (ds, "reader ");
Con. Close ();
// Read the field value whose field is "name" in the table and Output
Context. Response. Write (ds. Tables ["reader"]. Rows [0] ["name"]. ToString ());
}
Public bool IsReusable
{
Get
{
Return false;
}
}
}
}
Then we need to create a JavaScript file named loaddata. js. Enter the following code:
Copy codeThe Code is as follows:/* Automatically add a Click event for the two links after the DOM is loaded */
$ ("Document"). ready (function (){
$ ("A [href = javascript]"). click (function (){
Chkform ();
Return false;
})
$ ("A [href = test]"). click (function (){
$ ("# Load" ).css ("display", "none ");
$ ("# Mark" ).css ("display", "none ");
Return false;
})
});
Var chkform = function (){
New Request ({
/* Call a general handler to capture data in the background and return the txt variable */
Url: 'readdata. ashx? I = '+ $ ("# Text1"). attr ("value "),
/* After the data is captured successfully */
OnSuccess: function (txt ){
$ ("# Load"). append ("<P>" + txt + "</P> ");
$ ("# Load" ).css ("display", "block ");
$ ("# Mark" ).css ("display", "block ");
},
/* Capturing */
OnRequest: function (){
$ ("# Load"). append ("<P> loading </P> ");
},
/* Data Loading failed */
OnFailure: function (){
Alert ('information loading failed! ');
}
}). Send ();
}
In addition, we want to add a new cssfile named main.css, which goes deep into the following style:Copy codeThe Code is as follows: # mark {
Width: 100%;
Background-color: White;
Position: absolute;
Left: 0px;
Top: 0px;
Height: 700px;
Filter: alpha (opacity = 70 );
-Moz-opacity: 70;
Opacity: 70;
Z-index: 2;
Display: none;
}
# Load
{
Background-color: Gray;
Border: 1px solid #999;
Font-size: 12px;
Position: relative;
Margin: 0 auto;
Margin-top: 100px;
Width: 200px;
Height: 150px;
Z-index: 99;
Display: none;
}
Enter the following code in the source code on the homepage:Copy codeThe Code is as follows: <% @ Page Language = "C #" AutoEventWireup = "true" CodeBehind = "Default. aspx. cs" Inherits = "loading layer. _ Default" %>
<! 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">
<Head runat = "server">
<Title> loading layer </title>
<Link type = "text/css" href = "main.css" rel = "Stylesheet"/>
<Script type = "text/javascript" src = "mootools. js"> </script> // remember to introduce this javascript library file.
<Script type = "text/javascript" src = "jquery-1.3.1-vsdoc.js"> </script> // VS files that support smart prompts, optional
<Script type = "text/javascript" src = "jquery-1.3.1.js"> </script> // remember to introduce JQuery
<Script type = "text/javascript" src = "loaddata. js"> </script>
</Head>
<Body>
<Div id = "me">
<A href = "javascript"> click to load </a>
<Input id = "Text1" type = "text"/> </div>
<Div id = "load">
Load <a href = "test"> try </a>
</Div>
<Div id = "mark">
</Div>
</Body>
</Html>
So far, we have achieved the desired effect.
And the DEMO will be released soon.
The link and text box above are in the "gray" status and cannot be edited. Click the link of the pop-up layer in the middle to return to the initial state. The page is not refreshed throughout the process!
Demo: http://xiazai.jb51.net/200911/yuanma/asp.net_jquery_jiazaiceng.rar
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
