After seeing much response to my previous article “How to calls server side code using JavaScript”, I am very much impressed to write this. I would like keep this much simple.
Step 1: Create a new Ajax enabled Website
Step 2: Add a Web Service (common.asmx or .svc file) to it.
Step 3: on Webservice code behind file make sure that add
<System.Web.Script.Services.ScriptService()>_
Attribute to your class as show in below. This will enable to call your webservice from JavaScript.
Your Webservice code behind file should look like below. Here we are adding a Web method “SayHello”, which is taking Name as input parameter and returns string as output parameter.
<System.Web.Script.Services.ScriptService()> _
Public Class Common
Inherits System.Web.Services.WebService
<WebMethod(True)> _
Public Function SayHello(ByVal Name As string) AS string
Return “Hello” + Name
End Function
End Class
Step 4: Now on your Default.aspx Add a Textbox and Button (Button1) control
Step 5: Now add a new folder called scripts in your project add new JavaScript file Common.js
Step 6: Download Jqery library from http://jquery.com/ add it to your script folder.
Step 7: Now open your common.js and add the following reference as shown in below
Step 8: add following Jquery function on your common.js file
$(document).ready(function() {
$(‘[id$=Button1]’).click(function() {
var serviceurl = “http://yourservname/common.asmx/SayHello”;
var varName = $(‘[id$=TextBox1]’).text;
var ajaxdata = “{‘Name’:'” + varName + “‘}”;
$.ajax({
type: “POST”,
url: serviceurl,
data: ajaxdata,
contentType: “application/json; charset=utf-8”,
dataType: “json”,
success: onSucess(response),
error: onError
});
return false;
});
});
function onSucess(response) {
alert(response);
}
function onError() {
alert(“Error while calling webservice”);
}
Step 9: Now add your common.js file and Jquery.js file to your default.aspx page and run your application
Step 10: Enter a name in your text box and click on button. You will see your javascript calling web service.