Click here to Skip to main content
15,908,776 members
Articles / Web Development / HTML

Learn about ASP.NET HtmlGenericControl

Rate me:
Please Sign up or sign in to vote.
5.00/5 (3 votes)
13 Dec 2020CPOL3 min read 7.8K   3   2
HtmlGenericControl of ASP.NET Webforms
In this article, we'll be exploring the HtmlGenericControl of ASP.NET Webforms. What's exciting about this article will that we will see how to create this control dynamically and combine it with some client-side scripting to create a popover/tooltip UI.

Introduction

Have you ever encountered a scenario in which sometimes, when developing within the space of ASP.NET Webforms, you need to look for the equivalent HTML server controls of the following: span, body, div, font, p, ul, and li? This is where the HtmlGenericControl comes into the picture; it represents the HTML server control element not directly represented by the ASP.NET framework. That’s why in this article, we’ll discuss more of HtmlGenericControl.

OK, let’s get started then.

Background

Before we start, our example was build using ASP.NET Webforms, .NET 4.7.1, and Visual Studio 2019.

I believe that Webforms is still relevant today because there are still several projects out there using this legacy technology stack.

One more thing before we start, the project we’ve created is a default Webforms project.

See the screenshots below:

Learn About ASP.NET HtmlGenericControl

Learn About ASP.NET HtmlGenericControl

What is HtmlGenericControl?

By looking at the source code of this class and according to the comment, it says: “A control representing an unknown HTML tag”.

You can also see it here. Or you can see the screenshot below:

Learn About ASP.NET HtmlGenericControl

Typically, the HtmlGenericControl class represents server-side tags that do not map directly to a specific HTML control. We can use this by using the designer view of Visual Studio or creating it dynamically in the backend code.

Let’s say, for example, the <ul> tag. Once you have added the attribute runat=" server" gives you the ability to reference this control from your code-behind.

Let us see an example below:

ASP.NET
<ul runat="server" id="myULTag"></ul>
C#
var result = this.myULTag.GetType() == typeof(HtmlGenericControl);

this.myULTag.InnerText = result? "This is an example of HtmlGenericControl" : "";

Output

Suppose you are interested in creating a HtmlGenericControl dynamically. In that case, it is another way where you can set or modify attributes and styles, using the Attributes and Styles properties inherited from HtmlControl. Moreover, it has a TagName property that can be changed, which gives you the ability to change it dynamically at runtime even before the page is rendered as HTML and sent to the client browser. We’ll discuss this further in the next section.

Creating an HtmlGenericControl Dynamically

OK, before we start, I would like to show our example’s outcome.

Please see the screenshot below:

The main idea here is to build the tooltip/popover HTML content of the link Show Popover on the server-side. Moreover, we are going to put this within the Page_Load event of the page.

First, we need to declare the HTML required element to build the HTML content of the popover.

See the code below:

C#
//This variable (divPopover) is our div container.
protected HtmlGenericControl divPopover = new HtmlGenericControl();

//This variable (listPopover) will be our <ul>. 
protected HtmlGenericControl listPopover = new HtmlGenericControl();

//This variable (menu) will be our <li> that will be the child of <ul>
protected List<HtmlGenericControl> menu = new List<HtmlGenericControl> { };

//This variable (navigationItems) will be the text items of the anchor links 
//that will be the child of li.
protected string[] navigationItems = 
   new string[] { "Home", "About", "Contact Us", "Who We Are", "Another Page" };

Second, once these variables are available, we need to set its related properties such as TagName, ID and Attributes to make this element easy to identify when rendered in the browser.

See the code below:

C#
//Create the <div> container.
if (this.divPopover != null)
{
	this.divPopover.TagName = "div";
	this.divPopover.ID = "menus";
	this.divPopover.Attributes.Add("class", "hide");
}

//Create the unordered list <ul>.
if (this.listPopover != null)
{
	this.listPopover.TagName = "ul";
	this.listPopover.Attributes.Add("class", "nav nav-pills nav-stacked");
}

//Create the list item <li>.
menu.AddRange(new List<HtmlGenericControl> {
					new HtmlGenericControl { TagName = "li" },
					new HtmlGenericControl { TagName = "li" },
					new HtmlGenericControl { TagName = "li" },
					new HtmlGenericControl { TagName = "li" },
					new HtmlGenericControl { TagName = "li" }
				});

Third, once declared and everything set up, including the properties, we can now add the child HTML elements to its specific parent HTML elements.

See the sample code below:

C#
menu.ForEach((item) =>
{
	//Add the list item individually into the unordered list <ul>.
	listPopover.Controls.Add(item);
});

//Iterate through the navigation items that will be used as the text of the anchor/<a> tag. 
for (int i = 0; i < navigationItems.Length; i++)
{
	var anchor = new HtmlAnchor
	{
		HRef = "#",
		InnerText = navigationItems[i],
		Title = navigationItems[i]
	};

	anchor.Attributes.Add("class", "nav-link");
	//Add the navigation item 
	listPopover.Controls[i].Controls.Add(anchor);
}

//Add all of the constructed HTML structure to the div container.
this.divPopover.Controls.Add(listPopover);

//Add the div container to our page server controls, which in this case is Panel.
this.Panel1.Controls.Add(divPopover);

Fourth, after implementing the steps above, we can then check the source/designer of our ASPX page to understand how it will look.

ASP.NET
<div class="container">
	<div class="row" style="margin-top: 100px;">
		<div class="col-md-6">
			<!-- start of anchor -->
			<!-- when this anchor is click the panel HTML content 
                 will be displayed as a tooltip -->
			<a href="#" rel="popover" data-trigger="focus" 
						data-popover-content="<%=this.Panel1.ClientID%>">Show Popover</a>
			<!-- end of anchor -->
		</div>
	</div>
</div>

<% /*Start of the Panel1*/ %>
<% /* This where the div container will be added.*/%>
<asp:Panel ID="Panel1" runat="server">
</asp:Panel>
<% /*End of the Panel1*/%>

The Panel control will become the placeholder of the <div> container. To see the HTML result assigned to the Panel control, see the resulted code below:

HTML
<div id="MainContent_Panel1">
    <div id="MainContent_menus" class="hide">
		<ul class="nav nav-pills nav-stacked">
			<li><a href="#" title="Home" class="nav-link">Home</a></li>
			<li><a href="#" title="About" class="nav-link">About</a></li>
			<li><a href="#" title="Contact Us" class="nav-link">Contact Us</a></li>
			<li><a href="#" title="Who We Are" class="nav-link">Who We Are</a></li>
			<li><a href="#" title="Another Page" class="nav-link">Another Page</a></li>
		</ul>
	</div>
</div>

The HTML result above shows that you can create a similar or any form of HTML structure with the help of the HtmlGenericControl class.

Fifth and last step, for the popover to work, we need a little help from JQuery.

See the code sample below:

JavaScript
$(function () {
	$('[rel="popover"]').popover({
		container: 'body',
		html: true,
		content: function () {

			let content = $('#' + $(this).data('popover-content')).clone(true);

			return $(content).children("div").removeClass("hide");

		}
	}).click((event) => event.preventDefault());
});

For us to see the final output, please see the screenshot below:

Summary

This post has shown us how to use HtmlGenericControl by generating an HTML structure that was rendered in the browser and resulted in a popover/tooltip. Don’t forget that we have used JQuery and Bootstrap, too, to make all of this possible.

I hope you have enjoyed reading this article, as I have enjoyed writing it. Stay tuned for more. Until next time, happy programming! Please don’t forget to bookmark, rate, and/or comment. Cheers and thank you for reading!

Lastly, you can download the sample code here.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
Philippines Philippines
Jin humbles himself as a C# programmer and a web developer, who loves backend and middleware development and still improving his skills at the front-end arena. He loves what he does, but far from perfect, here is a list of what he loves to do: read, write and code.
This is a Social Group

2 members

Comments and Discussions

 
QuestionWebForms Pin
TMags14-Dec-20 6:36
TMags14-Dec-20 6:36 
GeneralRe: WebForms Pin
Jin Vincent Necesario15-Dec-20 0:37
professionalJin Vincent Necesario15-Dec-20 0:37 
Fantastic! Smile | :) Thanks for reading!
Jim Rohn: "Don't wish it was easier, wish you were better". Subscribe to my blog @ https://jinnecesario.com/.

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.