Building a Client-Side RSS Widget ASP.NET

First,let’s make a client-side RSS wid get.RSS will benefit from client-side caching because not all RSS feeds change frequently, e.g.,you can safely cache a feed for an hour. Also, popular RSS feeds are subscribed by many users,so caching a popular feed on the server and serving it to hundreds of thousands users will save the server from fetching the same feed again and again from the source.

Some fundamental differences in a client-side RSS widget include:

• It does not load the RSS feed from the server-side code. So, there’s no LINQ to XML code in the widget’s code that downloads the RSS XML. The LINQ to XML code is now inside the proxy service.

• It does not have MultiView. Instead, client-side JavaScript shows the progress message.

• It has no DataList on the widget web control because JavaScript generates the HTML for the feeds.

• A JavaScript class named FastRssWidget in FastRssWidget.js takes care of loading the feed on the browser by calling a proxy web service and rendering the feed.

• The server-side control creates an instance of the FastRssWidget JavaScript class and injects the necessary startup script to pass the feed’s URL and load it on the client.

FastRssWidget.ascx now contains almost no UI elements

On the widget server-side code, the Page_Load event registers a script include tag for the Fast Rss Wid get.js(see Example).

The Page_Load event of FastRssWidget control adds a script tag to download FastRssWidget.js and then initializes the class to show the feeds on the client

The Page_Load event of FastRssWidget control adds a script tag to download FastRssWidget.js and then initializes the class to show the feeds on the client (continued)

It then injects a JavaScript statement that constructs an instance of the class and passes the URL, the container panel’s client ID, and the number of feed items to show.This only happens once on the first load of the widget. The client-side class uses these parameters to make a call to the proxy, downloads the RSS, and renders the feed item links inside the container panel. The ID of the panel is passed down to the client-side JavaScript class.From this ID,the class knows which div to use to render the feed links.

However,during post back we need to render the content again on the client-side because an asynchronous post back will send a blank container panel to the browser and remove the links that were created by the Java Script.In fact,any work that the client-side JavaScript does on the UI is undone whenever an asynchronous postback happens.So,we need to inform the JavaScript to restore the UI after every asynchronous post back.This is done in the On Pre Render event.A script block is sent to the client to reset the URL and count parameter and then fire the load function on the previously created class instance.It is the same as first load where the class is constructed with parameters and the load function is called.The only difference is that this time no new instance of the class is created,and instead an existing instance is assumed to be there already (see Example ).

During On Pre Render a script block is sent to refresh UI on the client

That’s all on the server.However,the client-side class is a bit more complicated as we move most of the code to the client from the server.The class is available in the Feed Rss Wid get.js file.

The client-side FeedRssWidget class

The constructor takes the parameters like the URL, container ID, and number of feed links to show.Then the load function calls the Proxy.GetRss function to get the feed.It passes the URL,the number of feed items to return, and the cache duration in minutes.The response is cached for 10 minutes, so loading the page again or returning to the page from another web site within 10 minutes will deliver the response directly from the browser cache without making any call to the proxy web service (see Example ).

Proxy.GetRss fires the onContentLoad function as callback and it renders the feed links

Proxy.GetRss fires the onContentLoad function as callback and it renders the feedlinks(continued)

On the on Content Load function, it creates the hyperlinks for the feed items on the client side.There are some benefits to this client-side widget over the server-side widget:

• No ViewState is delivered because there’s minimal UI on the web control, so first load and asynchronous postback have very little payload

• Content is cached on the browser and saves roundtrips to the network

• Content is fetched via the proxy instead of asynchronous postback, so it benefits from server-side caching.

Face Book Twitter Google Plus Instagram Youtube Linkedin Myspace Pinterest Soundcloud Wikipedia

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

ASP.NET Topics