Asp.Net Ajax ScriptManager Control Example [Ajax Tutorial]

Leave a Comment

In order to work with ASP.NET AJAX, an .aspx page must have a ScriptManager tag. Without it ASP.NET AJAX does not work as it provides necessary framework to work with UpdatePanel and other ASP.NET AJAX Server controls.

Some of the frequently used properties 

EnableCdn – used to specify if the page loads the script reference for Ajax from a CDN or from local machine.

EnablePageMethods – used to specify if static page methods from the aspx page can be called from script or not.

EnablePartialRendering – used to specify if partial rendering is enabled or not that let us update partial web page.

<asp:ScriptManager runat="server" ID="ScriptManager1" EnableCdn="true" EnablePageMethods="true"
            EnablePartialRendering="true" />


EnableHistory – used to maintain the browser history during ASP.NET AJAX post back

Demo Example

In below example, you have to create a ScriptManager.aspx page and add below code and run the web application.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ScriptManager.aspx.cs" Inherits="ScriptManager" %>
<!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 id="Head1" runat="server">
    <title>Client Side Event in ASP.NET Ajax</title>
    <script language="javascript" type="text/javascript">
        function pageLoad() {
            var string = '';
            var array = ['Dot', 'Net'];
            Array.add(array, 'Funda');
            for (var i = 0; i < array.length; i++) {
                string += array[i] + ' ';
            }
            alert(string);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        ASP.NET AJAX Demo Page
        <asp:ScriptManager runat="server" ID="SM1" EnableCdn="true" />
        <asp:ScriptManager runat="server" ID="ScriptManager1" EnableCdn="true" EnablePageMethods="true"
            EnablePartialRendering="true" />
    </div>
    </form>
</body>
</html>


0 comments:

Post a Comment