Loading the UI on Demand ASP.NET

Ajax web sites are all about having as much functionality on one page as possible. But you can’t deliver the entire UI of the whole web site along with all the functionality in one shot. The Start page needs to fetch the UI from the server on demand as the user explores different areas. For example, there’s a Help link on the top-right corner of Dropthings. com. Clicking on that link pops up a gigantic help section (see Figure).

Loading UI on demand via XML HTTP calls

Loading UI on demand via XML HTTP calls

If you make it a hidden DIV on Default. aspx, it will waste band width because it downloads on every visit to the homepage. You can, of course, use an IFrame, but IFrame makes browser rendering slower and has a high-memory footprint on IE 6. Moreover, IFrame does not inherit the parent page’s stylesheet. So, the most effective way to load the UI on demand is to make XML HTTP calls to some . aspx files, get the response, and add the response to a DIV container via innerHTML.

The ASP. NET AJAX Framework has a Sys. Net. WebRequest class that you can use to make regular HTTP calls. You can define the HTTP method, URI, headers, and the body of the call. It’s kind of a low-level function for making direct calls via XML HTTP. Once you construct a web request, you can execute it using Sys. Net. XML Http Executor.

Example shows how the help section is loaded by hitting help. aspx and injecting its response inside the Help Div. The response can be cached by the output cache directive set on help. aspx. So, next time the user clicks on the link, the UI pops up immediately. The help. aspx file has no <html> block, only the content that is set inside the DIV.

Making XML HTTP calls directly

Help. aspx partial content

Help. aspx partial content (continued)

<div class="helpContent"><div id="lipsum"><p>

Loremipsum dolor sit amet, consectetuer adipiscing elit. Duis lorem eros, volutpat sit amet, vene natis vitae, condi mentum at, dolor. Nunc porttitor eleifend tellus. Praesent vitae neque ut mi rutrum cursus.

Using this approach, you can break the UI into smaller. aspx files. Although these. aspx files cannot have Java Script or stylesheet blocks, they can contain large amounts of HTML that you need to show on the UI.

OutputCache Directive

ASP. NET gives you the @Out put Cache directive to control caching for ASP. NET Page or Web Control. By using this directive, you can specify where(server or client or both) and how long to cache the response. The proper response header is generated when the response is sent—basically, it sets the Http Cache Policy in the Response. Cache property. Moreover, @Out put Cache can also cache responses on the server by using ASP. NET Cache. If you mention Location="Server", the output of the page is stored in ASP. NET Cache. When the same page is hit again within the cache expiration time, ASP. NET does not execute the page at all, and instead returns the cached response, thus saving processing time on the web server.

Page flakes uses a similar approach to load the large 200 KB onsite menu on demand(see Figure ).

Loading large UI blocks on demand using XML HTTP. The black gradient box appears when you click the big round button on the top right; this whole area is loaded on demand.

Loading large UI blocks on demand using XML HTTP

By using this approach, you can keep the initial download to an absolute minimu for loading the wid gets.When the user explores new features on the site, load those areas incrementally.


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

ASP.NET Topics