Introduction:
We all have used Web Server Controls like datagrid, textboxes, buttons and calendars. But have you ever thought of making your own custom web server control. In this article we will develop a very simple email server control that will let you send emails to the users with a static message.
Getting started:
For making web server controls you need to select the Web Server project. You can select the Web control Library project as it can be seen in the picture below:
Okay, this will open a new file which has many lines of code already written for you. Don’t worry about those lines yet I will explain all of it later.
Email Server Control Look:
let’s take a look at the UI of the Email Server control when it will be finished.
As, you see that this is fairly simple email control which only consists of a button and a textbox. It does not gives you the ability to write the message or the body since those of them are kept constant in this example. The cool thing is that when you drag and drop the control on your webform it will be displayed exactly the same way as in the picture above which means that this control will have the design time appearance and a designer attached to it.
[ Designer(typeof(EmailControl.CompositeControlDesigner)) ]
This is an attribute that associates the designer for this control. We will see the designer later in this article.
Email Server Control Code:
private Button _button; private TextBox _emailTextBox;
Next we created two controls. Once is a textbox and one is a button control. Since our Email control will be made of two different controls it is called composite control.
public override ControlCollection Controls { get { EnsureChildControls(); return base.Controls; } }
Here we check that the child controls are created and added to the control tree.
protected override void CreateChildControls() { Controls.Clear(); _emailTextBox = new TextBox(); _emailTextBox.ID = "emailTextBox"; _button = new Button(); _button.ID = "EmailButton"; _button.Text = "Send Email"; _button.Click +=new EventHandler(_button_Click); this.Controls.Add(_emailTextBox); this.Controls.Add(_button); }
This is where the controls are actually made and added to the control tree. We are simply making the textbox controls as well as the button controls and we attach a button click event with the button controls and finally add the control in the control tree. As you can see the _emailTextBoxID is assigned a new id. Every control on the form must have a different id or else it will generate errors.
protected override void Render(HtmlTextWriter writer) { _emailTextBox.RenderControl(writer); _button.RenderControl(writer); }
The render method is used to render the controls on the screen. We are rendering the textbox as well as button control. You can also use various html tags to make your rendering more attractive.
private void _button_Click(object sender, EventArgs e) { MailMessage mail = new MailMessage(); mail.To = _emailTextBox.Text; mail.From = "testmail@tester.com"; mail.Subject = "Hello"; mail.Body = "Hello World"; try { SmtpMail.SmtpServer = "localhost"; SmtpMail.Send(mail); _button.Text = "Mail Sent"; } catch(Exception ex) { _emailTextBox.Text = ex.Message; } }
This is the code to send email which I have already explained in my previous articles like https://codersource.net/2010/01/31/sending-emails-in-c/. If you encounter any problems while sending emails you can visit www.msdn.microsoft.com .
The Visual Composite Control Designer:
Visual Composite Control Designer class allow us to actually see the visual appearance of our control when we drag it on the form. Let’s see the designer class in detail.
using System; using System.ComponentModel; using System.ComponentModel.Design; using System.Web.UI; using System.Web.UI.Design; namespace EmailControl { public class CompositeControlDesigner : ControlDesigner { public override string GetDesignTimeHtml() { // Retrieve the controls to ensure they are created. ControlCollection controls = ((Control)Component).Controls; return base.GetDesignTimeHtml(); } public override void Initialize(IComponent component) { if (!(component is Control) &&!(component is INamingContainer)) { throw new ArgumentException( "Component must be a container control.", "component"); } base.Initialize(component); } } }
The designer class mainly uses the GetDesignTimeHTML() method to get the html of all the controls on the form. We use an attribute to denote out designer class. If you don’t specify your control designer than you control can appear as text or also as nothing depending what you render in the render method. Its always nice to have a designer which gives the user more idea what they are dealing with.
[ Designer(typeof(EmailControl.CompositeControlDesigner)) ]
Project attached with this Article:
There is a project attached with this article. All you need to do to use the email Server control is to reference the dynamic link library file in your project. Once the dll has been referenced you can add the control by simply dropping it on the form.
I hope you liked the article Happy programming !
If you have further questions please email Azam at azamsharp@gmail.com
Attachments:
Project Files: EmailControl_azam.zip