Create Asp.Net ‘Newsletter’ User Control

I cannot express enough in words, the mystical capabilities of Asp.Net User Controls. Anything I learn or create, I package it up as a user control.

With a User Control, you can build custom components of frequently used code/logic or business requirements. Let’s say, Contact Us Form, Data Views using Repeater or GridViews, Progress Bar, anything really, in fact you can wrap a whole Asp webform as a User Control. Let’s assume you have written a Simple Interest Calculator for a website using a DropDownList, Button and some logic in code behind. This little bit of functionality can be packaged up as Asp.Net User Control and reused as and when required again in future.

What’s more exciting is that you can add additional custom Properties and custom Methods for that User Control to extend their functionality instead of reinventing the wheel.

Incorporating Asp.Net User Controls developers can embrace Software Reuse and Component Based Software Engineering practices.

I understand, web is full of endless examples of user controls examples but; Let me illustrate how I create a simple Asp.Net User Control and demonstrate in practice what I have discussed above. Hopefully, this will give you an insight into the capabilities of this development approach.

Right click your Web Application Solution > ‘Add New Item’ to insert .ascx (Web User Control) template from Visual Studio.  Feel Free to Copy the code below. I have packaged Subscribe To Newletter; Common business requirement as a User Control as opposed to writing new on every site.

</pre>
<%@ Control Language="VB" AutoEventWireup="false" CodeFile="Newsletter.ascx.vb" Inherits="Newsletter" %>

Sign up to our newsletter

<asp:ValidationSummary ID="ValidationSummary1" runat="server"     ValidationGroup="NewsletterValidations"     DisplayMode="BulletList"     Font-Bold="true" />

<asp:Label ID="Name" runat="server" Text="Your name:" AssociatedControlID="InputName"></asp:Label> <asp:TextBox ID="InputName" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="NameRequired" runat="server"     ValidationGroup="NewsletterValidations"     ControlToValidate="InputName"     ErrorMessage="Please enter your name"     SetFocusOnError="true"     Text="!"     Display="Dynamic"></asp:RequiredFieldValidator>

<br />

<asp:Label ID="Email" runat="server" Text="Your email:" AssociatedControlID="InputEmail"></asp:Label> <asp:TextBox ID="InputEmail" runat="server"></asp:TextBox> <asp:RequiredFieldValidator ID="EmailRequired" runat="server"     ValidationGroup="NewsletterValidations"     ControlToValidate="InputEmail"     ErrorMessage="Please enter your email"     SetFocusOnError="true"     Text="!"     Display="Dynamic"></asp:RequiredFieldValidator>

<br />

<asp:Label ID="Website" runat="server" Text="Website:" AssociatedControlID="InputWebsite" Visible="false"></asp:Label> <asp:TextBox ID="InputWebsite" runat="server" Visible="false"></asp:TextBox> <asp:RequiredFieldValidator ID="WebsiteRequired" runat="server"     ValidationGroup="NewsletterValidations"     ControlToValidate="InputWebsite"     ErrorMessage="Please tell us your website"     Text="!"     Display="Dynamic"     SetFocusOnError="true"     Enabled="false"></asp:RequiredFieldValidator>

<br />

<asp:Button ID="Subscribe" runat="server" Text="Add me" ValidationGroup="NewsletterValidations" />
<pre>

Now, our Newsletter User Control is ready, let us register and add this to our application. Create or select any existing page (.aspx) you would like to add this User Control to.

Add the following Register Directive to the top of the page.

<%@ Register TagName="Newsletter" TagPrefix="asphive" Src="~/Newsletter.ascx" %>

And also register the User Control to the WebConfig file at the <pages><controls> section the following.

<add tagPrefix="asphive" tagName="Newsletter" src="~/Newsletter.ascx"></add>

Now, let us create a Custom Property for your Newsletter User Control. As you can see I have added website details but set their visibility to false which we can switch on and off as and when required. Here is a little custom property I have created to extend my User Control.


Partial Class Newsletter
Inherits System.Web.UI.UserControl

#Region "Custom Properties"
Public Property ShowCompanyOption() As Boolean
Get
  If Website.Visible = True Then
    Return True
  Else
    Return False
  End If
End Get
Set(value As Boolean)
  If value Then
   Website.Visible = True
   InputWebsite.Visible = True
   WebsiteRequired.Enabled = True
 End If
End Set
End Property
#End Region

End Class

In the above, I have created a very basic set of requirements, but I would assume you can let your imagination take control and create really useful User Controls.

Finally this is how you can use Newsletter User Contol on a page with a User Control Register Directive.

<asphive:Newsletter ID="Newsletter1" runat="server" ShowCompanyOption="true" />
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s