modalpopupextender and Partial Page update using updatepanel in ASP.Net

Hi Guys, In this post we are going to see the usage of ScriptManager and how to invoke a Async operation from UI and How to show a Popup screen.

ScriptManager tag is used to execute the operation in Ajax mode or Async mode to make a partial rendering of part of the web page. UpdatePanel is the panel where the controls should be place inside which are undergoing ajax process inside the ContentTemplate tag.

Now Let we see a some partial rendering , with out refresh a whole web page we are going to update a value of label control with current date and time.

Now drag and drop the ScriptManager or ToolkitScriptManager from the toolbox.

<asp:ToolkitScriptManager id="ScriptManager1" runat="server">

</asp:ToolkitScriptManager>

  

Place the label control inside the content template as well as button control which invoke the action of get the date and time , because of the button control inside the update panel give the name as "Inside Panel".

  <asp:UpdatePanel ID="UpdatePanel2" runat="server">

        <ContentTemplate>

        <asp:Button ID="time" runat="server" Text="Inside Panel" onclick="time_Click" />

           <br />

           <asp:Label ID="result" runat="server"></asp:Label>

           <br />

           <br />  

        </ContentTemplate>

   </asp:UpdatePanel>

  protected void time_Click(object sender, EventArgs e)

  {

     result.Text = DateTime.Now.ToString();

  }

When user click the button Inside panel, label with result get update with latest date and time with out refresh the whole web page.

Now we see the same scenario in another example and trigger option.If the button which invoke the action is not present inside the update panel the click event will fire and reloads the whole webpage, In that scenario to achieve the partial rendering a another tag called trigger will help you, just bind the id of the control and event to fire the update panel in partial rendering.

        <br />

        <asp:Button ID="outinvoke" Text="Outside Panel" runat="server"

            onclick="outinvoke_Click" />       

        <asp:UpdatePanel ID="updatepanel3" runat="server">

        <ContentTemplate>

         <br />

           <asp:Label ID="outresult" runat="server"></asp:Label>

           <br />

        </ContentTemplate>

        <Triggers>

             <asp:AsyncPostBackTrigger ControlID="outinvoke" EventName="click" />

        </Triggers>

        </asp:UpdatePanel>

       

        <br />

        protected void outinvoke_Click(object sender, EventArgs e)

        {

            outresult.Text = DateTime.Now.ToString();

        }

Now in the above example Outside Panel button is called as Async process because of Trigger,Now we are Partial rendering of webpage

Output:

ModelPopUpExtender:
      Now if we want a popup should be launched on click of button event , then ModelPopupExtender is the best way in which we can popup a Div tag or another webpage itself inside a iFrame.

Attributes to handle :
targetcontrolid : For which control id popup should be trigger.
popupcontrolid: For which panel tag or div tag should be should as popUp
okcontrolid:  It is bind to the Ok of the pop up screen
cancelcontrolid : It is bind to the Cancel of the pop up screen.

Now in this example we are going to launch a popup in which another webpage is loaded.

<asp:modalpopupextender id="ModalPopupExtender1" runat="server"

       cancelcontrolid="btnCancel" okcontrolid="btnOkay"

       targetcontrolid="Button1" popupcontrolid="Panel1"

       popupdraghandlecontrolid="PopupHeader" drag="true"

       backgroundcssclass="ModalBG">

</asp:modalpopupextender>

        <asp:UpdatePanel ID="UpdatePanel1" runat="server">

        </asp:UpdatePanel>

<asp:panel id="Panel1" style="display: none" runat="server">

       <div class="Popup">

                <div class="PopupHeader" id="PopupHeader">Slide Show</div>

                <div class="PopupBody">

                  <iframe src="Slideshow.aspx" width="500px" height="500px"></iframe>

                </div>

                <div class="Controls">

                    <input id="btnOkay" type="button" value="Done" />

                    <input id="btnCancel" type="button" value="Cancel" />

              </div>

        </div>

</asp:panel>

<style type="text/css">

    .ModalBG

    {

        background-color: #666699;

        filter: alpha(opacity=50);

        opacity: 0.4;

    }

    .Popup

    {

        min-width:500px;

        min-height:500px;

        background:black;

      

        opacity:0.4;

    }

    </style>

Output:

I Hope this article will help you for develop a Ajax operation and as well as ModelPopUpExtender Application.