Web Custom Control Designer issue
-
Just starting to familiarize myself with dotNet web design, and don't understand the behavior I'm getting with a Web Custom Control. To play around with custom controls, I decided to build a web site navigation control built around a table that's populated with the logo, and the common links in the web site. Then I just insert this control at the top of each page in the site, set one of the properties to indicate which link should be deactivated, and I've got a nice easy to maintain navigation control. The funny behavior I get is when I set one of the controls properties in the designer... For some reason, all the rows and columns I added to the custom control in the constructor are duplicated in code on the form the control is in! What's that all about? If that's not enough detail, here's a brief description of how I built the control... I added a web control project to my solution, and modified the template to use WebControls.Table as the base class. Then (here's where I might be going wrong) in the constructor, I added the rows and columns I wanted my control to have, and I also added the navigation links. To use the control, I add it to the toolbox, and drag it onto the form I want to use it on. Then I have to set a property that deactivates the link for the current form, and for some reason, code is added to the form that duplicates the rows and columns I added in the constructor of the control!
-
Just starting to familiarize myself with dotNet web design, and don't understand the behavior I'm getting with a Web Custom Control. To play around with custom controls, I decided to build a web site navigation control built around a table that's populated with the logo, and the common links in the web site. Then I just insert this control at the top of each page in the site, set one of the properties to indicate which link should be deactivated, and I've got a nice easy to maintain navigation control. The funny behavior I get is when I set one of the controls properties in the designer... For some reason, all the rows and columns I added to the custom control in the constructor are duplicated in code on the form the control is in! What's that all about? If that's not enough detail, here's a brief description of how I built the control... I added a web control project to my solution, and modified the template to use WebControls.Table as the base class. Then (here's where I might be going wrong) in the constructor, I added the rows and columns I wanted my control to have, and I also added the navigation links. To use the control, I add it to the toolbox, and drag it onto the form I want to use it on. Then I have to set a property that deactivates the link for the current form, and for some reason, code is added to the form that duplicates the rows and columns I added in the constructor of the control!
Hi there, That is because the
Table.Rows
property is defined as an inner default property of theTable
class and the value of the Rows property is persisted in design mode when the control is changed. So after the control has been changed, the control designerTableDesigner
redraws the appearance of the table, the rows property is now updated with the added rows in the constructor and it results in the duplication as you are seeing. In this case, you need to create your own custom control designer, the sample code looks something like:[Designer(typeof(CustomTableDesigner))]
public class WebNavigator : System.Web.UI.WebControls.Table
{
public WebNavigator():base()
{
}
}public class CustomTableDesigner : System.Web.UI.Design.ControlDesigner
{public override string GetDesignTimeHtml() { WebNavigator table = (WebNavigator) Component; if (table.Rows.Count==0) { TableRow row = new TableRow(); TableCell cell1 = new TableCell(); HyperLink link1 = new HyperLink(); link1.Text = "Home"; link1.NavigateUrl = "Home.aspx"; cell1.Controls.Add(link1); row.Cells.Add(cell1); TableCell cell2 = new TableCell(); HyperLink link2 = new HyperLink(); link2.Text = "About Us"; link2.NavigateUrl = "AboutUs.aspx"; cell2.Controls.Add(link2); row.Cells.Add(cell2); table.Rows.Add(row); StringWriter sw = new StringWriter(); HtmlTextWriter tw = new HtmlTextWriter(sw); table.RenderControl(tw); return sw.ToString(); } else return base.GetDesignTimeHtml(); }
}
-
Hi there, That is because the
Table.Rows
property is defined as an inner default property of theTable
class and the value of the Rows property is persisted in design mode when the control is changed. So after the control has been changed, the control designerTableDesigner
redraws the appearance of the table, the rows property is now updated with the added rows in the constructor and it results in the duplication as you are seeing. In this case, you need to create your own custom control designer, the sample code looks something like:[Designer(typeof(CustomTableDesigner))]
public class WebNavigator : System.Web.UI.WebControls.Table
{
public WebNavigator():base()
{
}
}public class CustomTableDesigner : System.Web.UI.Design.ControlDesigner
{public override string GetDesignTimeHtml() { WebNavigator table = (WebNavigator) Component; if (table.Rows.Count==0) { TableRow row = new TableRow(); TableCell cell1 = new TableCell(); HyperLink link1 = new HyperLink(); link1.Text = "Home"; link1.NavigateUrl = "Home.aspx"; cell1.Controls.Add(link1); row.Cells.Add(cell1); TableCell cell2 = new TableCell(); HyperLink link2 = new HyperLink(); link2.Text = "About Us"; link2.NavigateUrl = "AboutUs.aspx"; cell2.Controls.Add(link2); row.Cells.Add(cell2); table.Rows.Add(row); StringWriter sw = new StringWriter(); HtmlTextWriter tw = new HtmlTextWriter(sw); table.RenderControl(tw); return sw.ToString(); } else return base.GetDesignTimeHtml(); }
}
I tried that, but I still have the problem where the designer adds HTML code that duplicates the rows I added in the controls constructor! I hope the code displays ok... :(
... Here's the entry the designer adds initially... ... As soon as I modify an attribute in the custom control, all this gets added to the HTML file!
-
I tried that, but I still have the problem where the designer adds HTML code that duplicates the rows I added in the controls constructor! I hope the code displays ok... :(
... Here's the entry the designer adds initially... ... As soon as I modify an attribute in the custom control, all this gets added to the HTML file!
Do you mean the duplication of the rows is that the html markups are added as soon as the control has been changed?
[DefaultProperty("Rows"), ParseChildren(true, "Rows") ...]
public class Table : WebControlLooking at the code above, you will see that the Rows property of the control Table will be parsed by the page parser when the control is used declaratively on an ASP.NET page. It makes sure that the nested elements(rows) are in line with the count of the row collection of the control. So the html markups which are added should represent the Rows property of the control. For more information, you can see: Control Parsing, ParseChildrenAttribute, and Control Builders[^] Design-Time Support for Web Forms[^]