Creating your first Umbraco User Control - PART 2

In the previous article of this series we learnt how to create a user control in visual studio, upload it to our Umbraco site and then how to display it on our site.

In part 2 we are going to learn how to pass variables from Umbraco back to our User Control.

If you followed part one then great we are going to use the same source code and modify the bits we need to.

Because the New Zealand econonmy has turned to crap and the government is constantly changing the GST rate we'd like to update the GST rate in Umbraco and not in our source code.

1. Open your Umbraco user control in Visual Studio.

2. Last time we had some code like such

  double GST = 1.125;
           double Result;
           Result = double.Parse(txtAmount.Text) * GST;
           lblResult.Text = Result.ToString("0.00"); 

This time want to replace this line (double GST = 1.125;) with a dynamic value from Umbraco.

We need create a variable to hold the GST amount eg
private Double gstRate;

3. Next create a public property so we can access it from Umbraco and assign it to the variable we created above. eg

 public Double _gstRate
        {
            get { return gstRate; }
            set { gstRate = value; }
        }

4. Replace double GST = 1.125; with so:

  Double mutipler;
        mutipler = gstRate / 100 + 1;
        Double Result;
        Result = double.Parse(txtAmount.Text) * mutipler;
        lblResult.Text = Result.ToString("0.00"); 

5. Build the soluion and upload to to your Umbraco Bin directory and move to the Umbraco control panel.

6. Go to your developer --> macros and select the Macro you created last time or if you want you can create a new macro.

7. Select the "browse properties" button


8. The public properties in you usercontrol should be displayed in this page


9. Click the parameter tab at the top of the screen and make sure the type selected is text.

10. Save your macro and return to the content page where you are going to place GST Calculator.

11. Insert the macro and you should see the option to input your GST rate.


12. Publish your page and you should be away laughing

13. To edit the rate you can either delete the macro within the page and reinsert it or view the HTML using the html button on the rich text editor and changing the rate manually in their.

Hope you enjoyed this little tutorial - please make any suggestions of tutortial you would like to see! The GST calculator is running live my umbraco site here

You can download a copy of the Visual Studio 2005 version here

Creating your first Umbraco User Control - PART 1

1. Start a new asp.net web application in Visual Studio. You can name in whatever you like, in this sample project I have called it UmbracoModules. When creating new modules for my umbraco installation I have in the past tended to create 1 project for all the new user controls, not a single instance for each new control.

2. Create a new folder in the solution explorer that explains the name of the control.



3. Add a new Web User Control to the folder you just created



4. Design your .ascx file the same way you normally design a .aspx page, in this example we are going to take 1 input field and the calculate the GST amount, in New Zealand the GST amount is 12.5%

Amount <asp:TextBox ID="txtAmount" runat="server" />
<asp:Button ID="btnSubmit" Text="Submit"  runat="server" /> <br />
<asp:Label ID="lblResult" runat="server" />
5.    Create a click event for the Submit button
    protected void btnSubmit_Click(object sender, EventArgs e)
        {
           double GST = 1.125;
           double Result;
           Result = double.Parse(txtAmount.Text) * GST;
           lblResult.Text = Result.ToString("0.00"); 
        }

6. Build the project

7. We now need to copy the files we just created to the Umbraco installation either by copy paste or using FTP. Copy the calculator.ascx file to usercontrols directory and the UmbracoModules.dll to the bin directory.

8. Create a new Marco in the Umbraco control panel.



You should see your user control in .net user control drop down list, if you select this, also tick Use in Editor and click save.

9. All left to do is to add the user control to any pages you want it to appear on. Go to the content tab in Umbraco, select the page you want then hit the insert macro button on the nav bar, you should see you macro appear.
10. YOUR DONE!

In part 2 we will see how to pass variables from Umbraco back to your user control.