Trying to make a Custom ASP.NET control

Question

I am trying to make my first custom control in WebForms.

I defined my class like so: (DeviceRow.ascx.cs)

public partial class DeviceRow : System.Web.UI.WebControls.Panel
{
    protected void Page_Load(object sender, EventArgs e)
    {
        this.BorderStyle = System.Web.UI.WebControls.BorderStyle.Solid;
    }
}

I marked it up like this: (DeviceRow.ascx)

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DeviceRow.ascx.cs" Inherits="VMS_Calc.DeviceRow" %>
<asp:Button ID="Button1" runat="server" Text="X" Width="28px" />

<asp:DropDownList ID="ddl_Type" runat="server"></asp:DropDownList>

<asp:DropDownList ID="ddl_Mfg" runat="server"></asp:DropDownList>

<asp:TextBox ID="tb_FPS" runat="server" Width="40px">15</asp:TextBox>

And I am attempting to use it like this: (Default.aspx)

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
    <section style="vertical-align: middle">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
            <ContentTemplate>
                <vmsc:DeviceRow ID="DeviceRow11" runat="server"> </vmsc:DeviceRow>
                 <br />
                <br />
                 <asp:Button ID="Button1" runat="server"
                 Text="Click Me" OnClick="Button1_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </section>
</asp:Content>

The 'Click Me' button appears on the page, but my DeviceRow panel doesn't. (no errors)

What did I miss?

Answer 1

To use the control, like you mentioned ,

Please change the below line

public partial class DeviceRow : System.Web.UI.WebControls.Panel

to

public partial class DeviceRow  : System.Web.UI.UserControl

Answer 2

When you create a user control, you are responsible to create properties and maintain states for that control. Here you need a BorderStyle Property for your control. I would do like this:

DeviceRow.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="DeviceRow.ascx.cs" Inherits="VMS_Calc.DeviceRow" %>

<asp:Panel ID="pnlContainer" runat="server" >
    <asp:Button ID="Button1" runat="server" Text="X" Width="28px" />
    <asp:DropDownList ID="ddl_Type" runat="server"></asp:DropDownList>
    <asp:DropDownList ID="ddl_Mfg" runat="server"></asp:DropDownList>
    <asp:TextBox ID="tb_FPS" runat="server" Width="40px">15</asp:TextBox>
</asp:Panel>

DeviceRow.ascx.cs

using System;
using System.Web.UI.WebControls;

namespace VMS_Calc
{
    public partial class DeviceRow : System.Web.UI.UserControl
    {
        protected void Page_Load(object sender, EventArgs e)
        {

        }

        protected void Page_PreLoad(object sender, EventArgs e)
        {
            pnlContainer.BorderStyle = this.BorderStyle;

        }

        public BorderStyle BorderStyle 
        {
            get {
                    if (ViewState["MyBorderStyle"] != null)
                    {
                        return(BorderStyle)ViewState["MyBorderStyle"];
                    }
                    return System.Web.UI.WebControls.BorderStyle.None;
                }
            set
            {
                ViewState["MyBorderStyle"] = value;
                pnlContainer.BorderStyle = value;
            }
        }

    }
}

And when I add the usercontrol, it's BorderStyle property is available in markup as well as in the code:

<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="MainContent">
     <section style="vertical-align: middle">
        <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
            <ContentTemplate>
                <vmsc:DeviceRow ID="DeviceRow11" BorderStyle="Solid" runat="server"> </vmsc:DeviceRow>
                 <br />
                <br />
                 <asp:Button ID="Button1" runat="server"
                 Text="Click Me" OnClick="Button1_Click" />
            </ContentTemplate>
        </asp:UpdatePanel>
    </section>    
</asp:Content>



protected void Button1_Click(object sender, EventArgs e)
{
    DeviceRow11.BorderStyle = BorderStyle.None;
}

You should go ahead and play with different properties and even see how to manage events for user controls.