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.