Want to call .ascx file from master page upon button click in asp.net web form application

Question

I have created .Master, .aspx and .ascx pages. I want to call .ascx page upon click on button in .master page. If the button is not clicked then .ascx should not show up.

Currently, Onload of page, .ascx page is calling because i have used <uc1:Account runat="server" ID="Account" />. But i want after click of button not on page load.

Any help is highly appreciated. Thank you in advance.

My master page looks like this:

<%@ Master Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Staff.master.cs" Inherits="Admin_Staff" %>

<%@ Register Src="~/Controls/Account.ascx" TagPrefix="uc1" TagName="Account" %>

<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server">
    <h4>Account</h4>
    <span class="input-group-btn">
        <input type="text" class="  search-query form-control" placeholder="Search" />

        <button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
    </span>

    <div class="col-lg-9">
        <uc1:Account runat="server" ID="Account" />
    </div>

</asp:Content>

My User Control looks like this:

<%@  Control Language="C#" AutoEventWireup="true" CodeFile="Acc.ascx.cs" Inherits="Admin_Controls_Account" %>
<asp:panel id="pnlAcc" runat="server">
                <section id="AccForm">
                              <asp:PlaceHolder runat="server" ID="PlaceHolder1" Visible="false">

                    </asp:PlaceHolder>

                    <div class="form-group">
                        <asp:Label runat="server" CssClass="col-md-2 control-label">Country: </asp:Label>
                        <div class="col-md-10">
                          <asp:Label runat="server" CssClass="col-md control-label" >New Zealand</asp:Label>
                        </div>
                    </div>

            </section>

</asp:panel>

My .aspx page

<%@ Page Title="" Language="C#" MasterPageFile="~/Admin/Staff.master" AutoEventWireup="true" CodeFile="Staff.aspx.cs" Inherits="Admin_Staff" %>

<asp:Content ID="Content1" ContentPlaceHolderID="StaffContent" Runat="Server">

</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent1" Runat="Server">
</asp:Content>

Answer 1

You can set the Visibility of the Control to false and change it on Button Click

<uc1:Account runat="server" ID="Account" Visible="false"  />

And then on button click

protected void Button1_Click(object sender, EventArgs e)
{ 
    Account.Visible = true;
}

Or you can add the Controls dynamically

protected void Button1_Click(object sender, EventArgs e)
{
    Admin_Controls_Account account = (Admin_Controls_Account)LoadControl("~/Controls/Account.ascx");
    PlaceHolder1.Controls.Add(account);
}

Note that for the last option you will have to reload the control each time there is a PostBack so you will have to store the Visibility yourself and recreate the control each time the page is loaded.