Partial Refresh using UpdatePanel – AJAX in ASP.NET

Partial Refresh using UpdatePanel – AJAX तकनीक का मुख्‍य Benefit इसकी Partial Refresh Capability ही है। Partial Refresh का प्रयोग करने पर Postback के दौरान हमारा Entire Page Refresh नहीं होता, बल्कि Page का केवल कोई Specified Part ही Refresh होता है। जबकि इस Partial Refresh के लिए Retrieve होने वाले Data को Asynchronous Request के माध्‍यम से Background में ही Retrieve किया जाता है और Data के Retrieve हो जाने के बाद उसे Dynamically Current Page के किसी Specific Part पर Reload कर दिया जाता है। इस पूरी प्रक्रिया को हम निम्न चित्र द्वारा ज्यादा बेहतर तरीके से Represent कर सकते हैं:

ASP.NET हमें UpdatePanel नाम का एक Web Control Provide करता है, जो हमें किसी Ordinary Page को Server-Side Logic के साथ Specify करने की सुविधा देता है और इस बात को निश्चित करता है कि वह Server-Side Code बिना Enter Page के Reload हुए Asynchronously Background में Execute हो।

यहां Basic Idea ये है कि हम हमारे Webpage को एक या अधिक Distinct Regions में Device कर देते हैं और प्रत्‍येक Region को एक Instance UpdatePanel Control में Wrap कर देते हैं। फिर जब इन UpdatePanel Controls  में Exist Controls  द्वारा कोई Event Trigger होता है, और सामान्‍यत: ये Event Entire Webpage को Reload करने के लिए Trigger होता है, तो UpdatePanel Control इस पूरे Webpage के Refresh होने की प्रक्रिया को बाधित करते हुए उस Entire Page Refresh को एक Asynchronous Callback के रूप में Perform कर देता है। परिणामस्वरूप पूरा Webpage Refresh नहीं होता। इस पूरी प्रक्रिया को हम निम्नानुसार बेहतर तरीके से समझ सकते हैं:

• सबसे पहले User किसी UpdatePanel Control में Exist किसी Button को Click करता है।
• UpdatePanel Control उस Click Event को बाधित कर देता है, ताकि पूरा Page Reload न हो तथाNET AJAX Full-Page Postback के स्थान पर एक Callback Perform करता है, जो कि Server Side में किसी Specific Server-Side Method को Invoke कर देता है।
• Web Server पर Callback के रूप में Specified Method Execute होता है, जिसके लिए Page का पूरा Life Cycle Flow होता है और Page के सभी Usual Events Trigger होते हैं तथा अन्त में उस Server-Side Code के Execution से Generate होने वाले Output को Response के रूप में Web Browser पर Send कर देता है।
• Web Browser इस Response HTLM Content को Page पर Exist प्रत्‍येक UpdatePanel Receive करता है, जिसे Client-Side JavaScript Codes द्वारा Use करते हुए Webpage के किसी Specific Part को नए Response Data से Update कर दिया जाता है। जबकि यदि कोई ऐसा Change Perform हुआ हो, जो कि UpdatePanel के अन्दर न हो, तो इस Change को Web Browser द्वारा Ignore कर दिया जाता है।

यहां एक ध्‍यान रखने वाली महत्वपूर्ण बात ये है कि यदि हम जिस Webpage पर UpdatePanel Control को Use कर रहे हैं, उस Webpage को किसी ऐसे Web Browser पर Open किया गया] जो कि AJAX को Support नहीं करता अथवा जिस पर JavaScript को Disabled रखा गया है, तो उस स्थिति में हमारे Webpage के लिए AJAX Functionalities पूरी तरह से Disabled हो जाती हैं तथा वह Page Normal ASP.NET Page की तरह Treat होते हुए Normal Postback Approach को Follow करने लगता है।

UpdatePanel Control हमेंशा ScriptManager Control के साथ मिलकर काम करता है। जब हम UpdatePanel Control को Use करते हैं, तब हमें इस बात को ध्‍यान रखना होता है कि ScriptManager.EnablePartialRendering Property भी true Set हो, जो कि इस Property का Default मान है। फिर हम एक या अधिक UpdatePanel Control को ScriptManager Control के बाद अपने Webpage पर Place कर सकते हैं।

चूंकि UpdatePanel Control एक Template-Based Control है, इसलिए इस Control को हम निम्नानुसार तरीके से Specify कर सकते हैं:

[code]
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                <asp:Button ID="Button1" runat="server" Text="Button" />
            </ContentTemplate>
        </asp:UpdatePanel>
[/code]

परिणामस्वरूप जब ये Control Render होता है, तो <ContentTemplate> Element के बीच Enclosed Content को Output में Render कर दिया जाता है। इसीलिए यदि हम इस Code को Specify करके अपने Webpage को Run करें, तो हमें प्राप्त होने वाला Resultant Output निम्नानुसार होगा:

क्‍योंकि हमने एक Label व Button Control को ही <ContentTemplate> के बीच Enclose किया है। साथ ही हमें ये भी ध्‍यान रखना होता है कि हम किसी Control को UpdatePanel Control में UpdatePanel.Controls Collections के माध्‍यम से Dynamically Add नहीं कर सकते, लेकिन UpdatePanel.ContentTemplateContainer.Controls Collection द्वारा Controls को UpdatePanel में Dynamically Add कर सकते हैं।

UpdatePanel Panel Class से Derive नहीं होता, बल्कि ये Control Class से Derive होता है। UpdatePanel Control का मुख्‍य काम किसी Content के लिए Container की तरह काम करना ही होता है, जो कि Asynchronously Refresh होता है।

Render होते समय UpdatePanel Control एक <div> Element की तरह Render होता है, लेकिन हम चाहें तो इसकी RenderMode Property को Block से Inline Set करके इसे एक Inline Element की तरह भी Render कर सकते हैं।

चलिए, एक Simple Example द्वारा इन दोनों Controls की आपसी Working को समझने की कोशिश करते हैं:

[code]
File Name: Default.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="AJAX.Default" %>
<script runat="server">
    protected void Page_Load(object sender, EventArgs e)
    {
        Label1.Text = DateTime.Now.ToLongTimeString();
    }
</script>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>

<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
                <asp:Button ID="Button1" runat="server" Text="Button" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>
[/code]

जब हम इस Page को Run करते हैं, तो हमारे सामने निम्नानुसार Output Page Display होता है:

जहां दिखाई देने वाले Button को Click करते ही Label Control में Current Time Render होने लगता है, लेकिन इस Time को Render करने के लिए पूरा Page Reload नहीं होता, बल्कि Current Time Anonymous तरीके से बिना Page Reload हुए Update होता है।

क्‍योंकि हमने अपने Label व Command Button दोनों को UpdatePanel Control के <ContentTemplate> Element के बीच Enclosed रखा है। परिणामस्वरूप जैसे ही हम इस UpdatePanel Control के अन्दर Exist Button को Click करते हैं, Page Reload होने के लिए Postback होता है, लेकिन UpdatePanel Control के अन्दर Control Exist होने की वजह से पूरा Page Synchronous तरीके से Web Browser में फिर से Reload नहीं होता, बल्कि Asynchronous तरीके से Background में Reload होता है और Label Control Latest Time से Update हो जाता है।

इस Example में हमने एक भी Line का JavaScript Code नहीं लिखा है, बल्कि केवल UpdatePanel Control को Use किया है, जबकि हमारा Program Asynchronous तरीके से Label Control के Time को Update करने लगता है। ऐसा इसीलिए होता है, क्‍योंकि AJAX Functionality को ASP.NET AJAX के इन Controls द्वारा Automatically Internally Handle कर लिया जाता है।