In the released ASP. net2.0, the development of the brushless newest page has many changes with beta2. In addition, when more and more Ajax Development Kits are developed, ASP. net2.0's no-refreshing page technology is not widely known, and many people even think this feature is a little "chicken ". However, if we only add a few Ajax features, Atlas, and Ajax. net to the program, it will seem a bit like a cool. In addition, I think it is not very complicated to use the methods provided by ASP. net2.0 for development. On the contrary, very little code can be used to achieve great results!
Next I will show you step by step how to develop a new page without refreshing!
Step 1: implement the icallbackeventhandler Interface
The icallbackeventhandler interface is located under the System. Web. UI namespace. In beta2, icallbackeventhandler only contains one raisecallbackevent method, that is, the callback event is processed and the processing result is returned. In the official version, it becomes a member method that includes getcallbackresult and raisecallbackevent. The first method is used to return the result of the callback event, and the second method is used to return the callback event. This change is mainly made to write Web controls. For details, refer to the implementation code in controls such as gridview.
Create a web site and modify the default. aspx. CS file:
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. webcontrols. webparts;
Using system. Web. UI. htmlcontrols;
Public partial class _ default: system. Web. UI. Page, icallbackeventhandler
{
Protected void page_load (Object sender, eventargs E)
{
}
Private string STR;
Public void raisecallbackevent (string eventargument)
{
// Different processing logic can be called based on different passed parameters
STR = "content returned from the server:" + eventargument;
}
Public String getcallbackresult ()
{
Return STR;
}
}
Step 2: register the callback Method
We add a Textbox, a label, and an HTML control button on the default. aspx page, and add an onclick event to the button:
<% @ Page Language = "C #" autoeventwireup = "true" codefile = "default. aspx. cs" inherits = "_ 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> No title page </title>
<SCRIPT type = "text/JavaScript">
<! --
// Called by the button
Function callserver (inputcontrol, context)
{
Context. innerhtml = "loading ";
Arg = inputcontrol. value;
// Register the callback Method
<% = Clientscript. getcallbackeventreference (this, "Arg", "eseserverdata", "context") %>;
}
// The function registered in the callback method to receive returned results
Function compute eserverdata (result, context)
{
Context. innerhtml = result;
}
// -->
</SCRIPT>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div>
<Asp: textbox id = "textbox1" runat = "server"> </ASP: textbox>
<Br/>
<Input id = "button1" type = "button" value = "button" Language = "JavaScript" onclick = "callserver (textbox1, label1)"/> <br/>
<Asp: Label id = "label1" runat = "server" text = "label"> </ASP: Label> </div>
</Form>
</Body>
</Html>
Now, the development of a refreshing page is complete. It can write the text you entered in the textbox back to the label of the page through the server code. Is it easy? You can run your program to see the effect!
Next we will analyze the code.
First, let's see <% = clientscript. getcallbackeventreference (this, "Arg", "eseserverdata", "context") %>;
Clientscript is an attribute of the system. Web. UI. Page object. It is a system. Web. UI. clientscriptmanager object. Used to manage client scripts. The getcallbackeventreference method is used to register client callbacks for a server event. Its fourth parameter "context" is very important, but there are no relevant examples and detailed descriptions in msdn. In the code above, we can see that the context parameter passed when calling the callserver method is label1, and the second parameter "context" of receiveserverdata is the transferred label1. In my example, context is used to set a control to display the results returned by the server. In fact, you can assign any object to the context, and it will be passed to the local end to process the callback returned result function. In this way, you can return results based on the specified "context" before the call!
In the complete example given below, you can see an example of refreshing the display of the gridview using context.
Here I would like to say a digress. The important parameters such as context are not described in detail in msdn, but the callback example in the official Chinese version of vs2005 is still implemented in beta2! Msdn of this version can be said to be the worst-quality version I have used. However, the current msnd can be described as "rather large", and errors are inevitable. I hope the next version of msnd will be better.
OK. It is not difficult to develop something with Ajax features in ASP. NET 2.0! It is actually two steps:
1. Implement the icallbackeventhandler interface on the server. In the methods contained in the interface, call different processing methods based on the passed parameters, and then return results;
2. register the callback function on the client side (you can also register the callback function on the server side), and then implement the function to process the callback result. If you can flexibly run the context, you can achieve very good results.
. Aspx code
<% @ Page Language = "C #" autoeventwireup = "true" codefile = "default. aspx. cs" inherits = "_ 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> ASP. NET 2.0 page to submit a demo without refreshing </title>
<SCRIPT type = "text/JavaScript">
Function callserver1 (inputcontrol, context)
{
Context. innerhtml = " loading ";
Arg = 'servermethod1 | '+ inputcontrol. value;
<% = Clientscript. getcallbackeventreference (this, "Arg", "eseserverdata1", "context") %>;
}
Function extends eserverdata1 (result, context)
{
Context. innerhtml = context. ID + ":" + result;
}
Function callserver2 (OBJ)
{
Context = gridspan;
Context. innerhtml = " loading data ";
Arg = "servermethod2 |" + obj. value;
<% = Clientscript. getcallbackeventreference (this, "Arg", "eseserverdata2", "context") %>;
}
Function extends eserverdata2 (result, context)
{
Context. innerhtml = result;
}
</SCRIPT>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div>
<H1> demo1: HTML button to submit data <Asp: textbox id = "textbox1" runat = "server"> </ASP: textbox>
<Input id = "button1" type = "button" value = "Submit to label1" onclick = "callserver1 (textbox1, label1)"/>
<Input id = "button2" type = "button" value = "Submit to label2" onclick = "callserver1 (textbox1, label2)"/>
<Br/>
<Asp: Label id = "label1" runat = "server" text = "label1:"> </ASP: Label>
<Br/>
<Asp: Label id = "label2" runat = "server" text = "label2:"> </ASP: Label>
</Div>
<HR/>
<Div>
<H1> demo2: Server button to submit data <Asp: textbox id = "textbox2" runat = "server"> </ASP: textbox>
<Asp: button id = "button3" runat = "server" text = "button"/> <br/>
<Asp: Label id = "label3" runat = "server" text = "label3:"> </ASP: Label> </div>
<HR/>
<Div>
<H1> demo3: bind data to the gridview drop-down list box <Asp: sqldatasource id = "sqldatasource1" runat = "server" connectionstring = "<% $ connectionstrings: Test %>"
Selectcommand = "select distinct (country) from MERs"> </ASP: sqldatasource>
<Asp: sqldatasource id = "sqldatasource2" runat = "server" connectionstring = "<% $ connectionstrings: Test %>"
Selectcommand = "select customerid, companyName, country from customers where country = @ country">
<Selectparameters>
<Asp: controlparameter name = "country" controlid = "dropdownlist1" propertyname = "selectedvalue"/>
</Selectparameters>
</ASP: sqldatasource>
<Div>
<Asp: dropdownlist id = "dropdownlist1" runat = "server" width = "239px"
Datasourceid = "sqldatasource1" datatextfield = "country" datavaluefield = "country">
</ASP: dropdownlist>
</Div>
<Br/>
<Span id = "gridspan">
<Asp: gridview id = "gridview1" runat = "server" performanceid = "sqlperformance2">
</ASP: gridview>
</Span>
</Div>
</Form>
</Body>
</Html>
. CS code
Using system;
Using system. Data;
Using system. configuration;
Using system. Web;
Using system. Web. Security;
Using system. Web. UI;
Using system. Web. UI. webcontrols;
Using system. Web. UI. webcontrols. webparts;
Using system. Web. UI. htmlcontrols;
Using system. IO;
Using system. Globalization;
Public partial class _ default: system. Web. UI. Page, icallbackeventhandler
{
Protected void page_load (Object sender, eventargs E)
{
// Handle client event registration
Button3.attributes. Add ("onclick", "callserver1 (textbox2, label3); Return false ;");
Dropdownlist1.attributes. Add ("onchange", "callserver2 (this )");
}
Private string serverreturn;
Public String getcallbackresult ()
{
// Add latency for ease of viewing Loading results
System. Threading. thread. Sleep (2000 );
String [] parts = serverreturn. Split ('| ');
// Call the API Based on the passed method name and pass the corresponding parameter. Currently, only one parameter is supported.
Return (string) GetType (). getmethod (parts [0]). Invoke (this, new object [] {parts [1]});
}
Public void raisecallbackevent (string eventargument)
{
Serverreturn = eventargument;
}
// According to the English country name or abbreviation sent from the client, translate it into the corresponding Chinese country name
Public String servermethod1 (string Arg)
{
String S;
Switch (Arg. tolower ())
{
Case "cn ":
Case "China ":
S = "China ";
Break;
Case "us ":
S = "USA ";
Break;
Default:
S = "unknown country ";
Break;
}
Return S;
}
// Update the content of the gridview based on the value sent from the client, and return the updated html of the gridview
Public String servermethod2 (string Arg)
{
Dropdownlist1.selectedvalue = ARG;
Gridview1.databind ();
Return rendercontrol (gridview1 );
}
Private string rendercontrol (Control)
{
Stringwriter writer1 = new stringwriter (cultureinfo. invariantculture );
Htmltextwriter writer2 = new htmltextwriter (writer1 );
Control. rendercontrol (writer2 );
Writer2.flush ();
Writer2.close ();
Return writer1.tostring ();
}
}
Web. config
<Configuration>
<Appsettings/>
<Connectionstrings>
<Add name = "test" connectionstring = "Server = (local); Integrated Security = true; database = pubs"/>
</Connectionstrings>
<System. Web>
<Compilation DEBUG = "true"/>
</System. Web>
</Configuration>
Customers. SQL
Use pubs
Go
Create Table MERs
(
Customerid int identity () primary key, -- the primary key automatically increases
CompanyName varchar (20) not null, -- company name
Country varchar (20) not null -- Country
)
Insert into MERs values ('Chinese company ', 'cn ')
Insert into MERs values ('Chinese company ', 'China ')
Insert into MERs values ('American company ', 'us ')
Insert into MERs values ('Korean company ', 'corea ')
Insert into MERs values ('Singapore company ', 'Singapore ')
Select * from MERs
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
