Creating a Web Part with Client-side Script (Java Script etc)

Calling Java script functions in webparts:



We can call Java script functions in sharepoint webparts in 2 ways
1) Embed a script in a Web Part
2) Linking a script file to webpart

1) Embed a script in a Web Part :
Method 1:
1) You can explicitly specify your script in a Web Part and have the script loaded only once for all instances of the same Web Part on a Web Part Page. The IsClientScriptBlockRegistered method of the System.Web.UI.Page class can check if the script has been loaded for the same Web Part Page.

private const string HelloIncludeScriptKey = "HelloIncludeScript";
private const string EmbeddedScriptFormat = "< script language=javascript >function Hello(){alert('Hello world');} </ script> ";

public Web_Part2()
{

this.PreRender += new EventHandler(Web_Part2_PreRender);

}

void Web_Part2_PreRender(object sender, EventArgs e)
{

if (!Page.IsClientScriptBlockRegistered(HelloIncludeScriptKey))
Page.RegisterClientScriptBlock(HelloIncludeScriptKey, EmbeddedScriptFormat);
//syntax: Page .RegisterClientScriptBlock(key of the script, ScriptFormat string);
}
Button btn;
protected override void Render(HtmlTextWriter writer)
{
btn.RenderControl(writer);
}
protected override void CreateChildControls()
{
btn = new Button();
btn.ID = "btn";
btn.Text = "Click";
btn.OnClientClick = "Hello()";//call the JS function
this.Controls.Add(btn);
}



Method 2:
Using StringBuilder:

protected override void Render(HtmlTextWriter writer)
{
btnclk.RenderControl(writer);
}
Button btnclk;
protected override void CreateChildControls()
{
//base.CreateChildControls();
btnclk = new Button();
btnclk.ID = "btnclk";
StringBuilder strscript = new StringBuilder();
strscript.Append("alert('hello world'); return false;");
btnclk .Attributes .Add ("onclick",strscript .ToString ());
}

Method 3:
Including “ < script> ” tags in writer.write in Render Method:
protected override void Render(HtmlTextWriter writer)
{
writer.Write("< script >");
writer.Write("function helloworld(){ alert('hello world'); return false;}");
writer.Write("</script >");
btnclk1.RenderControl(writer);

}
Button btnclk1;
protected override void CreateChildControls()
{
btnclk1 = new Button();
btnclk1.ID = "btnclk1";
btnclk1.Attributes.Add("onclick", "helloworld();");
}


2) Linking a script file to webpart:
//JS file name : hello.js

function hello()
{
alert('hello this is external script alert');
}

We need to place this js file in this path :

C:\Program Files\Common Files\Microsoft Shared\web server extensions\wpresources\EmployeeWebpart\1.0.0.0_91f29f0c96ff744c

EmployeeWebpart-----folder with webpart name
1.0.0.0_91f29f0c96ff744c---folder with version_public key token



// Referring External Javascript in Createchild controls method

ClientScriptManager cs = Page.ClientScript;
// Include the required javascript file.
if (!cs.IsClientScriptIncludeRegistered("hello"))
cs.RegisterClientScriptInclude(this.GetType(), "hello", "/_wpresources/EmployeeWebpart/1.0.0.0_91f29f0c96ff744c/hello.js");

//Test:
Testbutton = new Button();
Testbutton.Text = "Click me";
Testbutton.OnClientClick = "hello()"; // specify function name here