Calling JavaScript from ASP.NET Master Page and Content Pages - Part I
Call JavaScript From Master Page
You can call an existing JavaScript function from a Master Page or can create one on the fly. Here are some common scenarios:
1. Create a JavaScript function on the fly and call the JavaScript function in the MasterPage Page_Load() event
C#
protected void Page_Load(object sender, EventArgs e)
{
string someScript = "";
someScript = "";
Page.ClientScript.RegisterStartupScript(this.GetType(), "onload", someScript);
}
The Page.ClientScript.RegisterStartupScript() allows you to emit client-side script blocks from code behind. More info can be found over here http://msdn.microsoft.com/en-us/library/system.web.ui.clientscriptmanager.registerstartupscript.aspx
2. Call an existing JavaScript function on MasterPage Page_Load() event
Let us assume you have an existing JavaScript function declared in between the tags, then here’s how to call that function from Page_Load()
<head runat="server">
<title>title>
<script type="text/javascript">
function invokeMeMaster() {
alert('I was invoked from Master');
}
script>
<asp:ContentPlaceHolder id="head" runat="server">
asp:ContentPlaceHolder>
head>
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.ClientScript.IsStartupScriptRegistered("alert"))
{
Page.ClientScript.RegisterStartupScript
(this.GetType(), "alert", "invokeMeMaster();", true);
}
}
3. Call JavaScript function from MasterPage on Button click
If you want to call a JavaScript function on a Button click, then here’s how to do so:
<head runat="server">
<title>title>
<script type="text/javascript">
function invokeMeMaster() {
alert('I was invoked from Masterdotnetcurry');
}
script>
<asp:ContentPlaceHolder id="head" runat="server">
asp:ContentPlaceHolder>
head>
In the tag, add a Button and use the OnClientClick to call this function
<asp:Button ID="btnMaster" runat="server" Text="Button"OnClientClick="return invokeMeMaster();"/>
The OnClientClick() is called before the postback occurs. This gives us a place to check for some condition and cancel the submit if the condition is not satisfied. We will see an example in Tip 6.
4. Access a control on the MasterPage using JavaScript
If you have a control on the MasterPage and need to access it using JavaScript, then here’s how to do so. In this sample, we will test the length of the TextBox to see if there are 5 or more letters. If the number of letters is less than 5, the form submit will be cancelled.
Add a TextBox and a Button control in the MasterPage (outside the ContentPlaceHolder) as shown below
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="panelMaster" GroupingText="MasterPage controls"runat="server">
<asp:TextBox ID="txtMaster" runat="server">asp:TextBox>
<asp:Button ID="btnMaster" runat="server" Text="Button"OnClientClick="return accessMasterControl();" />
<br />
asp:Panel>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
asp:ContentPlaceHolder>
div>
form>
body>
In the element of the MasterPage, add the following code:
<head runat="server">
<title>title>
<script type="text/javascript">
function accessMasterControl() {
if(document.getElementById('').value.length <= 5) {
alert('Minimum 5 characters required')
return false;
}
else { return true;}
}
script>
<asp:ContentPlaceHolder id="head" runat="server">
asp:ContentPlaceHolder>
head>
5. Access a control on the Content Page from a MasterPage using JavaScript
If you have a control on the Content Page which has to be accessed in the MasterPage using JavaScript, then here’s how to do so:
On the Content Page, create a TextBox as shown below :
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">
<asp:Panel ID="panelContent" GroupingText="ContentPage Controls"runat="server">
<asp:TextBox ID="txtContent" runat="server">asp:TextBox>
asp:Panel>
asp:Content>
Now access and populate the TextBox ‘txtContent’ from the MasterPage
<head runat="server">
<title>title>
<script type="text/javascript">
function accessControlContentPage() {
var txtCont = document.getElementById('');
txtCont.value = "I got populated using Master Page";
}
script>
<asp:ContentPlaceHolder id="head" runat="server">
asp:ContentPlaceHolder>
head>
6. Ask user before submitting the form on a MasterPage
In order to ask the user for a confirmation before submitting the form, you can either use code behind or can use simple mark up as shown below:
Declare a Button control that causes postback and write the following code in MasterPage.master.cs
protected void Page_Load(object sender, EventArgs e)
{
string myScript = @"";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(),"MakeSure", myScript);
form1.Attributes.Add("onsubmit", "return askBeforeSubmit();");
}
If you want to avoid a code-behind approach, you can ask the user for a confirmation by using the OnClientClick() on the Submit button
<asp:Button ID="btnMaster" runat="server" Text="Button"
OnClientClick="return confirm('Are you sure?');"/>
Calling JavaScript from ASP.NET Master Page and Content Pages - Part II
Call JavaScript from Content Page
Here are some common scenarios of executing JavaScript from a Content Page.
1. Create a JavaScript function on the fly and call the JavaScript function in the Content Page Page_Load() event
protected void Page_Load(object sender, EventArgs e)
{
const string someScript = "alertMe";
if (!ClientScript.IsStartupScriptRegistered(this.GetType(), someScript))
{
ClientScript.RegisterStartupScript(this.GetType(),
someScript, "alert('I was called from Content page!')",true);
}
}
2. Call a JavaScript function declared in a .js file from the Content Page
If you have a .js file and want to call the function from your Content Page, then here’s how to do so.
Let’s create a .js file called TestScript.js and add the following function in the .js file.
function insideJS() {
alert('Inside .js');
}
Assuming that your .js file is kept in a Script folder, reference the file in your MasterPage in the following manner.
<head runat="server">
<title>title>
<script src="Scripts/TestScript.js" type="text/javascript">script>
...
Now in your Content Page(in our case Default.aspx.cs ), call the JavaScript function on the Page_Load:
protected void Page_Load(object sender, EventArgs e)
{
if (!Master.Page.ClientScript.IsStartupScriptRegistered("alert"))
{
Master.Page.ClientScript.RegisterStartupScript
(this.GetType(), "alert", "insideJS();", true);
}
}
3. Referencing the .js file from a Content Page instead of the Master page
The approach shown above in Tip 2 works well, however this approach would add a reference to the .js file for every page in the application (since we are adding the .js in the Master Page). If you want to avoid this approach, then remove the reference added to the .js file in Tip 2 in the Master Page. Now add a reference to the .js file from the Content Page using the ‘RegisterClientScriptInclude’ as shown below:
protected void Page_Load(object sender, EventArgs e)
{
Page.ClientScript.RegisterClientScriptInclude("selective", ResolveUrl(@"Scripts\TestScript.js"));
if (!Master.Page.ClientScript.IsStartupScriptRegistered("alert"))
{
Master.Page.ClientScript.RegisterStartupScript
(this.GetType(), "alert", "insideJS();", true);
}
}
Using this approach, we can avoid referencing the .js file for every content page.
Note: This approach adds the JavaScript reference inside the tag of the page.
4. Declare JavaScript inside the Content page and execute it
If you are looking out to declare JavaScript inside the Content Page, then here’s how to do so. Add the following markup inside the Content page (in our case Default.aspx)
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1"Runat="Server">
<asp:Panel ID="panelContent" GroupingText="ContentPage Controls"runat="server">
<asp:TextBox ID="txtContent" runat="server">asp:TextBox>
<asp:Button ID="btnContent" runat="server" Text="Button"OnClientClick="Populate();" />
asp:Panel>
<script type="text/javascript" language="javascript">
function Populate() {
{
document.getElementById('').value = "Hi";
}
}
script>
asp:Content>
The markup shown above populates the textbox with some text on a button click.
5. Accessing a Control on the Master Page From a ContentPage using JavaScript
In our previous article, we saw how in Tip 5 To access a control on the ContentPage From a Master Page using JavaScript. In this tip, we will see how to access a control kept on the MasterPage from a ContentPage. Do the following:
We have added a textbox control to the of the MasterPage as shown below:
<body>
<form id="form1" runat="server">
<div>
<asp:Panel ID="panelMaster" GroupingText="MasterPage controls"runat="server">
<asp:TextBox ID="txtMaster" runat="server">asp:TextBox>
<br />
asp:Panel>
<asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server">
asp:ContentPlaceHolder>
div>
form>
body>
We will now access this TextBox ‘txtMaster’ in the ContentPage using JavaScript
To do so, go to the Content page (Default.aspx) and add the following line below the
...
...
Now in the code behind of Default.aspx.cs , access the MasterPage control in the following manner
protected void Page_Load(object sender, EventArgs e)
{
TextBox tb = (TextBox)Master.FindControl("txtMaster");
string val = tb.ClientID;
string script = @"";
if (!Page.ClientScript.IsStartupScriptRegistered("Mast"))
{
Page.ClientScript.RegisterStartupScript(this.GetType(),
"Mast", script);
}
}
Observe how we have used the RegisterStartupScript instead of RegisterClientScriptBlock. The main difference is that the 'RegisterStartupScript' method places the JavaScript at the bottom of the ASP.NET page right before the closing element whereas the 'RegisterClientScriptBlock' method places the JavaScript directly after the opening
6. Call JavaScript function from an ASP.NET AJAX enabled Content Page
If your content page is wrapped in an ASP.NET AJAX UpdatePanel, then you cannot use the ClientScript.RegisterStartupScript to call a JavaScript function during a partial-page postback. Instead, use the ScriptManager.RegisterStartupScript() method.
protected void Page_Load(object sender, EventArgs e)
{
System.Text.StringBuilder sb = new System.Text.StringBuilder();
sb.Append(@"");
ScriptManager.RegisterStartupScript(this, this.GetType(), "ajax", sb.ToString(), false);
}
Observe that the last parameter for RegisterStartupScript() is set to 'false'. This means that the
Source: http://www.dotnetcurry.com/ShowArticle.aspx?ID=274
Thanks,
Nitin Sharma
