Monday, November 16, 2009

How to Add FreeTextBox - Rich Text Editor - in C#

This tutorials explains how we can add custom controls to our project, and how to programmtically access the control's properties and methods. C# version.

ASP.NET's built-in controls are very useful, but unfortunately do not provide everything we want. Thankfully, ASP.NET allows us to create custom controls. This tutuorial will focus on how we can implement these custom controls for use in our projects.

We start by adding a Bin folder to our project. To do this, right-click the main project in the Solution Explorer and choose Add ASP.NET Folder > Bin. Once the Bin folder appears in the Solution Explorer, we can right-click this and then choose Add Existing Item. We can then simply browse to the location of the assembly file (.dll or .pdb). In this example, we are using the FreeTextBox control which can be downloaded from www.freetextbox.com and is the no.1 choice for a free HTML editor in ASP.NET Custom Controls. Once we have added the FreeTextBox.dll to our project, we can use it.

We can also add this to our toolbox for dragging & dropping like other controls, by right-clicking a blank area of the toolbox and choosing Choose Items. If FreeTextBox is not in the list, we can click on the Browse button to locate it. Once in the list, make sure it is selected (ticked).

Once you see the icon in the toolbar, drag it onto the page you want it to be displayed. Doing this will add the following to the top of your page:

<%@ Register Assembly="FreeTextBox" Namespace="FreeTextBoxControls" TagPrefix="FTB" %>

I just signed up at Server Intellect and couldn't be more pleased with my Windows Server! Check it out and see for yourself.

And you will also see the following where we want the FreeTextBox custom control to be placed:

<"FTB:FreeTextBox ID="FreeTextBox1" runat="server"> '<'/FTB:FreeTextBox'>

We used over 10 web hosting companies before we found Server Intellect. Their dedicated servers and add-ons were setup swiftly, in less than 24 hours. We were able to confirm our order over the phone. They respond to our inquiries within an hour. Server Intellect's customer support and assistance are the best we've ever experienced.

This is all that is needed for us to use the control within our page. However, if we want to interact with the control programmatically, we will have to add the assembly reference to the code-behind:

using FreeTextBoxControls;

The above code will allow us to reference the FreeTextBox in our code, and also allow us to access its properties and methods. However, if we are using a naming container such as a MasterPage, we will need to use the FindControl method as well. This will be done by writing code similar to this:

FreeTextBox myFreeTextBox = (FreeTextBox)Master.FindControl("FreeTextBox1");


using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using FreeTextBoxControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
FreeTextBox1.Height = 150;
FreeTextBox1.Text = "We are using the <:b>Custom Control FreeTextBox<:/b> and changing its Text attribute programmatically.";
}
}


We migrated our web sites to Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With Server Intellect's help, we were able to avoid any headaches!

Or if we had to use FindControl, it would look something like this:



using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using FreeTextBoxControls;

public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
FreeTextBox myFreeTextBox = (FreeTextBox)Master.FindControl("FreeTextBox1");
myFreeTextBox.Height = 150;
myFreeTextBox.Text = "We are using the <:b>Custom Control FreeTextBox<:/b> and changing its Text attribute programmatically.";
}
}

2 comments:

Pandu said...

Thanks dude.. It is helped me..

Unknown said...

Thank you!!! I was missing the referencing part