Ajax Modalpopupextender show hide from code behind and by javascript

In this article we will discuss different way of show and hide (open and close) modal popup by using Ajax ModalPopupExtender, how to open/close a modal popup from code behind in asp.net or by using JavaScript, how to use multiple buttons to hide the modal popup in asp.net etc.

Suppose we have a grid view to show the record in tabular format and give functionality to edit a record from grid view on clicking the edit button at the end. There are two way to open the modal popup from grid view

1. By using modal popup extender for every row and bind edit controls, but it will render edit control for every row while user may or may not edit any record from the grid view so it’s not good practice to render edit control for every row, it can slow down the page performance
2. By rendering a modal popup extender at the end of the grid view and once user click on edit button in grid view, pull data from database, fill edit controls and show the modal popup, in this way page will never be heavy.

So let’s see the second option in action, here is the HTML

<div>
 <asp:GridView ID="gvUser" runat="server" Width="100%" 
   AutoGenerateColumns="False"
   GridLines="None"  
   PageSize="50"  
   DataKeyNames="UserID">
   <Columns>
     <asp:BoundField DataField="UserName" HeaderText="User Name" />
     <asp:BoundField DataField="Email" HeaderText="Email" />
     <asp:BoundField DataField="MobileNumber" HeaderText="Mobile Number" />
     <asp:BoundField DataField="PhoneNumber" HeaderText="Phone Number" />
     <asp:BoundField DataField="DateCreated" HeaderText="Created On" 
        DataFormatString="{0: MM/dd/yy hh:mm:ss tt}" />            
     <asp:TemplateField HeaderText="Delete">
        <ItemTemplate>
           <asp:ImageButton ID="ibtnEditUser" runat="server" 
              ImageUrl="/Images/edit-icon.png" 
              ToolTip="Edit" 
               OnClick="ibtnEditUser_Click" />
        </ItemTemplate>
     </asp:TemplateField>
    </Columns>
  </asp:GridView>
</div>

Now we will write HTML for modal popup which will be open for every row from grid view

 <!-- Edit User Detail -->
<div id="divOpenner" runat="server" />
<div id="divEditDetail" class="popupdiv">
    <!-- Controls to edit the information -->

    <asp:Button ID="btnSave" runat="server" Text="Save"
       OnClick="btnSave_Click" />

    <asp:Button ID="btnCancel" runat="server" Text="Cancel" />

</div>
<ajax:ModalPopupExtender ID="mpeUserDetail" runat="server" 
    TargetControlID="divOpenner"
    PopupControlID="divEditDetail" 
    BehaviorID="behUserDetail" 
    BackgroundCssClass="modalBackground"
    CancelControlID="imgEditUserCloser" 
    DropShadow="false" />

First we will see how to fill edit controls and open the modal popup on clicking the edit button in grid view from code behind

protected void ibtnEditUser_Click(object sender, ImageClickEventArgs e)
{
    hfUser.Value = "0";
    GridViewRow gvRow = (GridViewRow)((ImageButton)sender).NamingContainer;
    int userId = Convert.ToInt32(gvUser.DataKeys[gvRow.RowIndex].Value);
     //get code from database
     // fill all the controls and open modal popup by
    mpeUserDetail.Show();
}

Here we used mpeUserDetail.Show(); to show the modal popup, same function can be used when user will save data and data is not valid then we can again call mpeUserDetail.Show(); so modal popup cannot hide.

Suppose we are using two buttons to hide the modal popup, one on top in header bar with cross icon and another as Cancel button near to Save button, but in modal popup only one button can be assigned as a CancelControlID so we assigned top cross button as CancelControlID="imgEditUserCloser", now if user will click this cross button modal popup will be closed. How to use cancel button to hide the modal popup?

If you will see, you can notice we used BehaviorID="behUserDetail" which we will use to make cancel button to hide the modal popup, so change the Cancel button HTML like this:

 <asp:Button ID="btnCancel" 
    runat="server" 
    Text="Cancel"
    OnClientClick="javascript:$find('behUserDetail').hide(); return false;" />

Conclusion:

To Show and Hide modal popup from code behind we can use

ModalPopupExtenderID.Show();  //  To Show
ModalPopupExtenderID.Hide();   // To Hide

To Show and Hide by using JavaScript and modal popup behavior Id like this

 // To Show
 $find('ModalPopupExtender_BehaviorID').show();  
 // To Hide
 $find('ModalPopupExtender_BehaviorID').hide(); 

To disable date in ajax calendar extender in asp.net see this

Other blogs you may like

No action was found on the controller that matches the request

How to post the data from json, in Angularjs $http.post we get this error. why we get this error only when we try to post the json object rather than query string. When we pass the parameter in query string same action method works as it should be. It's a very simple article so we are going to... By Ali Adravi   On 12 Jul 2015  Viewed: 17,635

Using Ajax for Update a View and then Update Data

this blog has been... By Amin Rahdar   On 26 May 2015  Viewed: 339

Ajax Roundedcornersextender padding and margin problem

Ajax Rounded corners extender is used to give corner to any elements like panel and div etc. Most of the time you will need to give the padding to give some space between the border and content, same is used for margin to give some vertical and horizontal space between different controls, but if... By Alicia Gonzalez   On 15 Jun 2013  Viewed: 851

Ajax AsyncFileUpload control example in asp.net to upload only images

Ajax introduced two new controls AsyncFileUpload and SeaDragon, in this article we will see about Asynchronous file upload control, with its different properties and usage. 1. [AsyncFileUpload][1]: by using this control we can upload a file asynchronously (without postback). The file uploading... By Ali Adravi   On 20 May 2013  Viewed: 6,684

Ajax fill country state and city without postback in asp.net

Country will be filled on page load and once user will select any country we will fill states from that country and again when user will change state we will fill city for that state without postback ( asynchronously) with the help of update panel in asp.net. Create three methods to fetch... By Hamden   On 04 May 2013  Viewed: 6,169