User Control or Custom Server Control

[TheCivic]

Hi everyone,

Can someone help me to figure this out in my head.

A user control is a control made up of a ascx file and code behind file.

A custom server control is basically the same, but the control is made up entirely of code.

Is this correct?

Does anyone know the pros and cons for building a control in either way? Is one faster? Is one better?

I am only just starting ASP.NET 2 and am going to build a control to create menu toolbars and menu options dynamically, so the title, description and URL can be changed for each toolbar and option.

Any advice would be appreciated. Cheers

 

[jby1]

I am sure others will expand on this:

A User Control is, as you say, made of of the ascx and code-behind file. And you are also correct in what a Custom Server Control is. Additionally, you add a custom control to your toolbox, and use it in the same manner as other controls there. You can also have a visual representation for a custom control in the designer.

A User Control is easier and quicker to develop than a Custom control, as you can do all of the visual work with the Designer.

However, they are often not as portable as a custom control. Custom controls are good if you want to build a control library for use across projects.

What I would probably do is create the control as a User Control first, and if I found that it was likely to be useful elsewhere (or I have time in my project!), refactor it into a custom control.

Check the MSDN site, as there is a good article on there that goes through all this far more eloquently than I can! I would post the link, but I can't remember it off the top of my head!

 

[TheCivic]

jby1,

Thanks for this i really appreciate it.

Now i have taken your advice and created my component as a user control, but it errors with the following.

Object reference not set to an instance of an object.

I have created the neccessary objects on the ascx file, created property functions so i can change look of the toolbar and a Page_Load event in the code behind file to set the style of the toolbar.

I have added the code below for the code behind file of the user control.

Any ideas?


Partial Class MainMenuToolbar
Inherits System.Web.UI.UserControl

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

' Set the style of the heading text
hyp_header.Style.Add("font-family", "Arial")
hyp_header.Style.Add("font-size", "x-small")
hyp_header.Style.Add("font-style", "normal")
hyp_header.Style.Add("font-weight", "bold")
hyp_header.Style.Add("line-height", "normal")
hyp_header.Style.Add("color", "#4A519F")
hyp_header.Style.Add("text-decoration", "none")

' Set the style of the description text
hyp_description.Style.Add("font-family", "Arial")
hyp_description.Style.Add("font-size", "xx-small")
hyp_description.Style.Add("font-style", "normal")
hyp_description.Style.Add("line-height", "normal")
hyp_description.Style.Add("font-weight", "normal")
hyp_description.Style.Add("text-decoration", "none")
hyp_description.Style.Add("color", "#000000")

' Create the mouseover and mouseout javascript event strings
Dim MouseOverStr As String = "document.getElementById('" & img_arrow.ClientID & "').src='images/sq_arrow_light.gif'; document.getElementById('" & hyp_header.ClientID & "').style.color='#A4A8CF'; document.getElementById('" & hyp_description.ClientID & "').style.color='#FFFFFF'; document.getElementById('" & tc_header.ClientID & "').style.backgroundColor='#4A519F'; document.getElementById('" & tc_description.ClientID & "').style.backgroundColor='#4A519F'"
Dim MouseOutStr As String = "document.getElementById('" & img_arrow.ClientID & "').src='images/sq_arrow.gif'; document.getElementById('" & hyp_header.ClientID & "').style.color='#4A519F'; document.getElementById('" & hyp_description.ClientID & "').style.color='#000000'; document.getElementById('" & tc_header.ClientID & "').style.backgroundColor='#A4A8CF'; document.getElementById('" & tc_description.ClientID & "').style.backgroundColor='#A4A8CF'"

' Add javascript to image
img_arrow.Attributes("onMouseOver") = MouseOverStr
img_arrow.Attributes("onMouseOut") = MouseOutStr

' Add javascript to main heading cell
tc_header.Attributes.Add("onMouseOver", MouseOverStr)
tc_header.Attributes.Add("onMouseOut", MouseOutStr)

' Add javascript to description cell
tc_description.Attributes.Add("onMouseOver", MouseOverStr)
tc_description.Attributes.Add("onMouseOut", MouseOutStr)

End Sub

' This procedure is used when you want to add a new toolbar, with no arguments
Public Sub New()

End Sub

' This procedure can accept the parameters as well, thus less coding
Public Sub New(ByVal Heading As String, ByVal Description As String, ByVal Url As String)
Toolbar_Heading = Heading

Toolbar_Description = Description

Toolbar_URL = Url
End Sub

' Sets the text for the main heading on a toolbar
WriteOnly Property Toolbar_Heading()
Set(ByVal value)
hyp_header.Text = " " & value
End Set
End Property

' Sets the text fore the description heading on a toolbar
WriteOnly Property Toolbar_Description()
Set(ByVal value)
hyp_description.Text = value
End Set
End Property

' Sets the url that the toolbar is going too
WriteOnly Property Toolbar_URL()
Set(ByVal value)
hyp_header.NavigateUrl = value
hyp_description.NavigateUrl = value
End Set
End Property

End Class

 

[jby1]

Have you stepped through with the debugger to locate exactly where the error is occuring?

I also have another suggestion. If you are creating a menu control, it is better not to do this server side as it results in a unnecessary postbacks which will impact the usability.

In my applications, I use a client-side menu control which I downloaded from

http://www.skmmenu.com.

You can create your menu as an XML file, or you can create it dynamically in your code behind. I am not sure if it will meet your needs exactly, but if it does then it could save you some time.

 

[TheCivic]

jby1,

I do need to create this menu toolbar, as i has some additional functionality that needs to be added later, but thanks for the link, i will still check it out.

The error occurs at :

hyp_header.Text = " " & value

If i comment out this line, then the error appears at :

hyp_description.Text = value


The page i am adding the toolbar too, calls the toolbar as follows :

Dim a As New MainMenuToolbar("Company", "Company description goes here", "

http://www.google.co.uk")

menuholder.Controls.Add(a)

Am i doing everything right?

 

[jby1]

Unfortunately, my knowledge of VB syntax is a little poor (I use C#), but what you are saying suggests that there may be a problem with the value object. Have a look a that in the QuickWatch and see what is assigned to it.

 

[TheCivic]

jby1,

Sorry but i am very new to .net, what do you mean the value object. I have turned on the debugger, but cannot see this.

Any one else?

Would you like it in c instead? i think there is a converter online somewhere

 

[jby1]

Where you say this

hyp_description.Text = value

What is in value?

 

[TheCivic]

first value goes into hyp_header.text

second value goes into hyp_description.text

third value goes does
hyp_header.NavigateUrl = value
hyp_description.NavigateUrl = value

When i create a new control using the following code

Dim a As New MainMenuToolbar("Company", "Company description goes here", "

http://www.google.co.uk")

Then in the control i have the following function which sets the properties.

Public Sub New(ByVal Heading As String, ByVal Description As String, ByVal Url As String)
Toolbar_Heading = Heading

Toolbar_Description = Description

Toolbar_URL = Url
End Sub

Is this the correct way to do it?

If i comment out where i set the properties then the following line, in the page_load event of the control errors with the same error message.

hyp_header.Style.Add("font-family", "Arial")

Hope to hear form you soon. cheers

 

[jby1]

Is hyp_header being set to an instance of an object? How are you declaring hyp_header?

 

[TheCivic]

hyp_header is a hyperlink in my ascx file.

Here is the contents of the ascx file (very basic)

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="MainMenuToolbar.ascx.vb" Inherits="MainMenuToolbar" %>
<asp:Table ID="tbl_toolbar" runat="server" style="width: 100%; height: 18px; border: none;" cellpadding="0" cellspacing="0">
<asp:TableRow>
<asp:TableHeaderCell ID="tc_image" runat="server" style="width: 18px; height: 18px;"><asp:Image ID="img_arrow" runat="server" ImageUrl="~/images/sq_arrow.gif" /></asp:TableHeaderCell>
<asp:TableHeaderCell ID="tc_header" runat="server" style="width: 50%; height: 18px;"><asp:HyperLink ID="hyp_header" runat="server" Text="HEADING" /></asp:TableHeaderCell>
<asp:TableHeaderCell ID="tc_description" runat="server" style="width: 50%; height: 18px;"><asp:HyperLink ID="hyp_description" runat="server" Text="DESCRIPTION" /></asp:TableHeaderCell>
</asp:TableRow>
</asp:Table>

 

[TheCivic]

jby1,

Just to let you know, that i have sorted it out!!

I changed the New event function within the user control to be called settings.

An example to load two instances of the control, goes like this.

Dim Toolbar As MainMenuToolbar

Toolbar = CType(Page.LoadControl("~/Bin/MainMenuToolbar.ascx"), MainMenuToolbar)
Toolbar.Settings("Alliances", "View what alliances you are in", "C")
menuholder.Controls.Add(Toolbar)

Toolbar = CType(Page.LoadControl("~/Bin/MainMenuToolbar.ascx"), MainMenuToolbar)
Toolbar.Settings("Companies", "Add or edit your company details", "G")
menuholder.Controls.Add(Toolbar)

Just thought i would let you know, and wanted to say thanks for answering the original question, you have given me some insight!! Thanks

 

[jby1]

It was my pleasure, and I am pleased to see that you solved it!