(1)YesButton clickAction;
(2)It is not clear to return the system time only.
Therefore, for initial contactAjaxOrAtlas frameworkMay not tell you what such a thing can do? With the originalPostBackThere seems to be little difference in technology. To let you know the real difference between the two, I will slightly rewrite the example:
(1)InClientTerminal"Input"Added"Onkeyup"Event to call the backend after the keyboard is releasedWeb ServiceOfJavascriptCommandTextboxThe name entered in is passed as a parameterWeb Service;
(2)BackendWeb ServiceByAdo. netQueryNorthwindBeifeng database returns consistent user Personal Data
(3)Final cable connectionButtonButtons are discarded, so you can better understand what isAjaxAsynchronous technology.
This example uses the traditionalJavascriptCall in asynchronous modeWeb Service, And thisWeb ServiceTheAdo. netQueryEmployeesEmployee data table and send qualified employee data backClientTerminal screen display.
Though simplified, it is just being done.ClientTerminal andServerBut it can be divided into three steps. The following is a description (we recommend that you copy and pasteProgramCodeFor a pure experienceAtlasPower ):
Step 1: CreateMaster page
ThisMaster pageWill be used by the first four examples,Masterpage. MasterThe program code is as follows:
<% @ Master language = "C #" %>
<! Doctype HTML public "-// W 3c // Dtd xhtml 1.0 transitional // en "" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<HTML xmlns = "http://www.w3.org/1999/xhtml" XML: lang = "en" lang = "en">
<Head id = "head1" runat = "server">
<Asp: contentplaceholder runat = "server" id = "scriptincludes">
<Atlas: script id = "script1" runat = "server" Path = "~ /Scriptlibrary/atlascompat. js "browser =" Mozilla "/>
<Atlas: script id = "script2" runat = "server" Path = "~ /Scriptlibrary/atlascompat. js "browser =" Firefox "/>
<Atlas: script id = "script3" runat = "server" Path = "~ /Scriptlibrary/atlascompat. js "browser =" applemac-Safari "/>
<Atlas: script id = "script4" runat = "server" Path = "~ /Scriptlibrary/atlascore. js "/>
<Atlas: script id = "script5" runat = "server" Path = "~ /Scriptlibrary/atlascompat2.js "browser =" applemac-Safari "/>
</ASP: contentplaceholder>
<LINK rel = "stylesheet" type = "text/CSS" href = "site.css"/>
<Asp: contentplaceholder runat = "server" id = "head"/>
</Head>
<Body>
<Asp: contentplaceholder id = "Main" runat = "server">
</ASP: contentplaceholder>
</Body>
</Html>
Program description:
(1)You can seeMaster pageA bunch<Atlas: SCRIPT>To achieve browser (cross-platform) compatibility, you do not have to write several web programs for different browsers.ArticleOnce said :「LibrariesThe function library automatically handles compatibility issues with different browsers.ScriptsIs necessary .」 Therefore, we can understand from this pointAtlas frameworkIt's not just about making a pie. It's really based on the original blueprint.
(2)WhileScriptlibraryIt is improved.JavascriptThe function library supports inheritance, encapsulation, interfaces, and many other object-oriented features.Atlas frameworkA very important part of program operation
(3) master pageIt is not necessary, but a borrowMaster pageMechanism to joinAtlas scriptAnd the purpose of the theme.
Step 2: CreateDefault. aspxContent Page Program
Establish and useMaster pageOfDefault. aspxContent Page, which mainly includesTextInput and information display, plus twoJavaScript functionTo callEmployeeservice. asmx WebThe program is as follows:
<% @ Page Language = "C #" masterpagefile = "~ /Masterpage. Master "autoeventwireup =" true "codefile =" default. aspx. cs "inherits =" _ default "Title ="Teaching, educating, and destroying othersAtlasExample 1"%>
<Asp: Content ID = "content1" contentplaceholderid = "Main" runat = "server">
<Form action = "">
<Div>
Enter employee name:
<Input id = "inputname" type = "text" onkeyup = "dosearch ()"/>
</Div>
</Form>
<HR style = "width: 300px"/>
<Div>
<Span id = "Results"> </span>
</Div>
<SCRIPT type = "text/JavaScript" src = "employeeservice. asmx/JS">
</SCRIPT>
<SCRIPT type = "text/JavaScript">
Function dosearch ()
{
VaR srchelem = Document. getelementbyid ("inputname ");
Samples. ASPnet. employeeservice. employee (srchelem. Value, onrequestcomplete );
}
Function onrequestcomplete (result)
{
VaR rsltelem = Document. getelementbyid ("Results ");
Rsltelem. innerhtml = result;
}
</SCRIPT>
</ASP: content>
Program description:
In the original exampleButtonButton.AjaxAsynchronous technology, deliberatelyButtonThe button is removed,InputAddedOnkeyupEvent:
<Input id = "inputname" type = "text" onkeyup = "dosearch ()"/>
Release on the keyboard.JavascriptCall the service.
Step 3: CreateEmployeeservice. asmx WebService
The function of this program is to return the basic data of employees to the front-end. After receiving the data, the front-end will automatically update the screen.Ado. netTo query the north wind databaseEmployeesData TableWeb Service.
<% @ WebService Language = "C #" class = "samples. ASPnet. employeeservice" %>
Using system;
Using system. Web;
Using system. Web. Services;
Using system. Web. Services. Protocols;
Using system. Data;
Using system. Data. sqlclient;
Namespace samples. ASPnet {
[WebService (namespace = "http://tempuri.org/")]
[Webservicebinding (conformsto = wsiprofiles. basicprofile1_1)]
Public class employeeservice: system. Web. Services. WebService
{
[Webmethod]
Public String employee (string txtfirstname)
{
Sqlconnection conn = new sqlconnection ("Data Source =.; initial catalog = northwind; user id = sa; Password = 89690 ");
Conn. open ();
Sqlcommand cmd = new sqlcommand ("select employeeid, firstname, city, address from employees where firstname like '" + txtfirstname + "%'", Conn );
Cmd. Parameters. Add ("@ firstname", sqldbtype. nvarchar, 10). value = txtfirstname;
Sqldatareader DR = cmd. executereader ();
String txtmsg = "";
If (string. isnullorempty (txtfirstname ))
{
Txtmsg = "<font color = 'blue'>Enter name</Font> ";
}
Else
{
Txtmsg = "<font color = 'red'>No such person found!</Font> ";
}
Int I = 0;
While (dr. Read ())
{
If (I = 0)
{
Txtmsg = "";
}
Txtmsg + ="Employee code:"+ Dr [" employeeid "] + ",";
Txtmsg + ="Name:"+ Dr [" firstname "] + ",";
Txtmsg + ="Residential city:"+ Dr [" city "] + ",";
Txtmsg + ="Address:"+ Dr [" Address "] + ",";
Txtmsg + = "<br> ";
I ++;
}
Cmd. Dispose ();
Dr. Dispose ();
Conn. Dispose ();
Return txtmsg ;//Return detailed user data
}
}
}
Program description:
(1)The above is a typical exampleAdo. netDatabase programTextboxThe enteredFirstnameQuery the database as a parameter and return the matching results to the front-end.
(2)Change the password of your database account to the password of your database account in the exercise environment.
Therefore, you can enterNancy,StevenOrRobertAnd other employeesFirstnameAfter the name is tested, the basic employee data is automatically returned.
Figure2DefaultEmployee basic data query results
DefaultIs to establish basicASP. NET AtlasWebpage applications are basically doing two things:
·CreateClientEnd-to-end displayASP. NETWebpage (UseMaster page).
·CreateServerTerminalWeb Service.
The above Procedures refer to MicrosoftAtlas.
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
