How to create Web Control effectively by embedding resources ?

The intension of this post is to update viewers that we can create web site in ASP.NET not only just by using the same default web controls (asp:button , asp:checkbox, asp:Textbox , etc…) provided by Microsoft but also we can generate such kind of components which could be more specific to requirements by customizing or creating our own web control.


Earlier I have updated blog about this. But I mean to explain in more which I have in learnt past few days.

Let us consider a normal asp:Button which is provided in asp.net framework.
When we just zoom in more about it, it is also a web control that is developed which implements “System.web.UI.webcontrols” to generate HTML content also IButtonControl, IpostBackEventHandler to handle post back events.
Let us concentrate on “System.web.UI.webcontrols”.
This base class helps to create a web control which web server can understand to generate a html content for the requested browser. Broswer shall understand the response content as it is in HTML format and displays specific web control as HTML component effectively.

In this post I am going to explain each and every step how to create such web control (a web control could be a combination of many resources like image, html page, style sheets, etc…).


Note: Please click on each image to look into and observe each step and understand easily.
Step 1:
Create your own website using visual studio as usual.

Right click on solution explorer to add new project.



Step 2:
When web control library is created with your own name “MyWebControls”, by default a class is created with same name.
I wish to change as “MyButton.cs”.

Now “MyButton” web control is going to be manufactured, with combination of an image (eye.gif) and style sheet (Stylesheet.css).
When user clicks on this control in browser, I wish to redirect browser to an html page (HTMLPage1.htm).
Resources I am using for “MyButton” for Demo
1) Eye icon –


2) Html page

Step 3:
So add all the required files to this web control library.

Select all added resources or files (eye.gif, Stylesheet.css, HTMLPage1.htm) and go to properties (click F4).
Change “Build action” from “content” to “Embedded resource”.

The reason for changing this “build action” is, when we build this “web control library”, .dll file is created for this library and these resources are said to be embedded or included as well.
If they are not embedded then the url of the image/html/style sheets should be used in the web pages to access them which is very absurd.

If these resources are embedded and build, then we have specialized classes which read content using assembly name and apply the image instead of using the actual path of resources.


Step 4:
Open “Assembly.Info.cs” file under “Properties” in web control library.
Define the resources available in the library folder with the web resource name to access them or identify the resource and the content type as shown below.


Step 5:
Open the “MyButton.cs” class files and perform required updates to customize or define your own web control accordingly.

Please consider as example the below source code developed for my web control.
(Click on each image to look into to understand)



Step 6:
Build the web control library in “release” mode.
Now create an aspx page in your web site, open its aspx page.
Step i) Open tool box and right click to add your web control.

Step ii) Browse to find the .dll file created in above web control library folder (release) to add.

Step iii) you can find your web control (MyButton) created and added to the tool box.

Step iv) Drag and drop “MyButton” object onto your aspx page.


Step 7: Run the application to view added aspx page.

Output:



After clicking on the “eye” view icon.



Note:
1) Observe the url of the html page redirected after clicking on the control.
It consists of saying “webresource.axd” , where this page does not exist in reality but considered to be to read the embedded resource and give response.
http://localhost/WebSite1/WebResource.axd?d=Tb3uAvtpQ05CR2eVpDNr-rngltSt7NDObe-eLHjHIX9lRnOBakawlyx0ztjvRvjQ0&t=633649438827814974
2) Please see below diagram to understand in detail the above process.


3) When we embed required resources to manufacture "MyButton" and add to tool box try to do below steps.
i) Unload the web control library project from solution.
ii) Delete all embedded resources (eye.gif, html page)that are been used to build "MyButton" and access the web site by running application.
Still we can find that the control is fine with required images/html page.
Confimration :- Once the web control library is build and dll is added to the tool box, required resources which are embedded are included in .dll file and need not worry about resources used to build web control.