An array of C#, PHP, and HTML programming articles, tutorials, and resources

Posts Tagged ‘ convert ’

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>

Document Properties

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:

  1. Create a Master Page
  2. Apply Master Page via GUI in Default.aspx
  3. Copy over the Content Containers
  4. In your Web Form, move Web Controls and information into the proper Content Containers.

Though very simple once you see the example, it may not be obvious right off the bat. Note that a simple cast from a string to int will not convert a string of integers to an int!

string stringVariable = "1234";
int integerVariable = (int)stringVariable;

Therefore, to accomplish converting from a string to int, following the sample code below:

string stringVariable = "1234";
int integerVariable = Convert.ToInt32(stringVariable);

The Convert class is part of the System namespace, which is included in nearly every project by default. If for any reason your string of integers contains invalid characters, the function ToInt32 will throw a FormatException.

Another, though less popular way is to convert a string of integers to an int variable is to use the function Parse in the Int32 class. An example is below:

string stringVariable = "1234";
int integerVariable = Int32.Parse(stringVariable);

The reason most programmers use the Convert class over the Int32 class is because the Convert class has the power to convert to and from a wide selection of variable types. In the end of the day, it really is a matter of preference, but I suggest first time programmers to get in the habit of using the Convert class.

An updated Article Available at: Easily Convert An Existing Web Form to a Web Content Form (with a Master Page)

To convert an exist ing aspx page without a masterpage site template is easy. We are going to walk through a simple example for which can be applied to other situations. Assume you have the following page called Default.aspx (with it’s associated Default.aspx.cs page which we will not need to worry about).

<%@ 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>Hello World</title>
  </head>
  <body>
    <form id="form1" runat="server">
      <div>Hello World</div>
    </form>
  </body>
</html>

Now a standard masterpage with two content place holders (one for header information and the other for the main body content) is created for your web application called Site1.Master. Header and footer text has been added that will appear for every content item.

<%@ 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" >
<html>
  <head runat="server">
    <title>Untitled Page</title>
    <asp:ContentPlaceHolder ID="head" runat="server"> </asp:ContentPlaceHolder>
  </head>
  <body>
    Hello World Header!
    <form id="form1" runat="server">
      <div>
        <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
        </asp:ContentPlaceHolder>
      </div>
    </form>
    Hello World Footer!
  </body>
</html>

First, an <%@ Page> tag is should be added to the first line. See resulting code for necessary tag attributes. Any page specific tags from the within the head tags except for <title> are placed inside the <asp:Content ID=”Content1″>. If there are no specific tags, this section will be present, but empty. Likewise, all content in the body (labeled in green in the above example), will be placed into <asp:Content ID=”Content2″>. To give your item template a title, there is a field in <%@ Page> called title which contains the page title (labeled in red in the above example). The final Default.aspx page will be as follows:

<%@ Page Language="C#" MasterPageFile="~/Site1.Master" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1.WebForm1" Title="Hello World" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">Hello World
</asp:Content>

A regular webpage has now been converted to work with your defined masterpage! You can follow this as a basis to larger more complexed pages.