Home
Atom Feed

My First Umbraco Usercontrol - Part 2: Basic Functionality Test

I needed to make sure that the usercontrol was working. The easiest way for me to do this, was to make the usercontrol print out a parameter sent to the usercontrol from the macro.

Here is the code:

EyeCatchCSVGenerator.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="EyeCatchCSVGenerator.ascx.cs" Inherits="EyeCatchCSVGenerator.EyeCatchCSVGenerator" %>
<h4>If everything works, the source node should show up below</h4>
<table id="sourcenode" runat="server"></table>

EyeCatchCSVGenerator.ascx.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using umbraco.presentation.nodeFactory;

namespace EyeCatchCSVGenerator
{
    public partial class EyeCatchCSVGenerator : System.Web.UI.UserControl
    {
        public int Source { get; set; }

        protected void Page_Load(object sender, EventArgs e)
        {

            Node source = new Node(Source);

            HtmlTableRow r = new HtmlTableRow();
            HtmlTableCell c1 = new HtmlTableCell();
            HtmlTableCell c2 = new HtmlTableCell();
            c1.InnerHtml = "Name: " + source.Name;
            c2.InnerHtml = "ID:" + source.Id;

            r.Cells.Add(c1);
            r.Cells.Add(c2);
            sourcenode.Rows.Add(r);
        }
    }
}

Build your project. It should build without problems.

Now, create a folder under "usercontrols" in your Umbraco directory with a proper name.

Copy your .ascx file into the newly created folder.

Then copy your .dll file from the bin folder on your PC to the bin folder on the server:

Now you need to create a macro to use on your template.

Create a macro (don't create parameters yet), and choose your .ascx file. Then click "Browse properties" and then "Save properties" in the modal window.

Macro: 

Now we need to create a template for testing our usercontrol and insert our macro in it.

Template:

<%@ Master Language="C#" MasterPageFile="/masterpages/default.master" AutoEventWireup="true" %>

<asp:Content ContentPlaceHolderID="ContentPlaceHolderDefault" runat="server">
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

       <html xmlns="http://www.w3.org/1999/xhtml">
             <head>
                    <title>EyeCatch CSV Generator Demo Page</title>
             </head>
             <body>
                    <!-- Insert Macro Here! -->
             </body>
       </html>
</asp:Content>

Apply your template to one of your nodes, and try to view the page in a browser.
The result should be something like this:

We have now established that the usercontrol works with Umbraco and are now ready to create the real functionality.