Creating a simple Hello World ASP.NET AJAX web page.


Hi,

Here we will create a simple ASP.Net Ajax webpage having a button and textbox control in it.
On the click of button we will fill the textbox with “Hello world” string returned from the server without refreshing our webpage.

1) Create a new ASP.NET Ajax web site(Visual Studio 2005)or ASP.NET web site (version 3.5) if we are using Orcas(Visual studio 2008)

2) Add a ScriptManager control in the page( if it isn’t there)

3) Add button and textbox server side control.

<asp:TextBox ID=”TextBox1″ runat=”server” />

<asp:Button ID=”Button1″ runat=”server” Text=”Button” />

4) Add this event Handler for button click event

protected void Button1_Click(object sender, EventArgs e)
{
TextBox1.Text=”Hello World”;
}

4) Now to make our page AJAX enabled the only thing we need to add is

<asp:UpdatePanel id=up1 runat=server>
<ContentTemplate>

<asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox>
<asp:Button ID=”Button1″ runat=”server” onclick=”Button1_Click” Text=”Button” />

</ContentTemplate>
</asp:UpdatePanel>

Just wrap our server side controls inside update panel control’s content template.

5) That’s it. Now run the application and click on the button the textbox should get filled with Hello World string without any refresh of the page.

Right now what we saw was a server-centric approach using updatePanel control.

We can do the same thing using client-centric approach using ASP.NET AJAX client library. Check this post

https://nishantrana.wordpress.com/2007/11/06/creating-and-calling-aspnet-ajax-web-service/

Bye.

 

Creating and Calling ASP.NET AJAX Web Service


Hi,

First we will create a new ASP.NET Ajax web site(Visual Studio 2005)
or ASP.NET web site (version 3.5) if we are using Orcas(Visual studio 2008)

Through Add New Item, add a new web service WebService.asmx in the website.

1) Add this in webservice.cs

using System.Web.Script.Services;


2) Add a ScriptService attribute to our webservice class

[ScriptService]
[WebService(Namespace = “http://tempuri.org/&#8221;)]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

3) We’ll use the default Hello World web service. So just save the web service and view it in browser to test it.

Now change the url of the webservice in browser and append “/js” to it
i.e.
Change
http://d-0824/AjaxinAction/WebService.asmx
to
http://d-0824/AjaxinAction/WebService.asmx/js

Press enter it will ask you to save the file,
just save and open it in notepad

We will see something like this

var WebService=function() {
WebService.initializeBase(this);
this._timeout = 0;
this._userContext = null;
this._succeeded = null;
this._failed = null;
}
WebService.prototype={
_get_path:function() {
…………………………
……………………….

This is a javascript proxy class which the our client side ajax library will use to make call to our web service.

4) Add a script manager control to our default.aspx page ( if not already there), and add the reference to our web service

<asp:ScriptManager ID=”ScriptManager1″ runat=”server”>
<Services>
<asp:ServiceReference Path=”WebService.asmx” />
</Services>
</asp:ScriptManager>

5) Now add a simple html text control on the default.aspx page. We will be calling our web service and fill the text box value returned from the webservce (“Hello World”).

<input id=”Text1″ type=”text” />

6) Put this script on your default.aspx page

<script type=”text/javascript”>

function pageLoad()
{
WebService.HelloWorld(onSuccess);
}

function onSuccess(result)
{
$get(“Text1”).value=result;
}

</script>

7) Now just view the page in browser we should see the textbox filled with “Hello World” string returned from our web service.

8) Or if we want to call it in the click of the button. add a html button control.

<input id=”Button1″ type=”button” value=”button” />

9) Replace the above script with this one

<script type=”text/javascript”>
var myButton=null;
function pageLoad(sender,e)
{
myButton=$get(“Button1″);
$addHandler(myButton,”click”,btn_click);
}

function btn_click(sender,e)
{
WebService.HelloWorld(onSuccess);
}

function onSuccess(result)
{
$get(“Text1”).value=result;
}
</script>

In the above example we saw a client centric approach, the same thing can be done very easily by making use  of server centric approach in ASP.NET AJAX framework.

https://nishantrana.wordpress.com/2007/11/06/creating-a-simple-hello-world-aspnet-ajax-web-page/

Bye

 

Using Ajax in ASP.NET application -3 (JSON)


As we saw in our previous post

https://nishantrana.wordpress.com/2007/10/25/using-ajax-in-aspnet-application-2/ 

How easy it becomes to parse the response and the values if it is in the XML rather than plain text.

But that is not the only way there is something called JSON as well

What is JSON?

JSON – Javascript object notation is a format for sending and recieving data similar to XML.

It’s a lightweight data fomat that’s easy to work with in JavaScript.

Check this site for more info http://json.org/

Let’s understand it by an example

We’ll here again modify the application created in our previous post to make use of JSON in place of XML

This time we will be returing an Object to our javascript code in JSON as response.

Let’s say we have on class like this which we would like to return as response to our calling ajax scripts

public class Emp

{

public Emp(){}

private string firstName;

public string FirstName{get { return firstName; } set { firstName = value; }}

private string lastName;

public string LastName{ get { return lastName; } set { lastName = value; }} 

private string[] skills = new string[3]; 

public string[] Skills{ get { return skills; }set { skills = value; }

}} 

To convert it to JSON let’s make use of a library.

We’ll make use of LitJSON here.

We can find all the information and the library for LitJSON here http://litjson.sourceforge.net/doc/manual.html 

(add reference to LitJson.dll in the project) 

Now make this change in our Default2.aspx page’s page Load

protected void Page_Load(object sender, EventArgs e)

{

Emp emp = new Emp();

emp.FirstName = “Donald”;

emp.LastName = “Duck”;

emp.Skills[0] = “ASP.NET”;

emp.Skills[1] = “WCF”;

emp.Skills[2] =”WPF”;

string json_Emp = JsonMapper.ToJson(emp);

Response.Write(json_Emp); 

}

Response.Write(json_Emp) will give us this

{“FirstName”:”Donald”,”LastName”:”Duck”,”Skills”:[“ASP.NET”,”WCF”,”WPF”]}

The changes that we need to make in our Default.aspx page are again in doUpdate function 

function doUpdate()

{

if(xmlHttp.readyState==4)

 {

//{“FirstName”:”Donald”,”LastName”:”Duck”,”Skills”:[“ASP.NET”,”WCF”,”WPF”]}

 var jsonData=eval(‘(‘+xmlHttp.responseText+’)’);

var firstName=jsonData.FirstName;

var lastName=jsonData.LastName; 

var skill1=jsonData.Skills[0];

var skill1=jsonData.Skills[1];

}}

This way we can parse the recieved as JSON which seems much easier comapred to XMLDOM. 

Bye 

Using Ajax in ASP.NET application -2


In part 1 of this post we saw our response returning us a simple text which was holding a single value.

But what if it is returing multiple values and it using some characters like | (pipe) or say semicolon for separating one value from another.

In this case, we need to make use of javascript string functions to get each and every value.

Here then our application should understand what ; and | or say , mean and what if their order changes.

So now we can have our responses send as XML so that we can make use of XMLDOM to parse through the response. Which infact would be quite easy and efficient.

Let’s update our application

https://nishantrana.wordpress.com/2007/10/25/using-ajax-in-aspnet-application/

Things we need to change are

1)  Change doUpdate function

function doUpdate()

{

if(xmlHttp.readyState==4)

{ // replacing reponseText with responseXML to get the xml DOM tree reference 

var xmlDoc=xmlHttp.responseXML; // parsing through the response using dom methods

var firstName=xmlDoc.getElementsByTagName(“first”)[0].firstChild.nodeValue;

var lastName=xmlDoc.getElementsByTagName(“last”)[0].firstChild.nodeValue;

document.getElementById(“lblInfo”).firstChild.nodeValue=firstName+” “+lastName; }

 }

In the above case the response we are recieving from server is this, which is in xml

<?xml version=”1.0″?>
<name>
<first>Mickey</first><last>Mouse</last>
</name>

2) Now we will change Default2.aspx to send us response back in xml.

protected void Page_Load(object sender, EventArgs e){ // this will inform our webpage about responses being sent as XML and not text

 Response.AddHeader(“Content-Type”, “text/xml;charset=UTF-8”);

Response.Write(“<?xml version=\”1.0\” encoding=\”utf-8\”?><name><first>Mickey</first><last>Mouse</last> </name>”);  

}

Now we can run our application and see our label’s text changing to Mickey Mouse. 

Bye

Using Ajax in ASP.NET application -1


Hi,

Here we’ll change the small application that we had written to get reponse from ASP.NET webpage rather than a webservice.

https://nishantrana.wordpress.com/2007/10/18/calling-aspnet-webservice-from-javascript-ajax/

Here we are using a label server control whose value we will be replacing with response from our asp.net web page through ajax call

1)  Create a new ASP.NET WebApplication  

2)  Put a label control on the form (Default.aspx)

<asp:Label ID=”lblInfo” runat=”server” Height=”49px” Text=”Label” Width=”209px”>ReplaceIt</asp:Label>

 3) Put this script code in the head section of the aspx page

var xmlHttp;

function getMessage()

{

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

xmlHttp.open(“post”, “Default2.aspx”, true);

xmlHttp.onreadystatechange=doUpdate;

xmlHttp.send();  return false; }

function doUpdate() { if(xmlHttp.readyState==4)

{

var exch; exch=xmlHttp.responseText;document.getElementById(“lblInfo”).firstChild.nodeValue=exch;

}

}

4) Call the getMessage function in the body’s onLoad eventHandler

 <BODY onload=”getMessage()”>

5) Create another page Default2.aspx which will return us  the “Hello World” repsonse.

6) Write this in our Default2.aspx’s page load event

protected void Page_Load(object sender, EventArgs e)

{

Response.Write(“Hello World”);

}

7) Now comes the most imp part i.e. Deleting all the html tags  from our Default2.aspx leaving only this, otherwise the html will also come as a part of response. But we need only the Hello World text.

<%@ Page Language=”C#” AutoEventWireup=”true” CodeFile=”Default2.aspx.cs” Inherits=”Default2″ %>

8- Now run the application, we should see our label’s text changing to “Hello World”

Bye

Calling Asp.NET web service from javascript (Ajax)-(Passing Parameter-POST)


Hi,

Now we will modify the application that we developed in the previous post to work with POST parameter

https://nishantrana.wordpress.com/2007/10/22/calling-aspnet-web-service-from-javascript-ajax-passing-parameter/

We have changed the get to post as we are now not passing the value for Name by appending it in the url.

Only make changes to the function getMessage()

function getMessage()

{

var name=’Nishant’;

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

xmlHttp.open(“POST“, “http://localhost/WebService1/Service1.asmx/HelloWorld&#8221;, true);

xmlHttp.onreadystatechange=doUpdate;

xmlHttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

xmlHttp.send(“name=”+escape(name));

return false;

}

Let’s understand the changes that we have made

First of all we have change the method of passing data to POST from GET.

But still we need to pass the name’s value which our web service method needs.

For that we’ll modify our Send() method

xmlHttp.send(“name=”+escape(name));

We are using the same name/value pair in send()  which we used at the end of the request URL in the GET version

escape()-It makes sure that the values are valid values i.e. no tricky characters are there.

But this is not enough that is why we added this line

xmlHttp.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded”);

Here the server doesn’t know what kind of data it can expect or is coming from our application.

We are making use of setRequestHeader function to tell the server about the content type we are going to send.

The server can get this information from request’s header that it recieves.

Content-Type  -> Name of the header

application/x-www-form-urlencoded -> http://www.w3.org/TR/html4/interact/forms.html#h-17.13.4.1

Bye