Custom Javascript Ajax for ASP.NET

Question

I've written some basic Javascript functions and would like to learn how to enable asynchronous postbacks within a C# 4.0/ASP.net project using this JS code.

For example, I have a script that increments a number when clicked. When clicked again, the number is decremented. I basically load the number from a database, then hide one <span> and show another with the corresponding decremented number on click. This is not complicated javascript; its a simple example. Now when I click the button I want to send this increment/decrement call back to the server to update the database's number.

I realize that I can accomplish something akin to this example using the AJAX Control Toolkit's toggle button. I, however, want to know how to use my OWN javascript to create AJAX functionality.

How do I accomplish this using C# and my custom Javascript code?

I'm not opposed to using the ASP.net AJAX library, I just don't want to use a ready built control. I want to learn the process of creating my own AJAX functionality. I would presume that I will have to use an asp:UpdatePanel, but I don't know how to call C# functions from the client side.

My javascript is not jQuery, in fact I want nothing to do with jQuery until I learn more about javascript and this process.

Honestly javascript is pretty much a dead language that has been replaced by jQuery. — Chris Marisic
– Chris Marisic, Commented Aug 24, 2010 at 16:29
+1 for wanting to understand what's really happening under the hood. — David Hoerster
– David Hoerster, Commented Aug 24, 2010 at 17:05
jQuery is what javascript should have been originally, prior to jQuery it was a completely inferior language. And @fear your analogy is backwards, your statement should be more along the lines has IL been replaced by C# (or .NET)? And the answer would be yes, yes it has. You can write IL directly if you want but have fun with that. — Chris Marisic
– Chris Marisic, Commented Aug 26, 2010 at 12:20

Corbin March · Accepted Answer · 2010-09-02 17:23:51Z

Simple with no UpdatePanel:

First, add a Generic Handler to your project (.ashx). This will act as our Http endpoint. Our javascript will call it. We could (and probably should), use a web service endpoint but that requires processing the response and complicates the example. A handler returns plain text.

<%@ WebHandler Language="C#" Class="Handler" %>

using System;
using System.Web;

public class Handler : IHttpHandler
{
    // We'll use a static var as our "database".
    // Feel free to add real database calls to the increment
    // and decrement actions below.
    static int TheNumber = 0;

    public void ProcessRequest(HttpContext context)
    {       
        string action = context.Request.QueryString["action"];
        if (!string.IsNullOrEmpty(action))
        {
            if (action == "increment")
                TheNumber++;   //database update and fetch goes here
            else if (action == "decrement")
                TheNumber--;   //database update and fetch goes here           
        }
        context.Response.ContentType = "text/plain";
        context.Response.Write(TheNumber);
    }

    public bool IsReusable { get { return false; } }
}

Next, create your web page and add the async javascript.

<%@ Page Language="C#"%>
<html>
<head runat="server">    
    <script type="text/javascript">
    // An XMLHttpRequest object is required to make HTTP requests.
    // Try a couple instantiation strategies to handle different
    // browser implementations.
    function createXMLHttpRequest() {
        try { return new XMLHttpRequest(); } catch (e) { }
        try { return new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { }
        try { return new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { }
        alert("XMLHttpRequest not supported");
        return null;
    }

    function callHandler(action) {
        var xmlHttpReq = createXMLHttpRequest();
        // We're interested in an asychronous request so we define a 
        // callback function to be called when the request is complete.
        xmlHttpReq.onreadystatechange = function () {
            if (xmlHttpReq.readyState == 4 && xmlHttpReq.status == 200)
                document.getElementById("<%= lbl.ClientID%>").innerHTML 
                    = xmlHttpReq.responseText;
        }
        xmlHttpReq.open("GET", "Handler.ashx?action=" + action, true);
        xmlHttpReq.send(null);
    }  
    </script>
</head>
<body>
    <form id="Form1" runat="server">
    <div>
    The Number:&nbsp;<Label runat="server" id="lbl">0</Label>
    </div>
    <div>
        <asp:Button ID="Button1" runat="server" Text="Increment" 
            OnClientClick="callHandler('increment');return false;" />
        &nbsp;
        <asp:Button ID="Button2" runat="server" Text="Decrement" 
            OnClientClick="callHandler('decrement');return false;" />
    </div>
    </form>
</body>
</html>

The final flow is:

A web page user clicks the Increment or Decrement button which calls our javascript
Our javascript sends a request with the desired action in the querystring to Handler.ashx
Handler.ashx reads the querystring, increments or decrements its static variable, and returns the value
Our callback receives the value and updates our UI.

fearofawhackplanet · Accepted Answer · 2010-08-24 16:41:32Z

0

if your using an UpdatePanel it's very simple with a JavaScript call to __doPostBack. See here for example.

answered Aug 24, 2010 at 16:41

fearofawhackplanet

53.6k55 gold badges167 silver badges258 bronze badges

2 Comments

Dave Over a year ago

Question states that he doesn't want to use a ready built control. BTW JQuery is a library built using JavaScript. Javascript LIVES!

fearofawhackplanet Over a year ago

question also explicitly states he doesn't mind using an update panel. and where exactly did i even mention jquery in my answer? just FYI, since you're obviously retarded, neither __doPostBack nor UpdatePanel have anything whatsoever to do with jQuery. The level of retardedness reaches a new low every time I visit this site.

Dave · Accepted Answer · 2010-08-24 17:10:24Z

0

Have a look at this tutorial around AJAX http://www.w3schools.com/Ajax/Default.Asp

It will give you an overview of using Javascript to GET and POST data using AJAX.

Hope this helps.

answered Aug 24, 2010 at 17:10

Dave

2,5625 gold badges25 silver badges30 bronze badges

Comments

Gary · Accepted Answer · 2010-08-24 17:35:01Z

Here's a link on how you can incorporate ASP.NET C# with your custom Javascript code.

http://msdn.microsoft.com/en-us/library/bb386450.aspx

It also contains a sample VS 2010 project here: http://go.microsoft.com/fwlink/?LinkId=185646

Here's generally what's going on here:

In the AjaxIScriptControl solution:

SampleTextBox.cs - takes care of rendering the script control on the page; and attachment to client javascript code (the js file)

SampleTextBox.js - takes care of client side functionality and generates Javascript object of control via prototype

Notes:

This example leverages existing ASP.NET's built-in control (you notice SampleTextBox inherits Textbox and IScriptControl) but you can render any type of HTML control if you inherit ScriptControl class instead.
This solution also chose to separated the Script control code and website code in two projects but you can easily make it into one.
You can easily leverage another Javascript library in your JS file

In my experience so far, this is the one of the more elegant way to incorporate server side code with client side if you are to create re-useable controls for your website. You leverage server side power to do the initial rendering while provide client side capabilities through Javascript.

David Hoerster · Accepted Answer · 2010-08-24 17:56:23Z

If you create your C# functions as WCF REST Services or older-style Script Services, then you can easily call your service methods from your JavaScript using a basic XmlHttpRequest (no jQuery or UpdatePanels needed).

Here's a quick jsFiddle I put together: http://jsfiddle.net/ndVeS/

This sample has two text boxes; you enter a value in the first one, click the button, and then that value is passed to a service (an echo service) and returned in the callback. The JavaScript code takes that value and populates the second textbox with it.

You could define a C# WCF RESTful service like this:

[ServiceContract]
public class EchoService : IEchoService {
  [WebGet(UriTemplate="EchoMe?val={theValue}, ResponseFormat=WebMessageFormat.Json)]
  public string EchoMe(string theValue) {
    return theValue;
  }
}

If you handle your calls this way, you can separate out your service logic from your presentation (ASPX files), and this allows for easier testing and you can also separate responsibilities from those who build the UI from those that build the business functionality.

I have to admit I'm more of a jQuery person when it comes to this, but I thought it's a great exercise to figure out how the XmlHttpRequest works under the hood. It makes you appreciate what jQuery (or similar framework) provides.

Here's a nice overview of the XmlHttpRequest object and how to use it: http://www.jibbering.com/2002/4/httprequest.html

I hope this helps.

Sameer Joshi · Accepted Answer · 2010-08-26 10:28:19Z

function GetXmlHttpObject(handler) {
var objXMLHttp = null
if (window.XMLHttpRequest) {
    objXMLHttp = new XMLHttpRequest()
}
else if (window.ActiveXObject) {
    objXMLHttp = new ActiveXObject("Microsoft.XMLHTTP")
}
return objXMLHttp;

}

function GetDropDown() {

function stateChanged(StatesUpdated) {


    if (xmlHttp.readyState == 4 || xmlHttp.readyState == "complete") {
        document.getElementById('updateplace').innerHTML = xmlHttp.responseText;
        //"updateplace" is you div id which will hold the new data or new page
        if (navigator.appName != "Microsoft Internet Explorer") {

        }
    }
    else {
        //alert(xmlHttp.status);
    }
}





xmlHttp = GetXmlHttpObject()
if (xmlHttp == null) {
    alert("Browser does not support HTTP Request");
    return;
}



    url = "xyz.aspx" //this might be sent to any post data
    url = url + "&sid=" + Math.random();


    xmlHttp.onreadystatechange = stateChanged;

    xmlHttp.open("GET", url, true);

    xmlHttp.send(null);

}

with the above code you can send data to any .cs file also where you can change the data and load it in a new page which will load in the update div and the method should redirect to the new aspx file.

I hope you got the logic :)

if you have any doubts reach me @ [email protected]

Mad Halfling · Accepted Answer · 2010-08-31 09:36:56Z

0

I know it's not MVC that you're doing, but have a look at the MVC section of the ASP.NET site and you will find a lot of examples of AJAX calls there - MVC doesn't use those dreadful script-soup creating .NET objects. Most will probably be using jQuery - this is an open-source javascript library that can plug into any web app and provides some really nice functionality.

answered Aug 31, 2010 at 9:36

Mad Halfling

9683 gold badges20 silver badges36 bronze badges

Comments

PaloNikolas · Accepted Answer · 2010-08-31 14:39:08Z

-1

Maybe u r looking for this:

function ajaxscript(){ $.ajax({ type: "POST", url: |url/methodName|, data: |variable_name|, contentType: "application/json; charset=utf-8", dataType: "json", success: |some javascript here|, error: |some javascript here| });

answered Aug 31, 2010 at 14:39

PaloNikolas

112 bronze badges

1 Comment

Slobaum Over a year ago

Code should be formatted as such, and you don't bother to mention that this isn't native code... you're using a library (jQuery, I'm pretty sure). I realize that jQuery has become largely synonymous with Javascript (see comments above), but there IS a distinction.

Collectives™ on Stack Overflow

Custom Javascript Ajax for ASP.NET

8 Answers 8

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

Comments

2 Comments

Comments

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related