Tag Archives: EnablePageMethods

Traditional Ajax With Asp .Net And Modern PageMethods Approach

Traditional Ajax Method With Asp.Net

Basicaly, we use XMLHttpRequest client side class to use ajax functionality. The use of bare XMLHttpRequest is a traditional way to accomplish asynchronous process.

This XMLHttpRequest class implementation is written in JScript or VbScript client script and usually it is being used by Asp Classic but Asp .Net can use it and so other open source code language.
To make an async process using XMLHttpRequest we can use client side development only.

Although the traditional way is not die and still a good option rather than not to use the asynx process but when we are using Asp .Net to do ajax it is recomended to use a modern approaches.
This modern approach is using Asp.Net Ajax Extension. It includes both server and client side development. I use PageMethods in this post to be specific. In fact, a lot of option of using Asp.Net Ajax.
However we need to know how to implement or code with XMLHttpRequest and so we can compare it with modern (Asp.Net Ajax) method.

XMLHttpRequest Example

I use Asp.Net file to show you how to use traditional ajax.

.aspx file:

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script language="javascript" type="text/javascript">
         
        function httprequest() {
            
            if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp = new XMLHttpRequest();
            }
            else {// code for IE6, IE5
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                    var response = xmlhttp.responseText;
                    document.getElementById("response").innerHTML = response;

                }
            }
            xmlhttp.open("GET", "somehtml.htm", true);
            document.getElementById("response").innerHTML = "Loading..";
            window.setTimeout("xmlhttp.send()", 1000);
        }
    </script>
</head>
<body onload="httprequest()">
    <form id="form1" runat="server">
    <div id="response"></div>
    </form>
</body>
</html>

Continue reading

Starting & Aborting/Cancelling Asp .Net Ajax Request Techniques

Starting an Ajax request is easy task. We can use ScriptManager, UpdatePanel and UpdateProgress controls but aborting it requires more client script.
Common web example of abort/cancel ajax request has abort() method to XMLHttpRequest. On the other hand Asp .Net has its own way to accomplish this.

Example 1 (Sys.WebForms.PageRequestManager)

  1. Create new Website Application
  2. Add new Webform, Default.aspx:
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script type="text/javascript">
            function aborttask() {
                Sys.WebForms.PageRequestManager.getInstance().abortPostBack();
                alert('Aborted');
            }
        </script>
    </head>
    <body>
        <form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <asp:UpdatePanel ID="updpanel" runat="server">
                <ContentTemplate>
                    <asp:Button ID="btnstart" Text="Start Ajax for 10 seconds" runat="server" /> &nbsp;
                    <asp:Button ID="btnstop" Text="Abort" runat="server" OnClientClick="aborttask()" /><br />
                    <asp:Label ID="msg" runat="server"></asp:Label>
                </ContentTemplate>
            </asp:UpdatePanel>
    
            <asp:UpdateProgress ID="updprog" runat="server" AssociatedUpdatePanelID="updpanel">
                <ProgressTemplate>Sleeping ..</ProgressTemplate>
            </asp:UpdateProgress>
        </div>
        </form>
    </body>
    </html>
    

    Continue reading