Use AJAX in ASP. NET

Source: Internet
Author: User
Tags datetime getdate

Asp.net controls also encapsulate html controls, and js operations are not so straightforward.

According to Surance (http://www.fltek.com.cn/) research, in asp.net, there are three ways to use ajax is relatively simple. It is regarded as a compensation solution of ms.

One is PageMethod, the other is ICallbackEventHandler, and the other is ajax control that comes with ms.

The following are examples of functions to be implemented:

There is a div and a button on the page. Click the button to call the background method to obtain a time, and then write the time into the div. Do not refresh the page

In addition, there is a background button. Click this button to get the saved value.

Method 1 in AJAX in ASP. NET: pagemehtodd

Step 1: Create an asp.net ajax website (or create a common website and modify webconfig)

Step 2: Create a control on the page:

<Asp: ScriptManager ID = "ScriptManager1" runat = "server" EnablePageMethods = "true"/>

<Div id = "show" runat = "server"> aaaa </div>

<Asp: HiddenField ID = "HiddenField1" runat = "server"/>

<Input type = "button" value = "1111" onclick = "myFun ()" id = "Button2"/>

<Asp: Button ID = "Button1" runat = "server" Text = "getValue"

OnClick = "button#click"/>

Step 3: js

<Script>

Function myFun (){

PageMethods. GetDate ('A', myCallBack)

}

Function myCallBack (result ){

Var di = document. getElementById ("HiddenField1 ");

Di. value = result;

Var di = document. getElementById ("show ");

Di. innerHTML = result;

}

</Script>

Step 4: Background code

Note: This method must be a static method and must be written to the following features.

Therefore, this method cannot directly access the page value.

[System. Web. Services. WebMethod]

Public static DateTime GetDate (string ){

Return DateTime. Now;

}

Protected void button#click (object sender, EventArgs e ){

DataTable dt = (DataTable) this. DataList1.DataSource;

Response. Write (dt. Rows. Count );

}

Method 2 in ASP. NET using AJAX: using ICallbackEventHandler

The first step is the same as above.

Step 2: page implementation interface

Public partial class Default2: System. Web. UI. Page, ICallbackEventHandler

Step 3: Create a control

<Form id = "form1" runat = "server">

<Div id = "show"> </div>

<Input type = "button" onclick = "CallServer ()" value = "CallServer"> </input>

Step 4,

Write js

<Script type = "text/javascript">

Function CallServer (){

Var product = "1 ";

<% = ClientScript. GetCallbackEventReference

(This, "product", "ReceiveServerData", null) %>;

}

Function exploreserverdata (rValue ){

Alert (rValue );

Var di = document. getElementById ("show ");

Di. innerHTML = rValue;

}

</Script>

Step 5,


Background code


Declared variable: public string CallBackValue;


Interface method:

 

Public string GetCallbackResult (){

Return CallBackValue + ", OK ";

}

Public void RaiseCallbackEvent (string eventArgument ){

This. CallBackValue = eventArgument;

}

Note: RaiseCallbackEvent is a practical method.


GetCallbackResult is the callback method after the action is executed.


You can modify the value of a widget.


First, execute the background callback method, and then execute the frontend js callback method.


You can use RenderControl and other classes to output the asp.net control as html


You can use switchargument in RaiseCallbackEvent to check where the message is sent to call different functions.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.