Here we will use simple way to handle images and change images according to user input. This is not exact Ajax, but we can use query string to change the image.

We are going to use generic handlers or .ashx file to display image, and change the image simply changing the query string of the ashx file.

            This article will be a kick start for the creating web based photo album applications.

  We will use Html Image Tag as follows

<img id=”Image1″ src=”Image.ashx?id=1″ onmouseover=”zoomImage(this.src)” height=”210px”                 width=”211px” />

In the source of image, instead of giving image URL we are giving, URL of ashx file.

Our HTML code for form tag is as follows

<form id=”form1″ runat=”server”>

        <table border=”1″>

            <tr>

                <td>

                    <img id=”Image1″ src=”Image.ashx?id=1″ onmouseover=”zoomImage(this.src)” height=”210px”

                        width=”211px” />

                </td>

            </tr>

            <tr>

                <td>

                    <table cellpadding=”0″ cellspacing=”0″ style=”width: 211px; height: 23px”>

                        <tr>

                            <td onclick=”changeImage(-1)” style=”height: 19px”>

                                <—Prev</td>

                            <td style=”height: 19px”>

                                &nbsp;&nbsp;&nbsp;</td>

                            <td onclick=”changeImage(1)” style=”height: 19px”>

                                Next—></td>

                        </tr>

                    </table>

                </td>

            </tr>

        </table>

        <div id=’imageShow’ style=”display: none; width: 391px; height: 270px; left: 314px;

            position: absolute; top: 16px;”>

            <img id=’ifimageShow’ src=”" style=”width: 435px; height: 435px” />

        </div>

        <asp:HiddenField ID=”hdnId” runat=”server” Value=”2″ />

    </form>

In above HTML code , we have one div tag with id “imageShow”, on mouse over event of “Image1” we will display original full size image in this div tag.

Hidden field named “hdnId” is used to maintain the id in query string to ASHX file.

We also have following JavaScript function on main page to change the query string of the image source.

<script language=”javascript”>

function changeImage(id)

{

var hId = parseInt(window.document.getElementById(‘hdnId’).value,0) + id;

window.document.getElementById(‘hdnId’).value = hId;

window.document.getElementById(‘Image1′).src = “Image.ashx?id=” + hId;

}

function zoomImage(src)

{

window.document.getElementById(‘imageShow’).style.display = ”;

window.document.getElementById(‘ifimageShow’).src = src;

}

</script>

At this point our client side code is done.

Now following is our serverside code written in ashx file.

Ashx is a generic handler, we can use it if there is no need to run any server side page event.

using System;

using System.Web;

using System.IO;

using System.Xml;

public class Image : IHttpHandler {

    byte[] imageFileBytes = null;

    string img = string.Empty;

    public void ProcessRequest (HttpContext context)

    {

        context.Response.ContentType = “Application/octet-stream”;

        if (context.Request["id"] != null)

        {

        img = “Images/” + context.Request["id"] + “.jpg”;

        }

        else

        {

            img = “Images/1.jpg”;

        }

        string physicalPath = context.Server.MapPath(img);

        if(File.Exists(physicalPath))

        {

        imageFileBytes = File.ReadAllBytes(physicalPath);

        context.Response.BinaryWrite(imageFileBytes);

            //Write image in binary format over Http.

        }

    }

    public bool IsReusable {

        get {

            return false;

        }

    }

We have to set the contentType for binary stream, since we are writing data as a stream.

This is very simple to implement, we can develop complex image album web application using this logic. One Ashx page will be enough to handle many requests.

This is a very easy way to implement Ajax functionality on the page. 

Page Method works simply as Web Methods

Script Manager Plays critical role for the use of Page Methods, we need to set EnablePageMethods attribute to true.

<asp:ScriptManager ID=”ScriptManager1″ runat=”server”EnablePageMethods=”true” EnablePartialRendering=”true” />

To use webmethod attribute in Aspx page, use namespace

using System.Web.Services

Page Method should be static, as per the design by MS.
So our web method ( Page Method) will be as follows.

[WebMethod]
public static string HelloUser(string userName)
{
return “Hello “ + userName;
}

Now to call above method from client script we need to addPageMethods before the method name

<script>
function callPageMethod(){
alert(PageMethods.HelloUser(“Test User”));
}
<\script>

Many times we need to handle different methods in different way, so in that case we need some special mechanism to handle the response from the server. We may also need to handle method failure errors in some customized way; we can also achieve this by adding extra parameters in PageMethods call.

In short we can add callback methods for successful invocation of pagemethods as well as for the failure of the pagemethod.

function callMethod(userName)
{
PageMethods.HelloUser(userName, OnSucceeded, OnFailed);
}

// On Success callback
function OnSucceeded(result, userContext, methodName)
{
if (methodName == “HelloUser”)
{
alert(result);
}
}

// On failure callback.
function OnFailed(error, userContext, methodName)
{
if(error !== null)
{
alert(error.get_message());
}
}

This article is for those who are new to Ajax. Ajax stands for Asynchronous Java And Xml. Ajax is the great solution for the new age of web applications, it simply helps developer to increase the performance of the site along with the more user interactive UI. Since web page is not getting refreshed each time, it is more users friendly.
The idea is; if page size is 500kb and only 10kb of data is to be updated, then if web application sending and receiving only 10kb data to and from server make more sense, than refreshing whole page. Also the request to server is asynchronously so that user can continue with the work instead of waiting for the response from the server.
It really works fast a very good web experience, in old days of the web development each time user is suppose to wait for the whole page to get refreshed, not a good idea.

Start with AJAX :

                  Ajax actually works because of the XMLHttpRequest object. Using this object web application can communicate with the server, i.e. either web service or the webpage. In this case web service or webpage will send required data to client page and then on client side using Java script corresponding field can be update.

You can create XMLHttpRequest object as follows(Code is in JavaScript):

var request = false

        if (window.XMLHttpRequest) // if Mozilla, Safari etc

            request = new XMLHttpRequest()

        else if (window.ActiveXObject)

           { // if IE

            try {

                 request = new ActiveXObject(“Msxml2.XMLHTTP”)

                }

            catch (e)

                {

                    try

                    {

                     request = new ActiveXObject(“Microsoft.XMLHTTP”)

                    }

                    catch (e){}

                }

            } 

“request” is the XMLHttpRequest object in above code. (Code is in JavaScript )

Next step after this is to open the object connection and send the request

 Open method looks like 

XMLHttpRequest.open(method, url, in boolean async, [user, password])

i.e.

request.open(‘GET’, url+parameter, true)

request.send(null)

(Here we are not going to use user and password)

but before this, we need to specify the function which will take care of the data return from the server. i.e. once we send request to the server using XMLHttpRequest object and once response comes from the server which function will handle it.

      Before sending the request we will specify the action; for this XMLHttpRequest object posses one event called as onreadystatechange. On this event we can specify which function should be called on each ready state change.

      Now before this will understand which are the states XMLHttpRequest object supports.

So the above code will change to

request.onreadystatechange=function()

{

if(request.readyState == 4 && request.status==200)

      {

//Here put your code

}

 }

request.open(‘GET’, url+parameter, true)

            request.send(null)

Properties of XMLHttpRequest object

• The readyState Property : this we have already discussed in the above topic.
• The responseText Property : this property contains the text of the HTTP response received by client. responseText contains empty string if readyState is 0,1,2. If it is 3 it contains partial response received from the server. When it is 4 , reposneText contains complete response.
• The responseXML Property : this represents XML response, when ready state is 4.
• The status Property : this represents HTTP status code. E.g. 200 means ok , 404 means page not found etc. (you can search on net for the Http status codes.)
• The statusText Property : this will give you text for the HTTP status i.e. for 200 it will say “Ok”.

For more information: http://www.w3.org/TR/2006/WD-XMLHttpRequest-20060927/

Now we will develop a web application in which user will select the value in the combo box and on selection of the value dependent textbox will be filled. In this case on change event of the combo will be used to fire an Ajax request to the server and server in turns will send a response to the client. (Coding is done in asp.net 2.0)

1. Create a web application design a combo box and text box as follows

<body>

    <form id=”form1″ runat=”server”>

    <div>

        <br />

        <br />

        <br />

        This is the input dropdown list. Select any value and following text box will be

        filled.

        <asp:DropDownList ID=”InputList” runat=”server”>

                <asp:ListItem>Select values</asp:ListItem>

                <asp:ListItem>A</asp:ListItem>

                <asp:ListItem>B</asp:ListItem>

                <asp:ListItem>C</asp:ListItem>

                <asp:ListItem>D</asp:ListItem>

        </asp:DropDownList><br />

        <br />

        <br />

        <br />

        This is the dependent text box.

        <asp:TextBox ID=”DependentOutput” runat=”server”></asp:TextBox><br />

    </div>

    </form>

1. And in code behind add attribute to “InputList” i.e. to combo box.

public partial class _Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

     InputList.Attributes.Add(“onchange”, “callToServer(this.value)”);

    }

}

“callToServer(this.value)” is the javascript function, this function will accept the selected value and send request to the server; using XMLHttpRequest object.

1. Now add one webservice in the same project. Also add following prototypes in web.config file.

<webServices>

      <protocols>

        <add name=“HttpGet“ />

        <add name=“HttpPost“/>

      </protocols>

    </webServices>

Add above code in <system.web> tab. This is required to communicate with webservice over http.

1. Now write one webmethod in the webservice. i.e.

[WebMethod]

    public string sendMessage(string str) {

        string retVal = “”;

        switch (str)

        {

            case “A”:

                retVal = “You have selected A”;

                break;

            case “B”:

                retVal = “You have selected B”;

                break;

            case “C”:

                retVal = “You have selected C”;

                break;

            case “D”:

                retVal = “You have selected D”;

                break;

        }

        return retVal;

    } 

We will call this webMethod in our Ajax call.

1. After this, will write a  JavaScript function “callToServer(this.value)” . This function will be called on onchange event of dropdown list (Ref point 1).

function callToServer(val)

    {

    // Url will change according to your websevice

    var url = “http://localhost:1027/WebSite3/webservice.asmx/sendMessage?str=”+val;

    // For more than one prameter in webMethod

    // var url = “http://localhost:1027/WebSite3/webservice.asmx/sendMessage?str=”+val + “&para1=123&para2=qwe;

        if (window.XMLHttpRequest) // if Mozilla, Safari etc

            request = new XMLHttpRequest();

        else if (window.ActiveXObject)

           { // if IE

            try

                {

                 request = new ActiveXObject(“Msxml2.XMLHTTP”);

                }   

            catch (e)

                {

                    try

                    {

                     request = new ActiveXObject(“Microsoft.XMLHTTP”);

                    }

                    catch (e){}

                }

            }

         if(request)

            {  

                request.onreadystatechange=handleResponse;

                request.open(“GET”, url, true);

                request.send(null);

                }  

    }

If you observe the url it is the url of the webserivce in the same project.

Here we have to use url which is under the same domain, Firefox doesn’t allow cross refrence, and IE give warning (i.e. IE 6).

Means

var url = “http://domain1/WebSite/webservice.asmx/sendMessage?str=”+val;

this will give warning in the IE 6 but Firefox will not allow you to access this webservice.

In the above function check  request.onreadystatechange=handleResponse;

Here if you obsever onreadystatechange on function named handleResponse is called. So in the next step we will have to write a function which will handle the response from the server.

1. handleResponse function will be as follows

  function handleResponse()

        {

                if(request.readyState == 4 && request.status == 200)

                {

                    if (window.ActiveXObject) // for IE

                        {

                        var doc=new ActiveXObject(“Microsoft.XMLDOM”);

                        doc.async=“false”;

                        doc.loadXML(request.responseText);

                        }

                          // code for Mozilla, Firefox, Opera, etc.

                    else

                        {

                        var parser=new DOMParser();

                        var doc=parser.parseFromString(request.responseText,“text/xml”);

                        }

                        try

                        {

                         var data = doc.documentElement.childNodes[0].nodeValue;

                        window.document.getElementById(‘DependentOutput’).value = data;

                        }

                        catch(e) {}

                }

        } 

Since the response is from webservice and it is in the xmlformat, we have to use parser to parse the data. If you want to see what is the response from the server add alert(request.responseText) in the above code after 1^st if condition.

window.document.getElementById(‘DependentOutput’).value = data; this line will fill the textbox with the response from the server.

This how we can create Ajax application, it’s very simple and easy. Once you understand this concept, you can modify the code and make it more complex as per your requirements.

I am attaching the Demo web application and have the same code explained in the above document.