ASPX to Web Part Conversion

Article
08/06/2008

In this post I plan to demonstrate a simple Hello World Conversion from an ASPX web page to a Share Point Web Part.

Now, the first thing we will do is write the quick web page that will contain a label, a link button and a text box. The functionality of the aspx and then web part will simply be for the user to type in their name, click submit and have the form display a hello world message. We will also code a back button that takes the user to the beginning. Very simple in aspx and the aspx would look something like this in code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

</head>

<body>

<tr>

<td>

<asp:Label ID="lblHeader" runat="server" Text="Sample Web Part Program"

Font-Size="Large" Font-Bold="True" Font-Italic="True"></asp:Label>

</td>

</tr>

<tr>

<td />

</tr>

<tr>

<td>

<asp:Label ID="lblUserDisplay" runat="server" Text="Please Enter Your Name:"></asp:Label>

</td>

</tr>

<tr>

<td />

</tr>

<tr>

<td>

<asp:TextBox ID="txtUserName" runat="server"></asp:TextBox>

</td>

</tr>

<tr>

<td />

</tr>

<tr>

<td>

<asp:LinkButton ID="lnkSubmit" runat="server">Submit</asp:LinkButton>

<asp:LinkButton ID="lnkBack" runat="server" Visible="false">Back</asp:LinkButton>

</td>

</tr>

</table>

</form>

</body>

</html>

The code behind would look something like this:

using System;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

public partial class _Default : System.Web.UI.Page

{

protected void lnkSubmit_Click(object sender, EventArgs e)

{

//Show User Name

string UserName = string.Empty;

if (this.txtUserName.Text != null)

{

UserName = this.txtUserName.Text;

}

this.lblUserDisplay.Text = "Hello " + UserName + "!";

//Hide Text Box

this.txtUserName.Visible = false;

//Hide Submit Button

this.lnkSubmit.Visible = false;

//Show Back Button

this.lnkBack.Visible = true;

}

protected void lnkBack_Click(object sender, EventArgs e)

{

this.lblUserDisplay.Text = "Please Enter Your Name:";

this.txtUserName.Text = string.Empty;

this.txtUserName.Visible = true;

this.lnkBack.Visible = false;

this.lnkSubmit.Visible = true;

}

The user interface would look like this:

And this respectively:

Now comes the core of the document. First we are going to think of minimum cost spanning trees. Remember math folks? So the same is going to apply here. We are going to take the lowest level controls first. We are going to identify all cells, rows, tables, and controls.

Right before we get to this, it is important to note, the using statements and inheritance structure which looks like this:

using System;

using System.Runtime.InteropServices;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Serialization;

using Microsoft.SharePoint;

using Microsoft.SharePoint.WebControls;

using Microsoft.SharePoint.WebPartPages;

namespace Hello_World_Web_Part

{

[Guid("f5aff43c-6d10-498f-b553-8a627b1b3bdf")]

public class Hello_World_Web_Part : System.Web.UI.WebControls.WebParts.WebPart

{

LinkButton lnkSubmit = new LinkButton();

LinkButton lnkBack = new LinkButton();

Label lblHeader = new Label();

Label lblUserDisplay = new Label();

TextBox txtUserName = new TextBox();

Notice the GUID, this must be created by you as mentioned in the blog article.

We are then going to build our declarations section

This section will look something like:

//Declarations

Table tbl = new Table();

TableRow tr1 = new TableRow();

TableRow tr2 = new TableRow();

TableRow tr3 = new TableRow();

TableRow tr4 = new TableRow();

TableRow tr5 = new TableRow();

TableRow tr6 = new TableRow();

TableRow tr7 = new TableRow();

TableCell tc1 = new TableCell();

TableCell tc2 = new TableCell();

TableCell tc3 = new TableCell();

TableCell tc4 = new TableCell();

TableCell tc5 = new TableCell();

TableCell tc6 = new TableCell();

TableCell tc7 = new TableCell();

We are then going to add the event receivers to the controls pointing at the actual methods. This is simple and looks like this:

//Set Event Handlers

lnkSubmit.Click += new EventHandler(lnkSubmit_Click);

lnkBack.Click += new EventHandler(lnkBack_Click);

I am not going to re-write the methods as they are displayed above and you can copy and paste.

We do, however, need to set the control properties as so:

//Set Control Properties

lnkSubmit.Text = "Submit";

lnkBack.Text = "Back";

lnkBack.Visible = false;

lblHeader.Text = "Sample Web Part Program";

lblHeader.Font.Size = FontUnit.Large;

lblHeader.Font.Italic = true;

lblHeader.Font.Bold = true;

lblUserDisplay.Text = "Please Enter Your Name:";

Finally, we are going to "build" the format of the control. This is the core and dependent if you are using tables or divs will be significant. Divs would probably be easier because there would be much less to write.

//Build Display

//Row 1

tc1.Controls.Add(lblHeader);

tr1.Cells.Add(tc1);

tbl.Rows.Add(tr1);

//Row 2

tr2.Cells.Add(tc2);

tbl.Rows.Add(tr2);

//Row 3

tc3.Controls.Add(lblUserDisplay);

tr3.Cells.Add(tc3);

tbl.Rows.Add(tr3);

//Row 4

tr4.Cells.Add(tc4);

tbl.Rows.Add(tr4);

//Row 5

tc5.Controls.Add(txtUserName);

tr5.Cells.Add(tc5);

tbl.Rows.Add(tr5);

//Row 6

tr6.Cells.Add(tc6);

tbl.Rows.Add(tr6);

//Row 7

tc7.Controls.Add(lnkSubmit);

tc7.Controls.Add(lnkBack);

tr7.Cells.Add(tc7);

tbl.Rows.Add(tr7);

//Add Controls to the rendering

this.Controls.Add(tbl)

We now have our web part!

ASPX to Web Part Conversion

Additional resources