How Ajax is used for Web Components

Source: Internet
Author: User
(From: windy column)
Address: http://sharethispoint.com/archive/2006/11/15/Build-web-parts-with-ajax.aspx
How can I use Ajax when developing Web components? Let's take a webpart similar to KPI and BDC Web Part in Moss 2007 as an example. If you do not know Ajax at all, we recommend that you learn terrylee's Ajax getting started series.
ASP. net2.0 has a cool new feature called client script callback. Script callback mainly allows us to use JavaScript to call methods in the server program, and then perform some operations based on the results. This allows us to dynamically update a part of the page, as we will see in the webpart below, without refreshing the whole page. For the use of client script callback in. net2.0, refer to the following article address (http://msdn.microsoft.com/msdnmag/issues/04/08/CuttingEdge/), which gives a detailed explanation. However, the article does not detail how to use it exactly with our code. In fact, the script callback feature is integrated into. Net, which can be easily used.
In this example, we assume that such a webpart takes a long time to display the content. To solve this problem and give users a better experience, we decided to let the render method output only one empty Div tag when the webpart was just loaded, and then we replaced the content of the DIV through Ajax, display the actual content. In this way, you can take a look at other content before loading the content of our webpart after loading the page.

Next we will start.

First, create a new webpart project. Add the following namespace in our webpart class.

Using system. Web. UI;
Using system. Web. UI. webcontrols;
Using system. Web. UI. webcontrols. webparts;

To make. Net aware that our class requires script callback, The system. Web. UI. icallbackeventhandler interface must be implemented.

Public class treeviewrollup: webpart, icallbackeventhandler

The icallbackeventhandler interface has two methods: Public String getcallbackresult () and Public void raisecallbackevent (string eventargs). We will introduce them later.
Let's first define two variables

Private string datadiv; // used to save the DIV Tag Name
Private string ajaxdata; // used to save the data returned by Ajax

The datadiv variable saves the ID of the DIV tag of the content we intend to output in HTML. The DIV tag name must be unique in a webpart instance. If it is always a fixed name, when we have two webpart instances in a page, they may replace the content of the other side.
Add the following code to the rendercontents method of webpart:

Protected override void rendercontents (htmltextwriter writer)
{
This. datadiv = This. clientid + "content"; // Add a given name to the Client ID of the webpart instance
Writer. write ("<Div id = \" "+ this. datadiv + "\"> </div> ");
}

We added a small GIF chart with a progress bar in the DIV label of the last row. The image in wssv3 is used directly.

Paste the following code in onload:

Protected override void onload (eventargs E)
{
This. datadiv = This. clientid + "content ";
String JS = page. clientscript. getcallbackeventreference (this, "'blah'", "filldiv", "'" + this. datadiv + "'", true );
String contentloader = "Var ajaxcommands =''; window. onload = ajaxloader; function ajaxloader () {eval (ajaxcommands);} function filldiv (ARG, CTX) {var mydiv = document. getelementbyid (CTX); mydiv. innerhtml = ARG ;}";

If (page. clientscript. isclientscriptblockregistered ("contentloader") = false)
Page. clientscript. registerclientscriptblock (page. clientscript. GetType (), "contentloader", contentloader, true );

Page. clientscript. registerstartupscript (this. getType (), "myloader" + this. clientid, "ajaxcommands = ajaxcommands + \" "+ JS +"; \ ";", true); // use the Client ID of the webpart instance with a given name as the script key
Base. onload (E );
}

Two different JavaScript blocks are registered in this method.
The JS value of the first string comes from getcallbackeventreference. The getcallbackeventreference method is used to return the JavaScript code that executes the Callback Server to obtain data. We passed: a reference of the current control (webpart); "blah", as the initial data. After the callback is started, it will be passed to our server component; the name of the JavaScript method called after the callback ends; the name of the DIV tag of the content marked by us; the necessary parameters such as the asynchronous switch set to true.
The javascript generated using this method is similar to the following:

Webform_docallback ('ctl00 $ M $ g_a010b3bd_1a68_40f9_b46b_f87050cf516f ', 'blah', filldiv, 'ctl00 _ done', null, true );

We can use this JavaScript code for a button onclick event to start the callback and fill in the DIV tag.
In this example, we do not want the user to click anything To Continue loading the webpart. Therefore, we need to call the webform_docallback method when loading the page in the browser. This is implemented using the contentloader string. The contentloader string defines a javascript variable, ajaxcommands, which is used to save some commands we are going to execute. At the same time, we set the window. onload event to execute the ajaxloader method. When the ajaxloader method is run, all commands in the ajaxcommands variable will be executed through the eval function.
Why? This is because if we have more than two Ajax webpart instances on a page, each instance will load data through the window. onload event, and the problem arises. Only the last set event handler will be executed, not all settings will be executed. For this reason, we set a side ball. Set a command method in window. onload. Each webpart only extends its webform_docallback to the ajaxcommands variable. In this way, at least the problem in this example is solved. It should be considered a good way.
Finally, the contentloader string also includes the filldiv method, which is used to set the HTML content returned by the callback in the div.

The last step is to register the script to the page in the onload method of our class. We only need to have a contentloader Javascript script on a page. Therefore, before registering, we should first determine whether other webparts on the page have been registered through the script manager.

The rest is the two methods required to implement the icallbackeventhandler interface.

String icallbackeventhandler. getcallbackresult ()
{
Return this. ajaxdata;
}

Void icallbackeventhandler. raisecallbackevent (string eventargument)
{
This. ajaxdata = "some crazy message here! <Br> "+ this. clientid;
}

Raisecallbackevent is called when the client callback starts. It is a method without return values and is only used to prepare the data required by the getcallbackresult method.
The raisecallbackevent method is used to place all the Code related to the content to be displayed in the render method returned to the webpart. In this example, we only send a simple message to the client. In order to distinguish different webpart instances, we did their own work. We added their respective clientid after the information.

Now, let's get started with client callback.

Trackback: http://tb.blog.csdn.net/TrackBack.aspx? Postid = 1524249

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.