Partial Page Rendering Using Hidden IFrame
Partial page rendering removes the need for the entire Web page to be refreshed as the result of a postback. Instead, only individual regions of the page that have changed are updated, speeding up user interaction with the Web site.
Developers who want to add such features to their Web pages are often faced with a difficult decision. All of these actions can be implemented using a simple solution: by refreshing the entire page in response to the user interaction. However, this solution is easy but not always desirable. The full page refresh can be slow, giving the user the impression that the application is unresponsive.
Web pages typically support a variety of actions, such as entering and submitting form data and navigating to different pages. Many Web pages also support another type of action, which allows the user to make modifications to the contents of the Web page itself without navigating to a different page. Some examples of such actions include clicking on a link to update an image on the same page. For example, an automobile configuration application might update an image of a car as the user chooses different options, such as the preferred color.
Selecting an item from a choice box might result in modifications to other fields on the same page. For example, selecting a specific car model might update the set of available car models displayed. Clicking a link or selecting an item from a choice could be used to scroll to a new page of data in a table. Clicking a button in a table might add a new row to the table. All of these actions are similar in that they result in the same page being re-rendered in a slightly different state. Ideally, these changes should be implemented as seamlessly as possible, so that the user doesn't experience a loss of context which could distract from the task at hand.
Page Elements That May Change During PPR
Page Elements That Do Not Change During PPR
Some page elements are always associated with a page, regardless of the content displayed. As a rule of thumb, elements above the page title (except message boxes) remain constant and don't change position, whereas elements in footers are constant but may move up or down the page to accommodate changes to page content. The following elements never change when PPR is initiated:
In most cases the following elements don't change, other than moving up or down the page to accommodate changed elements. Nevertheless, in certain cases actions on the page may require them to be redrawn:
In the above scenarios this solution can be used to achieve good performance and user interaction with the Web pages.
Contexts in Which PPR Should Not Be Used
When PPR is implemented correctly, it significantly improves application performance. When performance improvement isn't possible, it shouldn't be implemented, thus avoiding unnecessary code bloat; PPR cant be used when navigating to another page (with a different title).
Partial Page Rendering Solution
Below is the main html (Table 1.1), which will have two buttons: one is to show a simple table which will be generated by the server, and the other button is used to remove the table.
This iframe tag is used as target to the Partial Page Rendering Request. The tag:
gives the user action to get the contents of a table from the server--in this solution sample html is provided to render the table, which supposed to be generated by the server. The tag:
is used to get the contents from the server, the line:
sends the GET request to the server, and as a response iframe gets the HTML.
If the requirement insists to send a POST request for Partial Page rendering Response, that can be achieved by setting the html form element target attribute as the name of hidden iframe. The code for the post request looks like:
Partial Page Rendering Server Response
encloses the content to transfer from hidden iframe to main page.
This is the content to show the table to user. The code:
is used for triggering the action to transfer the content.
This part refers to tag div html id in main page and this part:
refers the HTML of the Partial Page Response.
Improve the user experience with Web pages that are richer, more responsive to user actions and behave like traditional client applications. Reduce full-page refreshes and avoid page flicker. Partial page rendering using iframe is a simple solution. For more information, write to Madhusudan Pagadala.
This article originally appeared on WebReference.com.