In the last years I used the integration between Server Code and Client Code with the aid of XMLHttp ActiveX.
From my ASPX or HTML page, with JavaScript, I created the XMLHttp object and, usually, I called an ASMX file. An example of this use is the bound of many dropdownlist without call a Post Back of the page. Another example is an asynchronous treeview. When you expand a node you can call a Web Service method that return, in his values, an XML that you can draw under the node father.
This method run correctly and I’ve many applications, today on line, that use it. But there are also some problems: a difficult debug, with the integration between C# server code and JavaScript, and – in many case – a difficult maintenance of code.
Today we can do it with Ajax (Asynchronous JavaScript and Xml). There are many solutions to write the code: in the web you can find many JavaScript framework that run with JSon or Xml.
Developing my project I not found, anyway, a solution that satisfied me.
Finally I found a solution that has a simple code to write and an easy debug: it’s also cross browser J
And now… some code please!!
You need download the Ajax.dll, wrote by M. Schwarz, HERE.
Then you can create a simple Web Application (in this example I use C#).
After created the project you can put in the Project Reference the Ajax.dll.
And, finally, the last configuration step. In the <system.web> node of your web.config you need paste this code:
<system.web>
<httpHandlers>
<add verb=“POST,GET“ path=“ajax/*.ashx“ type=“Ajax.PageHandlerFactory, Ajax“ />
</httpHandlers>
OK! Here we are, and we can start with real code.
In this example we will create two Ajax methods, a void and a function.
The void is called setValue and memorizes in a session the value of a string, passed by the JavaScript code.
If you want “see” the method also in the JavaScript code you need describe the method like an Ajax method. For to do it add this code before your method:
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.ReadWrite)]
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.ReadWrite)]
public static void setValue(string MyValue, string SessionName)
{
HttpContext.Current.Session[SessionName] = MyValue;
}
Now, we can write the method that read this session and for do it we need create a function. We need add the type of the method like the void for tell to the system that this is an Ajax method. Then, like a usual function, we read the Session and then, after tested it, we return the value.
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.ReadWrite)]
public static string getValue(string SessionName)
{
if (HttpContext.Current.Session[SessionName] != null)
{
return HttpContext.Current.Session[SessionName].ToString();
}
else
{
return “No value for the request session”;
}
}
Now, we can write the code in the aspx page. Before everything we need register type for Ajax and the code to do this is very very simple.
In the pageLoad of you page paste this code.
Ajax.Utility.RegisterTypeForAjax(typeof(Code.AjaxSample));
Where Code.AjaxSample is the type of your Class.
If, for example, you use a big application with many application layers, probably you’ll have a DLL for Business Logic, another with CustomControl ecc… With this method you can put your Ajax code in external dll without problem.
In the C# code we described the methods like Ajax method; so, now, you see them in you JavaScript Code.
Both the methods were STATIC method, so we don’t need create any object, but just invoke it.
<!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>Untitled Page</title>
<script language=”javascript”>
function setClientMethod()
{
var _strValue = document.getElementById(“string1″).value;
var _strSessName = document.getElementById(“string2″).value;
AjaxSample.setValue(_strValue, _strSessName);
alert(“Session saved!!”);
}
function getClientMethod()
{
var _strSessName = document.getElementById(“string2″).value;
var _rslt = AjaxSample.getValue( _strSessName);
if(_rslt != null)
{
document.getElementById(“RSLT”).innerHTML = _rslt.value;
}
}
</script>
</head>
<body>
<form id=”form1″ runat=”server”>
<div>
String Value<input type=”text” id=”string1″ /> – Session Name<input type=”text” id=”string2″ /> <input type=”button” onclick=”setClientMethod();” value=”GO!!!”/>
<input type=”button” onclick=”getClientMethod();” value=”READ VALUES!!!”/>
<br />
Results: <div id=”RSLT” style=”float:left”></div>
</div>
</form>
</body>
</html>
In our page we have 2 textbox and a first button. The button GO!!! Call a JavaScript function that invoke the method of C# code. If you set a breakpoint in your C# code and you run the project you will see that, in the server side, you received the values of the client side!
With the READ VALUES button you call your server and you read the HttpContext Session Value. You can also, clearly, read a database, download data from a server etc…
With this method you can do many solutions for your projects. It’s very simple debug the code and also you can put the “important” code in a DLL and not in a JavaScript code.
You can download the article in Microsoft Word here: Using Ajax and .NET
You can also download the source project with example here
I pilastri della Terra.
