Wednesday 8 February 2012

Creating Custom ASP.NET Control using VB.NET

Today I'm developing a custom ASP.NET control.
It's usefull when you develop those libraries if you use them again and again. I know it makes you slow in the beginning but later you easily compansate that time. If you are a web developer and develope sites again and again how many times you deal with user authentication, authorisation kind of stuff. Copy paste can not be the exact solution many times.If you have other collegues working on the same project then copy paste operation sometimes can be a real mess. This time I'm developing Server Controls for a web-designer friend who has no knowledge about programing. He will open Visual Web Developer and install my server controls and insert them where he wants to. My controls here can create datatables, modify web.config and do everything he needed with just drag drop and property assignments. I also supply him an admin page to fill them in runtime. It will make my workload nearly zero. I only interfere in very complex or critical jobs.

Anyway, although I did this 4-5 years ago I couldn't remember most of the things. So I began with searching and reading articles about it. Then I started from zero.
1 - In Visual Studio I've started a new web project using ASP.NET Server Control project type
2 - In server controls there isn't any visual designer. so I have an empty code page. well not empty there are some imports.
3 - I started to build up a simple login screen.
4 - After some trials and fails I found a way to do it correctly. Here I attached the simplest code of it. I put some notes on important parts. You may use it as a template for beginning. I divide the code into regions to make it more understandable.
5 - Where I strugled most ?
Default Values. (look how I did in render section)
Event / Method stuff. ( I put comments on important parts)

Well it's just a beginning. Good Luck


BTW Adding an icon to the controls is tricky. Here is the link Microsoft explains how as walkthrough.
http://msdn.microsoft.com/en-us/library/yhzc935f(d=printer).aspx

I can't simply believe this. After reading and trying to implement those rubbish in Microsoft I discovered a very simple way to add icons to controls. here it is :
  1. Right click project in solurtion explorer and choose add existing item
  2. select a 16x16 bmp image
  3. Rename it and make the image name and control name same.
  4. Click image once in Solution explorer and change the Build Action property to Embedded Resource
 That's it.

After digging internet and books here are the tips you may hard to find.

Using URL as property

To use a URL path as a property you need to add reference to System.Design.DLL first.
Then you should import System.Drawing.Design at the top of the page like :
Imports System.Drawing.Design

Then here is a sample code to do the job

    <EditorAttribute(GetType(System.Web.UI.Design.UrlEditor), GetType(UITypeEditor))> _
    Public Property URL() As String
        Get
            Return http_url
        End Get
        Set(ByVal value As String)
            http_url = value
        End Set
    End Property
    Private http_url As String

And when you click this property you'll get this screen


Menu like Items Property (nested)

This is one another though job to do while you're developing an ASP.NET server control. If you want an Items box for user to fill items you should do something like this.

It took so much time to find the exact solution.
Here is the complete code block

Private _menuItems As New List(Of MenuItem)()
    <PersistenceMode(PersistenceMode.InnerProperty)> _
    Public ReadOnly Property MenuItems() As List(Of MenuItem)
        Get
            Return _menuItems
        End Get
    End Property
End Class
<ToolboxItem(False)> _
<ParseChildren(True, "MenuItems")> _
Public Class MenuItem
    Private _clientClick As String
    Private _menuItems As New List(Of MenuItem)()
    <Localizable(True)> _
    Public Property Title() As String
        Get
            Return m_Title
        End Get
        Set(ByVal value As String)
            m_Title = value
        End Set
    End Property
    Private m_Title As String
    Public Property Href() As String
        Get
            Return m_Href
        End Get
        Set(ByVal value As String)
            m_Href = value
        End Set
    End Property
    Private m_Href As String
    Public Property Id() As String
        Get
            Return m_Id
        End Get
        Set(ByVal value As String)
            m_Id = value
        End Set
    End Property
    Private m_Id As String
    <PersistenceMode(PersistenceMode.InnerDefaultProperty)> _
    Public Property MenuItems() As List(Of MenuItem)
        Get
            Return _menuItems
        End Get
        Set(ByVal value As List(Of MenuItem))
            _menuItems = value
        End Set
    End Property

When you click that small button near MenuItem you are now have this screen to make the entry easier.:



No comments:

Post a Comment