Calling JavaScript Function From SharePoint Visual WebPart

In this blog, you will learn about calling the JavaScript function from SharePoint Visual WebPart.

Introduction

SharePoint Web parts can modify the content, appearance, and behavior of pages of a SharePoint site, by using a browser. Web parts are server-side controls that run inside a web part page. They are the building blocks of pages that appear on a SharePoint site. In this article, you will learn how to call the JavaScript function from SharePoint Visual WebPart.

Pre-process

1. Create or open a SharePoint project.
2. Choose the SharePoint project node in Solution Explorer and then choose Project --> Add New Item.
3. In the Add New Item dialog box, expand the SharePoint node.
4. In the list of SharePoint templates, choose Visual Web Part.
5. In the Name box, specify a name for the web part, and click the Add button.
6. The web part appears in Solution Explorer.
7. In Solution Explorer, open the code file for the web part that you just created.

Calling the JavaScript function from WebPart

The following section explains the flow of calling the JavaScript function from webpart.cs file.

1. Create one JavaScript file and add function JavaScriptFunctionName().
   

   function JavaScriptFunctionName()
   {
       alert('Hello World");
       }

2. Give the link of this JavaScript file in webpart.ascx file, as shown below.
   

   <script src="/Style Library/scripts/TestScript.js" type="text/javascript"></script>

3. Place the button control in Webpart.ascx file.
   

   <button type="button" id="btnSearch" runat="server" nserverclick="btnSearch_ServerClick">Search</button>

4. Write the code-behind function in Webpart.cs file.
   

   protected void btnSearch_ServerClick(object sender, EventArgs e)

5. Upon clicking the Search button, the above function btnSearch_ServerClick will be called.
6. We need to call the RegisterStartupScript method of Page.ClientScript object inside the above function. In this function, we need to give the parameters mentioned below.
   
   
   • Type of function as this.GetType().
   • Unique keyword for function.
   • JavaScript for function call.
   • Boolean value to add script tag or not.

   Page.ClientScript.RegisterStartupScript(this.GetType(), "functioncallKey", "<script type='text/javascript' >JavaScriptFunctionName();</script>", false);

7. The above code will call the JavaScriptFunctionName() function inside the JS file.

Call JavaScript function from UpdatePannel of WebPart

The above method would not work when the button is placed inside the ASP UpdatePannel. So, we need to change the above function of calling the JavaScript function.

1. Place the button control under the UpdatePannel in Webpart.ascx file.
   

   <asp:UpdatePanel ID="UpdatePanel3" runat="server" UpdateMode="Always">
       <ContentTemplate> <button type="button" id="btnSearch" runat="server" serverclick="btnSearch_ServerClick">Search</button> </ContentTemplate>
       <Triggers>
           <asp:AsyncPostBackTrigger ControlID="btnSearch" EventName="serverclick"></asp:AsyncPostBackTrigger>
       </Triggers>
   </asp:UpdatePanel>

2. Write the code-behind function in Webpart.cs file.
   

   protected void btnSearch_ServerClick(object sender, EventArgs e)

3. On click of Search button, the above function btnSearch_ServerClick will be called.
   
   
4. We need to call the RegisterClientScriptBlock method of ScriptManager object inside the above function. In this function, we need to give the parameters, as shown below.
   
   
   • Control to the function.
   • Type of function as this.GetType().
   • Unique keyword for function.
   • JavaScript for function call.
   • Boolean value to add script tag or not.
     

   ScriptManager.RegisterClientScriptBlock((sender as Control), this.GetType(), "functioncallKey","JavaScriptFunctionName()", true);

5. Above code will call the JavaScriptFunctionName() function inside the JS file.

Summary: Thus, you have learned how to call a JavaScript function from SharePoint Visual WebPart.