Tag Archives: PageMethods

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

Using Asp.Net BackgroundWorker To Create Progress Bar

BackgroundWorker is a component that runs asynchronously as in the background. We need to create and use it along with Ajax to occupy async process.

In the previous post, I already have an example of create a BackgroundWorker example using client script, ASP .Net Ajax BackgroundWorker Example Using Client Script & PageMethods.

In this post, I use System.ComponentModel.BackgroundWorker class to run a background process. Its progress status will be showed in progress bar.
That progress bar is located inside ModalPopupExtender Ajax Control Toolkit. So when backgroundWorker is running no UI activity allowed exept that inside the ModalPopupExtender.

This example only do simple calculation. After calculation is completed the result shows on result div element. Its progress percentage showed as a progress bar.

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