Ajax Asp.Net examples

This asp.net tutorial, we will discuss on Ajax asp.net examples and below things:

  • How to use Ajax in Asp.Net
  • How to Install AjaxControlToolkit through Nuget in Asp.Net
  • How to Add ajaxcontroltoolkit to Visual Studio
  • Only one instance of a ScriptManager can be added to the page in Ajax
  • unable to get property ‘ui’ of undefined or null reference ajaxcontroltoolkit
  • JavaScript runtime error: Unable to get property ‘parentNode’ of undefined or null reference ajaxcontroltoolkit
  • AjaxControlToolkit error: javascript runtime error unable to get property ‘ui’ of undefined or null reference ajax
  • Could not load file or assembly ‘AjaxMin, Version=4.97.4951.28478, Culture=neutral, PublicKeyToken=21ef50ce11b5d80f’ or one of its dependencies
  • SharePoint AJAX Toolkit
  • type is undefined scriptresource axd in AjaxControllToolkit
  • What is the role of ScriptManager in Ajax?
  • Ajax updatepanel example
  • Ajax interview questions

Ajax in Asp.Net

Now, let us check, how to use AJAX in our Asp.Net application. In Asp.Net 4.0 AJAX is inbuilt, we do not need to install anything for AJAX.

To use AJAX in our Asp.Net application, we need to use a ScriptManager on the page. There is no need to use more than one Scriptmanager on the page. Only one script manager is necessary. And the ScriptManager need to put inside the form tag.

If we are using a master page in the application then we need to put the ScriptManager in Master Page and there is absolutely no need to put any SciptManager in the content pages.

Here is the code for this:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MainMaster.master.cs" Inherits="MainMaster" EnableViewState="true" %>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN" “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>This is the page title</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</form>
</body>
</html>

UpdatePanel

To do partial page refreshing we need to use one UpdatePanel in the section. But we can not put any control directly inside the UpdatePanel.

To put any control inside the update panel we have to use the ContentTemplate tag. But if we want to show progressbar or processing type of things, then we have to use an UpdateProgress template. Like below:

<asp:UpdateProgress AssociatedUpdatePanelID="UpdatePanel1" ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Processing… Please Wait…
</ProgressTemplate>
</asp:UpdateProgress>

Here AssociatedUpdatePanelID is important because, we need to give the updatepanel id for which we want to show this message.

Below is the full code:

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:UpdateProgress AssociatedUpdatePanelID="UpdatePanel1" ID="UpdateProgress1" runat="server">
<ProgressTemplate>
Processing… Please wait…
</ProgressTemplate>
</asp:UpdateProgress>
</ContentTemplate>
</asp:UpdatePanel>

Install AjaxControlToolkit through Nuget in Asp.Net

Now, we will see how to install AjaxControlToolkit through NuGet. We can install AjaxControlToolkit through Nuget Package Manager Console as well as through the Manage NuGet Packages dialog.

Install through Nuget Package Manager Console:
For this Go to Tools -> Library Package Manager -> Then click on Package Manager Console as shown in the fig below:

install AjaxControlToolkit through Nuget in Asp.Net

This will open the Package Manager Console, there type Install-Package AjaxControlToolkit and click on Enter as shown in the fig below:

install AjaxControlToolkit Nuget in Asp.Net

Install through Manage NuGet Packages dialog:

For this go to WebSite -> Manage NuGet Packages…

This will open the dialog box, Search in the dialog box for AjaxControlToolkt and once found click on Install as shown in the fig below:

install AjaxControlToolkit in Asp.Net

Add ajaxcontroltoolkit to Visual Studio

Now, we will see how to add AjaxControlToolKit to visual studio.

To add AjaxControlToolKit to the Toolbox, first, download the correct version of AjaxControlToolkit from this URL and then extract the folder and store somewhere in any derive.

Then Right click on the Toolbox below to all controls and Click on Add Tab as shown in the figure below:

Add ajaxcontroltoolkit to Visual Studio

Then you can give a name to it like: Ajax Control Toolkit. Then Right click on that and click on Choose Items as shown in the fig below:

Add ajaxcontroltoolkit to Visual Studio 2012

Then browse to the AjaxControlToolkit.dll which you have downloaded and extracted before. Then click on Ok, After this, all the Ajax Extender controls will be available under the Tab. Check the fig below all the extender controls will appear like below:

Add ajaxcontroltoolkit to Visual Studio 2013

This is how we can add ajaxcontroltoolkit to Visual Studio 2012/2013.

Only one instance of a ScriptManager can be added to the page in Ajax

Recently while working with the Ajax control toolkit, I faced the below error message. Only one instance of a ScriptManager can be added to the page.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.
Exception Details: System.InvalidOperationException: Only one instance of a ScriptManager can be added to the page.

Source Error:
An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.

Reason:
There should be one Script manager in a page.

Solution:
Actually, I put one Script manager in the master page and while adding Ajax Control Toolkit I added another script manager in the page itself.

<asp:ScriptManager ID="ScriptManager1″ runat="server"></asp:ScriptManager>
<asp:ToolkitScriptManager ID="ToolkitScriptManager1″ runat="Server" />

So the above error came. The solution is I remove one script manager from the page.

unable to get property ‘ui’ of undefined or null reference ajaxcontroltoolkit

Now, we will see how to fix error message unable to get property ‘ui’ of undefined or null reference ajaxcontroltoolkit which comes while working with the Ajax Control Toolkit.

The full error message was:
unable to get property ‘ui’ of undefined or null reference ajaxcontroltoolkit
Unhandled exception at line 67, column 35 in http://localhost:37487/Default5.aspx
0x800a138f – JavaScript runtime error: Unable to get property ‘UI’ of undefined or null reference

Solution:
We need to register AjaxToolKit perfectly. You can write like below, you can register like below:

<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>

And then put the below line inside the <form> tag.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>

Now the error will not come.

JavaScript runtime error: Unable to get property ‘parentNode’ of undefined or null reference ajaxcontroltoolkit

Recently while working with Ajax ModalPopupExtender control, I got the below error: “JavaScript runtime error: Unable to get property ‘parentNode’ of undefined or null reference”.

I was showing the ModalPopupExtender from the code behind file on a button click like below:

protected void btnClick_Click(object sender, EventArgs e)
{
this.ModalPopupExtender1.Show();
pnlPopupMsg.Visible = true;
}

And my panel code was like below:

<asp:Panel ID="pnlPopupMsg" runat="server" CssClass="modalPopup"  Visible="false">
<asp:Label ID="lblMessage" runat="server" Text="Here is the message which will come!!!"></asp:Label><br />
<br />
<asp:Button ID="btnYes" runat="server" Text="Yes" OnClick="btnYes_Click" />
<asp:Button ID="btnNo" runat="server" Text="NO" OnClick="btnNo_Click" />
</asp:Panel>

Here the problem was the Visible=”false” attribute of the Panel.

I removed the Visible=”false” attribute from the Panel and it started working.

AjaxControlToolkit error: javascript runtime error unable to get property ‘ui’ of undefined or null reference ajax

Now we will see how to fix error AjaxControlToolkit error javascript runtime error unable to get property ‘ui’ of undefined or null reference ajax.

In my project, I was using an Ajax Calendar extender control to show date. But the error was coming. I have registered the AjaxControlToolkit properly in the page like below:

<%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>

But still, the error was coming.

I was using a script manager in the master page. I was using the script manager like below:

<asp:ScriptManager ID="ScriptManager1″ runat="server"></asp:ScriptManager>

So the solution is instead of using the asp script manager use AjaxControlkit script manager like below:

<%@ Register TagPrefix="ajaxToolkit" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit" %>
<ajaxToolkit:ToolkitScriptManager runat="server" ID="sm1"/>

This is how we can fix AjaxControlToolkit error: javascript runtime error unable to get property ‘ui’ of undefined or null reference ajax.

Could not load file or assembly ‘AjaxMin, Version=4.97.4951.28478, Culture=neutral, PublicKeyToken=21ef50ce11b5d80f’ or one of its dependencies

Now we will see how to fix error, Could not load file or assembly ‘AjaxMin, Version=4.97.4951.28478, Culture=neutral, PublicKeyToken=21ef50ce11b5d80f’ or one of its dependencies. The system cannot find the file specified.

Description: An unhandled exception occurred during the execution of the current web request. Please review the stack trace for more information about the error and where it originated in the code.

Exception Details: System.IO.FileNotFoundException: Could not load file or assembly ‘AjaxMin, Version=4.97.4951.28478, Culture=neutral, PublicKeyToken=21ef50ce11b5d80f’ or one of its dependencies. The system cannot find the file specified.

Source Error:
An unhandled exception was generated during the execution of the current web request. Information regarding the origin and location of the exception can be identified using the exception stack trace below.
Assembly Load Trace: The following information can be helpful to determine why the assembly ‘AjaxMin, Version=4.97.4951.28478, Culture=neutral, PublicKeyToken=21ef50ce11b5d80f’ could not be loaded.

When you will download the AjaxControlToolkit, then you will find a dll as: AjaxMin.dll. You need to refer this dll, along with AjaxControlToolkit.dll.

SharePoint AJAX Toolkit

Now we will discuss how to use Ajax toolkit in SharePoint.

The SharePoint AJAX Toolkit is a developer framework for writing AJAX code for WSS and Microsoft Office SharePoint Server (MOSS) by using the ASP.NET AJAX Library.

It includes a core script library for client-side data loading and XSLT transformations, base Web Part classes targeted for AJAX code, and a Solution Package installer that registers the required elements in web.config.

The SharePoint AJAX Toolkit takes a purist approach to AJAX development and ASP.NET- HTML elements and JavaScript components are used to program against XML data sources by using XSLT transforms and Web service endpoints.

This separates development projects into two categories

  • API-related components, including XML data streams and Web service endpoints.
  • user interface–related elements built with JavaScript and XSLT and deployed in Web Parts.

The core Toolkit consists of two primary JavaScript files that form a library of WSS-friendly JavaScript functionality. The first file defines SharePoint.

Ajax JavaScript namespace and includes the utility functions used for everyday tasks. Primarily, these include data-loading functions and cross-browser XSLT transform code. Data loading in the Toolkit happens primarily with the SharePoint.Ajax.DataLoader method, which loads data from a given URL and performs a delegate callback upon completion by utilizing the Sys.Net.WebRequest object internally.

SharePoint.Ajax.DataLoader(url,’set_Xml’,this)

SharePoint.Ajax.XmlComponent JavaScript Class

Name Description

element Defines the HTML element to which the behavior is added

  • LoadXml(xmlUrl) Loads XML data specified by the xmlUrl parameter
  • LoadXsl(xmlUrl) Loads XSL data specified by the xmlUrl parameter
  • set_Xml(XMLDOM) Sets the manually loaded XMLDOM to the XML data source
  • set_Xsl(XMLDOM) Sets the manually loaded XSLT style sheet
  • Render() Redraws the component; automatically called when both the XML and XSL data sources are loaded
  • set_Refresh(Number) Sets the refresh interval in milliseconds

Connection Specifies the ID of the optionally connected component

Within a Web Part, we create the XmlComponent instance based on a placeholder that is rendered in the RenderContents method.

The XML Web Part in the SharePoint AJAX Toolkit handles this for you in the Web Part’s RenderContents method and serves as a pattern for custom AJAX Web Parts.

The toolkit’s XmlWebPart class is a basic Web Part wrapper of a JavaScript XmlComponent that can serve as a base class for custom AJAX Web Parts using Xml data loads and transforms. This makes it easy to create a dynamic user interface by using SharePoint.Ajax.WebParts.XmlWebPart, writing some simple JavaScript functions and providing XSLT for rendering logic.

type is undefined scriptresource axd in AjaxControllToolkit

Now, we will see how to fix AjaxControlToolkit error type is undefined scriptresource axd.

This error usually comes in Asp.Net 4.0 with IIS 7 or IIS 7.5

Add the below tag in web.config file and the error should not come.

<system.webServer>
<handlers>
<add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35″ />
</handlers>
</system.webServer>

This is how we can fix error type is undefined scriptresource axd in AjaxControllToolkit.

What is the role of ScriptManager in Ajax?

Now we will see the role of ScriptManager in Ajax?

ScriptManager class is the heart of ASP.NET Ajax. ScriptManager is class and a control (both) in Ajax. The ScriptManager class in ASP.NET manages Ajax Script Libraries, partial page rendering functionality and client proxy class generation for web applications and services. By saying client proxy class, this means an instance of the Ajax runtime is created on the browser.

This class is defined in the System.Web.Extensions.dll. You will find this DLL in your system’s Global Assembly Cache at C:\Windows\Assembly (For XP)

The ScriptManager control is actually an instance of the ScriptManager class that we put on a web page. The ScriptManager manages all the ASP.NET Ajax controls on a web page. Following tasks are taken care of by the ScriptManager class:

  • Managing all resources (all objects/controls) on a web page
  • Managing partial page updates
  • Download Ajax Script Library to the client.
  • Interacting with UpdatePanel Control, UpdateProgress Control.
  • Register script (using RegisterClientScriptBlock)
  • Information whether Release OR Debug script is sent to the browser
  • Providing access to Web service methods from the script by registering Web services with the ScriptManager control
  • Enable culture-specific display of client-side script.
  • Register server controls that implement IExtenderControl and IScriptControl interfaces.
  • ScriptManager class EnablePartialRendering property is true by default.

Ajax updatepanel example

Normally we use updatepanel for partial page refreshing, means the code within that panel will not postback. Microsoft provides AJAX which helps us in doing so.

For this, our .aspx page should contain one ScriptManager and can contain more than one updatepanel control. The code that we put inside the updatepanel will not do postback on click event. UpdatePanel and ScriptManager are available in Toolbox under AJAX Extensions section.

Remember we need to put the scriptmanager control inside the form tag.

Below is the full HTML code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxUpdatePanel.aspx.cs" Inherits="AjaxUpdatePanel" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax updatepanel example in asp.net</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnAjaxNoRefresh" runat="server" Text="Click for no refresh !" OnClick="btnAjaxNoRefresh_Click" />
</ContentTemplate>
</asp:UpdatePanel>
<div>
</div>
</form>
</body>
</html>

Ajax interview questions

Below are a few Ajax interview questions which will be helpful to prepare for interviews.

  • What is Ajax?
  • How do we use XMLHttpRequest object in JavaScript?
  • How to use AJAX in Asp.Net?
  • What is the work of Scriptmanager control in AJAX?
  • What is the use of an update panel in Ajax?
  • What is the work of triggers in UpdatePanel control?
  • How can you do validations in Ajax?
  • How do we do exception handling in Ajax?
  • What is the Full form of JSON? And What exactly does this JSON do?
  • What are extender controls and how can we use extender controls in Asp.Net?
  • Can we put multiple scriptmanager control in a page?
  • Can we put multiple updatepanel control on a page?
  • How can we put ScriptManager control on master page?
  • What is the difference between synchronous postback and asynchronous postback?
  • What are the new features of ASP.NET AJAX 4.0?
  • What is the role of a ScriptManagerProxy?
  • Can we nest the UpdatePanel controls?

You may like following Asp.Net tutorials:

Here we learned below things:

  • How to use Ajax in Asp.Net
  • How to Install AjaxControlToolkit through Nuget in Asp.Net
  • How to Add ajaxcontroltoolkit to Visual Studio
  • Only one instance of a ScriptManager can be added to the page in Ajax
  • unable to get property ‘ui’ of undefined or null reference ajaxcontroltoolkit
  • JavaScript runtime error: Unable to get property ‘parentNode’ of undefined or null reference ajaxcontroltoolkit
  • AjaxControlToolkit error: javascript runtime error unable to get property ‘ui’ of undefined or null reference ajax
  • Could not load file or assembly ‘AjaxMin, Version=4.97.4951.28478, Culture=neutral, PublicKeyToken=21ef50ce11b5d80f’ or one of its dependencies
  • SharePoint AJAX Toolkit
  • type is undefined scriptresource axd in AjaxControllToolkit
  • What is the role of ScriptManager in Ajax?
  • Ajax updatepanel example
  • Ajax interview questions
Donwload Hub site pdf

Download SharePoint Online Tutorial PDF FREE!

Get update on Webinars, video tutorials, training courses etc.

>