Category: ASP.NET

(ASP.NET) How create master UserControl

There are cases when you want your ASP.NET usercontrols all look the same. For example, to add a header and footer to all your popup, and these header-footer needs always looks the same.

You know you can do it by creating a header.ascx footer.ascx, then add them in all your UC. But, you will still need to maintain all the containers for these, and keep them in sync.

You want it to be as easy as using masterPages + web form.

I had to do that recently, I searched for solutions. I only found complicated solution involving inheritance and lot of code behind script.

But now, I have working solution, that uses real contentplaceholders, and absolutely no code behind.

The only prerequisites is that you need to load these userControl from Ajax. You can’t add directly on another page, as you did with a normal usercontrol.

My solution is to just use the standard master page / asp.net webform!

When you create a masterPage, it is filled with all page content: html, head, body, form, … and all the stuff required for viewState to work. But, you can delete all that content.

Create your masterUserControl, let’s call it popup.master. In Visual Studio, just create a normal MasterPage.

By default, it is filled with that content: 

<%@ Master Language="VB" CodeFile="popup.master.vb" Inherits="ucTest_popup" %>
<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
    <asp:ContentPlaceHolder id="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
        
        </asp:ContentPlaceHolder>
    </div>
    </form>
</body>
</html>

But, you don’t create a page, you create a master for your userControls.  So. remove all page-related content, and only add your common usercontrol html.  It will look like this:

<%@ Master Language="VB" CodeFile="popup.master.vb" Inherits="ucTest_popup" %>
<div>
   <header>My common header</header>
      <article>
         <asp:contentplaceholder id="cph1" runat="server">
         </asp:contentplaceholder>
      </article>
   <footer>My Common Footer</footer>
</div>

The designer indicates an error on the asp:contentplaceholder item, but just ignore it.

Then, create some popup, as asp.net webpages, and select that popup.master.

Add specific code in the contentPlaceHolder:

<asp:Content ID="Content1" ContentPlaceHolderID="cph1" Runat="Server">
   Popup1 Content
</asp:Content>

You can now test that page directly in your browser, and look at its source: It contains only the html of the master embedded with your specific content.

<div>
   <header>My common header</header>
   <article>
      Popup1 Content
   </article>
   <footer>My Common Footer</footer>
</div>

Finally, to use it in your app, you will need to load it from ajax, because you can’t add it directly like a normal usercontrol.

A simple jquery call can do the job: 

$('#myDiv').load("/popup/popup1.aspx")

The “myDiv” div now contains the userControl + master html! Just use your favorite popup manager to show it now, e.g.

$('#myDiv').kendoWindow({}).center().show()

Happy coding with these “master usercontrol”!