Deriving from a UserControl

[NickThissen]

Hi,


I made a UserControl called SliderUserControl which contains two labels and a WebSlider (third party slider control) in a table. The labels left and right of the slider should give the value of the slider and (Maximum - value) of the slider respectively. So if the slider goes from 0-100 and is at 30 now, then the control looks like this:

30  ----|---------- 70

I accomplished this with some simple javascript, and it's all working just fine:

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="SliderUserControl.ascx.vb" Inherits="F1TimeTrials.Controls.SliderUserControl" %>
<%@ Register assembly="Infragistics35.Web.v10.2, Version=10.2.20102.1011, Culture=neutral, PublicKeyToken=7dd5c3163f2cd0cb" namespace="Infragistics.Web.UI.EditorControls" tagprefix="ig" %>
 
<script type="text/javascript" id="igClientScript">
<!--
 
    function sliderControl_ValueChanged(sender, eventArgs) {
        var leftLabel = document.getElementById('<%= Me.lblLeftValue.ClientID %>');
        var rightLabel = document.getElementById('<%= Me.lblRightValue.ClientID %>');
 
        var maxValue = sender.get_maxValueAsDouble();
        var value = eventArgs.get_newValue();
        leftLabel.innerHTML = value;
        rightLabel.innerHTML = maxValue - value;
    }// -->
</script>
 
<asp:Table ID="table" runat="server">
    <asp:TableRow runat="server">
 
        <asp:TableCell runat="server">
            <asp:Label runat="server" ID="lblLeftValue" Text="0" />
        </asp:TableCell>
 
        <asp:TableCell runat="server">
            <ig:WebSlider ID="sliderControl" runat="server">
                <ClientEvents ValueChanged="sliderControl_ValueChanged" />
            </ig:WebSlider>
        </asp:TableCell>
 
        <asp:TableCell runat="server">
            <asp:Label runat="server" ID="lblRightValue" Text="100"/>
        </asp:TableCell>
 
    </asp:TableRow>
</asp:Table>

In order to interact with the WebSlider third party control directly I made some 'pass-through' properties such as MaxValue, MinValue, etc:

Imports Infragistics.Web.UI.EditorControls
 
Namespace Controls
 
    Public Class SliderUserControl
        Inherits System.Web.UI.UserControl
 
        Public ReadOnly Property Slider As WebSlider
            Get
                Return Me.sliderControl
            End Get
        End Property
 
        Public Property Value As Object
            Get
                Return Me.Slider.Value
            End Get
            Set(ByVal value As Object)
                Me.Slider.Value = value
            End Set
        End Property
 
        Public Property MinValue As Object
            Get
                Return Me.Slider.MinValue
            End Get
            Set(ByVal value As Object)
                Me.Slider.MinValue = value
            End Set
        End Property
 
        Public Property MaxValue As Object
            Get
                Return Me.Slider.MaxValue
            End Get
            Set(ByVal value As Object)
                Me.Slider.MaxValue = value
            End Set
        End Property
    End Class
End Namespace

Anyway, as I said, this works fine. If I use a Register directive that points to the SliderUserControl.ascx source then I can use it on my page and it works.


However, I actually need three different kind of sliders, each slightly different from this 'base' slider. For example, one will work with integers, another will work with float point values, etc. So what I want to do is create three classes that inherit SliderUserControl, and customize it from there.

So, for example, a slider that goes from 1 to 11 with only one label (without the extra second label on the right) could look like this:

Imports Infragistics.Web.UI.EditorControls
 
Namespace Controls
 
    Public Class NormalSlider
        Inherits SliderUserControl
 
        Private Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
            If Not Me.IsPostBack Then
                Me.Slider.ValueType = SliderValueType.Int
                Me.Slider.MinValue = 1
                Me.Slider.MaxValue = 11
                Me.Slider.Value = 6
                Me.Slider.SmallChange = 1
                Me.Slider.LargeChange = 3
                Me.Slider.Tickmarks.NumberOfMajorTickmarks = 3
                Me.Slider.Tickmarks.NumberOfMinorTickmarks = 11
 
                Me.lblLeftValue.Text = "6"
                Me.lblRightValue.Visible = False
            End If
        End Sub
 
    End Class
End Namespace

And now I'm a little stuck... I can build this project, but the NormalSlider control does not show up in the toolbox as I'm used to from windows forms projects.
I thought well, that's probably different for ASP.NET, but then I remembered that it DOES work for a different control. I have a class Grid that inherits a third party UltraWebGrid control:

Imports Infragistics.WebUI.UltraWebGrid
 
Namespace Controls
    Public Class Grid
        Inherits Infragistics.WebUI.UltraWebGrid.UltraWebGrid
   
        '...
    End Class
End Namespace

When I build the project now, the Grid control does show up in the toolbox! So that's a bit strange...


However, I googled the problem of course and I figured out how to get a custom control (class inheriting a control) onto a page, and apparently I can use another Register directive where I need to specify the Assembly and the Namespace. As far as I know, the Assembly is just the current project (the control is not in a separate project) called F1TimeTrials, and the Namespace is either Controls or F1TimeTrials.Controls.

So I tried both of those, for example:

<%@ Register TagPrefix="uc" Assembly="F1TimeTrials" Namespace="F1TimeTrials.Controls" %>

Now, I can type "<uc:" and Intellisense shows me the NormalSlider control. Great! However, when I place it on the page, it does not show up during design-time. There's just nothing there.

<%@ Page Title="" Language="vb" AutoEventWireup="false" MasterPageFile="~/Site.Master" CodeBehind="SliderTest.aspx.vb" Inherits="F1TimeTrials.SliderTest" %>
 
<%@ Register TagPrefix="uc" Assembly="F1TimeTrials" Namespace="F1TimeTrials.Controls" %>
 
 
 
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
 
    <!-- ScriptManager required for the WebSlider third party control -->
    <asp:ScriptManager runat="server">
    </asp:ScriptManager>
 
    <!-- Slider: -->
    <uc:NormalSlider runat="server" ID="slider1" />
 
</asp:Content>

There are no warnings or errors or anything, but the control isn't there.

When I run the project, it throws a null-reference exception in the Page_Load event of the NormalSlider class. Apparently, Slider (= the WebSlider third party control on the base class) is Nothing.

I don't get it... How can it be Nothing in the Page_Load event? Should I call some method that creates the control in the base-class first? Or ..?!

Does anyone see what I'm doing wrong?