Friday, February 29, 2008

How to add External Javascript (.js) file to your ASPX page

I was having a problem fixing this and it took me 1 day time to search through the net and got it fix nicely.

.Net Framework used: 2.0
Language used: C#

To register the Javascript file to your page, you need to :
1.) Register it in your code behind
2.) If it has a function that need you to call from your page, you need to use OnClientClick event for your LinkButton/Button. Once you click then it will call the function in your .js file.


1. Register your external Javascript in Code Behind
Register your external Javascript in code behind by using RegisterClientScriptInclude() function. You may refer to http://msdn2.microsoft.com/en-us/library/system.web.ui.clientscriptmanager.registerclientscriptinclude.aspx for details.

protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
this._presenter.OnViewInitialized();
this.init();
}
this._presenter.OnViewLoaded();

String csname = "AreaPrint";
String csurl = "~/AreaPrintingService.js";
Type cstype = this.GetType();

ClientScriptManager cs = Page.ClientScript;

if (!cs.IsStartupScriptRegistered(cstype, csname))
{
cs.RegisterClientScriptInclude(cstype, csname, ResolveClientUrl(csurl));

}
}


2. OnClientClick event to call Javascript function
You cannot use OnClick event to call javascript function if you are using ASP: LINKBUTTON OR ASP:BUTTON.

You may use this instead in your ASPX page:

OnClientClick="printPartOfPage('print');" />

DONE.

My Javascript function printPartOfPage() is mainly send the DIV area to printer to print. The content of AreaPrintingService.js :-

// JScript File
function printPartOfPage(elementID)
{
var printContent = document.getElementById(elementID);
var windowURL = "about:blank";
var windowName = "Preview";
var printWindow = window.open(windowURL, windowName, "width=800,height=600,scrollbars=yes");

printWindow.document.write(printContent.innerHTML);
printWindow.document.close();
printWindow.moveTo(300,200);
printWindow.focus();
printWindow.print();

}
-----------------------------------------------------------------------------
Beside using RegisterClientScriptInclude Method, you may consider using RegisterClientScriptBlock Method if your js code is not too long.


String csname = "PopupScript";
Type cstype = this.GetType();

ClientScriptManager cs = Page.ClientScript;

if (!cs.IsStartupScriptRegistered(cstype, csname1))
{
String cstext = "alert('Hello World');";
cs.RegisterStartupScriptBlock(cstype, csname, cstext, true); // last input argument set to TRUE if you do not include tag in your cstext
}

OR If you have Longer script use StringBuilder to build to the script before passing it to RegisStartupScriptBlock

StringBuilder cstext = new StringBuilder();
cstext.Append("text/javascript\"> function DoClick() {");
cstext.Append("Form1.Message.value='Text from client script.'} );
cstext.Append("script>");
cs.RegisterClientScriptBlock(cstype, csname, cstext.ToString(), false); <-- tag already included

1 comment:

Max said...

Where necessary import/using definitions?