ASP.NET Web Services – Blast From The Past (Part 2)

Here is part 2 of this topic as promised.  It will cover consuming web service using HTTP POST and using jQuery AJAX.  If you missed part 1 of this topic, click here.

But before I start, I forgot to mention in part 1 that when you set up your web service as part of a web site, like when you deploy your web service in a virtual directory of a web site, you need to make sure the <compilation> setting in the web site’s web.config file does not have the targetFramework attribute which is usually present when targeting .NET Framework 4.0 and up.  Otherwise, your web service will not work.  Ok, so on to part 2.

 

Consuming a Web Service Using HTTP POST

Another article that covers the basics of a web service including consuming it using HTTP POST is Understanding the Basics of Web Service in ASP.NET.  I have a demo web page that uses HTTP POST to consume the simple web service I created.

Some important points:

  • When you use this method, you need to add the below config to the web service’s web.config file, otherwise you will get this error.
<configuration>
    <system.web>
		<!-- enable HttpGet and HttpPost on the web service -->
		<webservices>
			<protocols>
				<add name="HttpGet" />
				<add name="HttpPost" />
			</protocols>
		</webservices>
    </system.web>
</configuration>

 

  • The response you get will be displayed in the browser in XML format (see my demo web page).  If you want to handle the response, you need to code to send a POST request and handle the response, as in below:
protected void Translatev2Button_Click(object sender, EventArgs e)
{
	if (EnglishTextBox.Text != string.Empty)
	{
		try
		
{
	// this is the content of the request
	byte[] content = System.Text.Encoding.ASCII.GetBytes(
		"english=" + EnglishTextBox.Text);

	// create the request
	System.Net.WebRequest request = System.Net.HttpWebRequest.Create(
		"http://rodansotto.com/asmx/" +
		"TranslateToFrenchService.asmx/TranslateToFrench");
	request.Method = "POST";
	request.ContentType = "application/x-www-form-urlencoded";
	request.ContentLength = content.Length;

	// write the content to the request stream
	System.IO.Stream requestStream = request.GetRequestStream();
	requestStream.Write(content, 0, content.Length);
	requestStream.Flush(); 

	// get the response
	System.Net.WebResponse response = request.GetResponse();
	// get the stream associated with the response
	System.IO.Stream responseStream = response.GetResponseStream();
	// pipes the stream to a higher level stream reader with the 
	//  required encoding format
	System.IO.StreamReader streamReader = 
		new System.IO.StreamReader(
			responseStream, System.Text.Encoding.UTF8);

	// the response is in XML format and normally needs to be handled
	// but since the XML response is simple enough that when displayed
	//  by the browser, it only displays what we need to display,
	//  the french text
	FrenchLabel.Text = streamReader.ReadToEnd();
}
		
		catch (Exception)
		{
			throw;
		}
	}
}

 

Consuming a Web Service Using jQuery AJAX

Another way to call a web service is by using jQuery.ajax() function.  This is the preferred way by many.  Understand jQuery Ajax Function: Call Web Service Using jQuery Ajax Method shows you how.  Below is the client-side code for my demo web page that uses jQuery AJAX to consume the simple web service I created.

<head runat="server">
    
    <script src="http://ajax.googleapis.com/.../1.11.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function () {
            $("#TranslateButton").click(function () {
			
// have to add following statement to enable cross-domain request
$.support.cors = true;

$.ajax({
	type: "POST",

	url: "http://rodansotto.com/...Service.asmx/TranslateToFrench",

	//contentType: "application/x-www-form-urlencoded; charset=UTF-8",
	// no need to specify contentType above as that is the default

	data: "english=" + $("#EnglishTextBox").val(),

	dataType: "text",

	success: function (response) {
		$("#FrenchLabel").html(response);
	},

	error: function (jqXHR, textStatus, errorThrown) {
		var errorMsg = "jQuery AJAX ERROR!!!\njqXHR.statusText = " + 
			jqXHR.statusText + "\ntextStatus = " + 
			textStatus + "\nerrorThrown = " + errorThrown;
		alert(errorMsg);
	}
});
				
            });
        });
    </script>

 

Some important points:

  • If your web app will be making a cross-domain request to call the web service, you need to set $.support.cors = true, otherwise you will receive the ‘No Transport’ error.
  • And don’t forget to enable the following attribute in your web service class: [System.Web.Script.Services.ScriptService].
namespace MyWebService
{
    /// <summary>
    /// Summary description for TranslateToFrenchService
    /// </summary>
    [WebService(Namespace = "http://rodansotto.com/")]
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
    [System.ComponentModel.ToolboxItem(false)]
    // To allow this Web Service to be called from script,
    //  using ASP.NET AJAX, uncomment the following line. 
    [System.Web.Script.Services.ScriptService]
    public class TranslateToFrenchService : 
        System.Web.Services.WebService
    {

 

And that concludes this topic ASP.NET Web Services – Blast From The Past.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s