Background
In my previous articles we
learned how to create and consume Web Service in a different type of applications. Now this article explains how to call Web Service in a HTML page Using Jquery and JSON.
Per-requirement to Understand this application
- Knowledge of web Service
- Knowledge of Jquery and JavaScript.
- Understandability of JSON.
If you are a beginner and want to learn about Web Services then please refer to the following articles of mine:
- Introduction to Web Service with Example in ASP.Net
- Consuming Web Service In an ASP.Net Web Application
- Consuming Web Service In a Console Application
- Consuming Web Service In Windows Application
If you are a beginner and want to learn about Jquery and JavaScript. then please refer to the following articles of mine:- ASP.Net Form Validation Using jQuery
- ASP.Net Form Validation Using JavaScript.
from the above two article ,you will learn about the Basic Introduction of JQuery and JavaScript.
To Learn About JSON (JavaScript Object Notation) follows MSDN.
And remember, I have
written this article only focusing on beginners. So let us start
step-by-step so beginners can understand it very easily.
So let us start using a different way to add a web service using a template..
- "Start" - "All Programs" - "Microsoft Visual Studio 2010".
- "File" - "New Project" - "C#" - "Empty Web Application" (to avoid adding a master page).
- Provide the web site a name such as "CallingWebServiceInHtmlPage" or another as you wish and specify the location.
- Then right-click on Solution Explorer - "Add New Item" - you see the web service templates as,
![ServiceAdd.jpg]()
give the name for web service as GetDetailsService or any as you wish and then click on add
5.
Now right-click on Solution Explorer - "Add New Item" - you see the HTML Page templates as,
![html.jpg]()
give the name for HTML page as viewDetails or any as you wish and then click on add
then our solution explorer will look like as
![PageExp.jpg]()
now open the GetDetailsService class of web service and
write the following method followed by [webMethod] attribute as:
[WebMethod]
public string GetCusttdet
(string Custname)
{
return Custname
;
}
IMP Note:When you calling any web Service through Script then you need to uncomment the following lines which are by default commented in a web service ,that is
[
System.Web.Script.Services.
ScriptService]
now after uncommenting the above line then the web method named
GetCusttdet with class GetDetailsService is look like as follows
// 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 GetDetailsService : System.
Web.Services.
WebService{
[WebMethod]
public string GetCusttdet
(string Custname)
{
return Custname
;
}}
In
the code above I have declared a one string method named GetCusttdet with the one parameter Custname for
accepting Customer Name from the user,and then the method returns the custname to the user.
now add the following JSON and Jquery code at <head> section inside the <script> tag
in a HTML page as.
<script type="text/javascript">
$(document).ready(
function ()
{
var TextBox1 = $(
"#TextBox1");
TextBox1.change(
function (
e)
//calling Jquery function on Textbox change event {
var Name = TextBox1.val();
//getting the value from text box if (Name != -1)
{
Getdet(Name);
//ing the Input parameter to javascript method Named Getdet from user with the help of text box by Name variable. }
});
});
function Getdet(Name)
{
$.ajax({
type:
"POST",
url:
"GetDetailsService.asmx/GetCustdet",
// add web service Name and web service Method Name data:
"{'Custname':'" + Name +
"'}",
//web Service method Parameter Name and ,user Input value which in Name Variable. contentType:
"application/json; charset=utf-8",
dataType:
"json",
success: function (response)
{
$(
"#spnGetdet").html(response.d);
//getting the Response from JSON
},
failure:
function (msg)
{
alert(msg);
}
});
}
</script>
Note - To use jQuery you need to add the reference for the jQuery library that is nothing but a JavaScript file
I hope you have followed the same steps as i have done ,now run the application and Enter the Value into the text box then the service will return the output as follows
.
![outputpage.jpg]()
From the preceding example we learned how to call web service in a Pure HTML page using Json and JQuery , I hope you have done it.
Note - For detailed code please download the Zip file attached above.
- Don't forget to add the JQuery library file reference.
Summary
We
learned how to call web service in a Pure HTML page using JSON and JQuery. I hope
this article is useful for all students and beginners. If you have any
suggestion related to this article then please contact me.