Home > Development, SharePoint Server 2010 > Loading SharePoint Web Parts Contents Asynchronously Using Update Panel and Ajax

Loading SharePoint Web Parts Contents Asynchronously Using Update Panel and Ajax

Source Code

DownLoad

If we develop web parts that retrieve data from across the network without asynchronous processing, our web parts will have serious limitations when it comes to optimizing page response. For achieving the optimization factor in page response you need to use the asynchronous processing support provided by the ASP.NET Framework.

For implementing asynchronous in our web parts, we have more than one way

1-      Using CallBackEventHandler interface.

2-      Using ASP.NET AJAX.

Here, we will implement asynchronous using update panel and AJAX. Firstly, our example is a web part connects to YAHOO! Finance web service for retrieving data about stock exchange.

Prerequisites

1-      Visual Studio 2010.

2-      SharePoint Server 2010.

Creating Stock exchange Web Part

As we said above our web part will connect to internet web service which will have limitations in page response so for avoiding this limitation we need to load

Here, for optimizing page response we want to load the entire page firstly then load all of the important parts on the page first and then load the slower loading part(s) later. While the page is loading, placeholders are displayed to indicate that additional content is coming. After the page loads, the content for the placeholders is retrieved and displayed asynchronously.

 Here, we  create two views, one for displaying loading process with an animated image (GIF) as previous screen shot and the second display the content of the web part as the following

Steps:-

1-      Create New Project with Visual Studio 2010.

2-      Select Visual Web Part project Template.

3-      Open user control file.

4-      Add to user control, Update panel from toolbox.

5-      Now, we create the first view which represents Loading Process

6-      Create the second view which represents content view, this view contains fields for each of Stock Symbol, Date, Index Value, and image for value.

7-      Add ASP timer control for doing the post back to start connecting to remote web service for retrieving the Stock Exchange value.

8-      In The ASP:Timer’s OnTick event — triggered 1ms after the page loads — triggers the routine to load Stock Exchange

This our web part logic

Full Code Shot:-

 

Source Code

DownLoad

Advertisements
  1. August 8, 2011 at 12:22 pm

    is it batter if you can attach a sample project file for the same.

    • October 11, 2012 at 11:54 am

      I attached a sample, u can download it now

  2. August 8, 2011 at 12:37 pm

    “1033/styles/_layouts/1033/styles/SIS/Themes/CSS/StockExchangeStyle.css”, file not found. Please verify that the file exists under the layouts directory.

  3. April 23, 2012 at 4:02 am

    I had 6 webparts on 1 single dashboard page, each processing 5000+ items.
    Very simple steps to follow and very very effective.
    Saved me lot of time.
    Thanks
    Sangeet (www.sangeetahuja.com)

    • October 11, 2012 at 11:54 am

      try to download uploaded sample

  4. Praveen Mandalapu
    June 13, 2012 at 8:57 pm

    Thanks a lot, saved my day 🙂

  5. chinka
    September 7, 2012 at 11:42 pm

    Thank you so much man… ‘ve been looking for this for decades… Work perfectly fine ! And so easy to implement…
    Chinka

  6. October 8, 2012 at 12:41 pm

    Good one!
    The runat=”server” for the divs seem to be missing!

    • October 11, 2012 at 11:56 am

      yes, thanks. i attached a sample now, u can download it

  7. October 10, 2012 at 11:41 pm

    i updated this post by attaching source code here

  8. October 16, 2012 at 9:26 am

    Excellent Site !

  9. October 17, 2012 at 11:37 am

    quite interesting, still stick around

  10. Annoynmous
    November 7, 2012 at 4:19 pm

    Hello you have a great website over here! Thanks for sharing this interesting information for us! If you keep up this good work I’ll visit your website again. Thanks!

  11. November 8, 2012 at 11:03 am

    Hi there, I found your blog by way of Google at the same time as searching for a related subject, your web site came up, it appears great. I’ve bookmarked to my favourites|added to my bookmarks.

  12. Ahmed Samak
    January 7, 2013 at 8:11 pm

    Why you did not use Update progress instead of that ?

    • February 10, 2013 at 11:05 pm

      this is just alternative approach, you can use either this or update progress

  13. nelly.cain
    March 9, 2013 at 1:56 am

    This page truly has all of the information and facts I needed concerning this subject and didn’t know who to ask.

  14. Patrice
    May 28, 2013 at 1:10 pm

    Wow! Finally I got a web site from where I can genuinely take valuable information regarding my study and knowledge.

  15. June 24, 2013 at 6:05 pm

    Its like you read my mind! You seem to know a lot
    about this, like you wrote the book in it or something. I think
    that you can do with a few pics to drive the message home
    a bit, but other than that, this is wonderful blog. An excellent read.
    I’ll certainly be back.

  16. July 24, 2013 at 2:54 am

    I am in fact glad to glance at this webpage posts
    which consists of lots of helpful facts, thanks for providing these kinds of statistics.

  17. July 27, 2013 at 6:59 am

    I’ve been browsing online more than three hours lately, but I by no means discovered any fascinating article like yours. It is lovely value sufficient for me. In my view, if all site owners and bloggers made just right content as you did, the web will likely be much more useful than ever before.

  18. January 18, 2014 at 11:33 am

    I read this piece of writing completely regarding the resemblance of hottest and earlier technologies,
    it’s remarkable article.

  19. May 13, 2014 at 5:50 am

    Good sample ya medany 🙂

  20. August 29, 2014 at 10:47 pm

    This design is spectacular! You certainly know how to keep a reader entertained.
    Between your wit and your videos, I was almost moved to start my own blog (well, almost…HaHa!) Great job.
    I really enjoyed what you had to say, and more than that, how you presented it.
    Too cool!

  21. September 4, 2014 at 2:55 pm

    Good work 🙂

  22. Anonymous
    November 14, 2014 at 6:03 am

    This is very good approach . But somehow not working for a Sandbox Solution in SharePoint

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: