Javascript Embed in Custom Control

In my previous article (Custom Controls in Asp.Net) I explain about how to create Custom Controls in Asp.Net.

In this article I am explaining about how to embed JavaScript file with in the Custom control.

To use JavaScript file with in the custom control, we can use ClientScriptManager class. By using reference for this class, we can embed javascript file with in the Custom control.

To create Custom Control
Open Visual studio Tool File-> New -> Project
Then select Class Library in the right side panel, mention folder name and Press Ok And change class name to CutomControlWithJavascript.

Before proceeding into the code, add reference to System.Web.
Right click on Solution Explorer and select Add Reference System.Web, press ok.

The code to create custom control with javascript look like below.



Imports System.Data Imports System.Data.SqlClient Imports System.Web.UI Imports System.Web.UI.WebControls Public Class CutomControlWithJavascript Inherits WebControl Protected btn1 As Button Protected Overrides Sub CreateChildControls() btn1 = New Button btn1.Text = "Click For Alert" Me.Controls.Add(btn1) End Sub Protected Overrides Sub OnPreRender(ByVal e As System.EventArgs) MyBase.OnPreRender(e) Dim resourceName As String resourceName = "CustomControlWithJS.AlertFunction.js" Dim cs As ClientScriptManager cs = Me.Page.ClientScript cs.RegisterClientScriptResource (Type.GetType("CustomControlWithJS.CutomControlWithJavascript"), resourceName) End Sub Protected Overrides Sub RenderContents(ByVal writer As System.Web.UI.HtmlTextWriter) Try btn1.Attributes.Add("onclick", "return display()") btn1.RenderControl(writer) Catch ex As Exception Finally End Try End Sub End Class

In the above code you observe, we included the javascript file common.js by using ClientScriptManager class. This javascript file has one function called clickfor().

In CreateChildControls() method we created one button and we assign the clickfor() javascript function to the onclick event of button in the RenderContents method.

To embed javascript file into the custom control set its build action to “Embedded Resource”. This can be done by right click on the .js file, select properties and change build action to “Embedded Resource” from Content.

After that we have to register this javascript file in the AssemblyInfo.vb class. For this include single line of code.

<Assembly: WebResource("CustomControlWithJS.AlertFunction.js", "text/javascript")>


Here CustomControlWithJS is the Namespace of the custom control and AlertFunction.js is the name of the javascript file.

The total code of the AssemblyInfo.vb class is shown below.



Imports System Imports System.Reflection Imports System.Runtime.InteropServices Imports System.Runtime.CompilerServices Imports System.Web.UI ' General Information about an assembly is controlled through the following ' set of attributes. Change these attribute values to modify the information ' associated with an assembly. ' Review the values of the assembly attributes <Assembly: AssemblyTitle("CustomControlWithJS")> <Assembly: AssemblyDescription("")> <Assembly: AssemblyCompany("home")> <Assembly: AssemblyProduct("CustomControlWithJS")> <Assembly: AssemblyCopyright("Copyright © home 2009")> <Assembly: AssemblyTrademark("")> <Assembly: ComVisible(False)> 'The following GUID is for the ID of the typelib if this project is exposed to COM <Assembly: Guid("afdd08bc-9d23-4447-a546-1dbc48878271")> ' Version information for an assembly consists of the following four values: ' ' Major Version ' Minor Version ' Build Number ' Revision ' ' You can specify all the values or you can default the Build and Revision Numbers ' by using the '*' as shown below: ' <Assembly: AssemblyVersion("1.0.*")> <Assembly: AssemblyVersion("1.0.0.0")> <Assembly: AssemblyFileVersion("1.0.0.0")> <Assembly: WebResource("CustomControlWithJS.AlertFunction.js", "text/javascript")>

Build the project. For that Right click on SolutionExplorer and select Build option. Now your code is compiled into DLL file and your control is ready to use.

Still now, you successfully created the Customcontrol which has javascript file.

To test this custom control create new website and open ToolBox, on General Tab Right click and select Choose Items. Browse to our custom control DLL file and add that dll file to our ToolBox.

Now the Control is added to our ToolBox. You can Drag and drop that control to source code. Using the Custom control code look like below.

    
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %> <%@ Register Assembly="CustomControlWithJS" Namespace="CustomControlWithJS" TagPrefix="cc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head2" runat="server"> <title>Untitled Page</title> </head> <body> <form id="form1" runat="server"> <div> <cc1:CutomControlWithJavascript ID="CutomControlWithJavascript1" runat="server" /> </div> </form> </body> </html>

Execute this site and you can get the single button on the page with text as “Click For Aler”. If you click this button, you get the alert message as “Alert from web custom control” which was defined in the javascript file of the custom control.

In this way you can embed the client side script into your own server control.


To Create Custom Control Download source code here

To Use Custom Control Download source code here