If you download the source code, you will find two embedded
allows the client browser to cache the script which should lead to faster page
resource rather than putting it in the control’s code, the overall code base is
also much easier to maintain.
responsible for sliding down the content to hide it and sliding up the content
to show it.
slide it up and slide it down. By using ScriptManager
rather than writer.write(the script
block), the custom control will be worked under Ajax environment. So if you are trying to render the script block using writer.write,
it will not work under Ajax environment.
Sliding mechanism occurs by placing each textbox control
inside a separate html div, and these html div's will appear/disappear using
As I mentioned, we have three languages (English, Arabic,
and French), so we have to put the English textbox control inside html div, the
Arabic textbox control should be inside another html div, and the same thing
with the French textbox control.
Take a look at the code below, registering startup script at
render time for English language. This code will be repeated three times for English,
Arabic and French with a little change for each language to make it unique.
ScriptManager.RegisterStartupScript(Page, Me.GetType, Me.ID & "_EnBlock", _
"var " & Me.ClientID & "_collapseEn = new animatedcollapse('" & _
Me.ClientID & "_dvEn', 400, false" & IIf(DefaultLanguage = _
ControlLanguages.English, ",'block'", "") & ");", True)
As you see in listing 2, we are registering startup script
at render time for English content. Note that we are declaring a variable from
our custom control ClientID is MutliLang1 so the variable will be like this
(MultiLang1_collapseEn). This will be a unique object for our custom control,
so it does not matter now how many times you drag/drop or how many times you
created an instance from this custom control in the page, each custom control
object. Take this advice; if you want to create your own custom control, use
custom control more reusable.
To collapse the English content, the MultiLang1_collapseEn.slideup()
function will take care of that, and to expand it again, use MultiLang1_collapseEn.slidedown().
Use the same thing in the left languages, but remember that each language has
"MultiLangClass" function which is the main function, and
"HideShowLang" function which is responsible for calling
Slideup/Slidedown functions. "MultiLangClass" function receives many
As you saw in figure 1, we are passing the ClientID's for
Using the same technique which we have used, we will
embedded "MultiLangJS.js" file. Again, by using this technique (i.e.
my custom control many times in the page without worrying about confliction
between these instances. Assume that my control ID is MultiLang1 so the
of the language he wants to display. I will give more examples about how to
call this variable later in this article.
declaration in the class file for your custom control as you see in the code
<Assembly: TagPrefix("MyCustomsControls.CustomsControls", "asp")>
And we have to tell the Page that our custom control has
that page. So we need to write a bit of code in the OnInit
sub as in Listing 4.
Protected Overrides Sub OnInit(ByVal e As EventArgs)
Me.Page.ClientScript.RegisterClientScriptInclude(Me.GetType(), "MultiLangJS", _
"animatedcollapse", Page.ClientScript.GetWebResourceUrl(Me.GetType(), _