I had earlier written a tutorial that gives the step by step instructions to convert a Web Form to a Web Content Form (with a defined Master Page) in an article called How to Apply a Master Page to an Existing Webpage. Since then, I have stumbled upon a GUI setting that does much of the work other shortcuts to make this an easier process.
To convert from a Web Form to Web Content Form, all of the changes will occur in the Web Form’s aspx page. Essentially, no manual changes are required in the aspx.cs or aspx.designer pages. Now, I will make a couple of assumptions. Let us assume our Web Form is called Default.aspx and our Master Page file is called Site1.Master. We have assumed very basic pages for simplicity, but the pages are listed below:
Default.aspx (Info in orange is what we want to keep)
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Name"></asp:Label>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button1" runat="server" Text="Submit" />
<br />
<asp:Label ID="Label2" runat="server"></asp:Label>
</div>
</form>
</body>
</html>
Site1.Master
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="WebApplication1.Site1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<asp:ContentPlaceHolder ID="head" runat="server">
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<div>
<p>This is our page heading!</p>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
<p>This is our page footer!</p>
</div>
</form>
</body>
</html>
Now that we have defined our two pages, we begin by specifying to the Web Form where to find the Master Page. Previously, we had typed this in manually, which was prone to mistakes. Since then, I ran across a way to do this via the GUI. In the Designer mode for Default.aspx, bring up the context menu (right click) for the Document by clicking a blank space on the GUI. A recommended area is the lowest portion of the page. The resulting window should look something similar to the image to the right labeled Document Properties. Next, expand the ASP.NET and locate the property MasterPageFile. From here, we can browse and select Site1.Master page. This will append the topmost “<%@ Page” directive automatically (without mistakes) as below:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" MasterPageFile="~/Site1.Master" %>
Now, the second and final step is to put items into the correct content boxes. The easiest and more error free to do this is to create a new blank Web Content Form, copy the content boxes from the Web Content Page, and paste them into our original Web Form. So right click the Site1.Master page in the Solution Explorer and select Add Content Page. Our example will output:
<%@ Page Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" Title="Untitled Page" %> <asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server"> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server"> </asp:Content>
Copy lines 2-5 above and paste them into Default.aspx right below the “<%@ Page” directive. The ContentPlaceHolderID called ContentPlaceHolder1 will hold all the information between <div></div> in our Default.aspx. The rest of the information below can be deleted. Therefore, our final Default.aspx will look like:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" MasterPageFile="~/Site1.Master" %>
<%@ Page Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" Title="Untitled Page" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<asp:Label ID="Label3" runat="server" Text="Name"></asp:Label>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
<br />
<asp:Button ID="Button2" runat="server" Text="Submit" />
<br />
<asp:Label ID="Label4" runat="server"></asp:Label>
</asp:Content>
The information in orange again matches the information from the original Web Form that we wanted to keep. Finally, to confirm the process has gone smoothly, switch back to the Designer mode and insure that the Master Page content shows up (though grayed out). This sums of the process of converting a Web Form to a Web Content Form. Though this process still requires manual editing and is a per page process, it is substantially easier than the previous method. A step by step overview is:
- Create a Master Page
- Apply Master Page via GUI in Default.aspx
- Copy over the Content Containers
- In your Web Form, move Web Controls and information into the proper Content Containers.
