how to call webservice in HTML page using JQuery

Question

0.00/5 (No votes)

See more:

Dear All,
Can anybody tell me how to call web service in HTML page.
I have one method in my web service like

C#

public bool Check(string S,string R)
{
        if(S==R)
                return true;
        else
                return false;
}

I would like to call this method in my HTML page.
I think we can achieve this by using Java script or else by jQuery.
If it possible in these two ways can anybody explain this with example.

Posted 23-Feb-12 0:46am

SIVA RAMAMOORTHY

Updated 23-Feb-12 3:10am

André Kraak

v2

Add a Solution

Comments

André Kraak 23-Feb-12 9:10am

Edited question:
Added pre tags
Spelling/Grammar

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Bryian Tan · Answer 1 · 2012-02-23T04:14:00

hi,

There are some syntax errors with the JavaScript you posted. First, let look at the WebService, we need to include [System.Web.Script.Services.ScriptService] To allow this Web Service to be called from script. Let do a simple test

C#

[System.Web.Script.Services.ScriptService]
    public class Service : System.Web.Services.WebService
    {

        [WebMethod(Description = "Validate the login credentials")]
        public bool Validate(string UserName, string Password)
        {
            if (Password == "test" && UserName == "test")
                return true;
            else
                return false;
        }
    }

Then the JavaScript on your service.html page should look like

XML

<script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" language="javascript">
        var Surl = "http://localhost:3031/HTMLService/Service.asmx/Validate";
        $(document).ready(function () {
            $("input#submit").click(function (event) {
                var uid = document.getElementById("UserName").value;
                var pwd = document.getElementById("Password").value;
                var dataString = "{ 'UserName' : '" + uid + "', 'Password' : '" + pwd + "'}";

                $.ajax({
                    ServiceCallID: 1,
                    url: Surl,
                    type: 'POST',
                    data: dataString,
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",

                    success: function (result) {
                        returnVal = result.d;
                        alert(returnVal);
                    },

                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        returnVal = '';
                    }
                });
            });
        });

</script>

SIVA RAMAMOORTHY · Answer 2 · 2012-02-23T03:07:00

Hi,

I am unable to get it..

Please find the code as below & resolve the issue

service.cs
<code>[WebMethod(Description = "Validate the login credentials")]
public bool Validate(string UserName,string Password)
{
SqlConnection oCon = new SqlConnection(ConfigurationManager.AppSettings["conStr"]);
SqlCommand oCmd = new SqlCommand("select LoginPassword from tbl_LoginInfo where UserName='"+UserName+"'", oCon);
oCon.Open();
string Temp = oCmd.ExecuteScalar().ToString();
if (Password == Temp)
return true;
else
return false;
}</code>
service.html
<code>
<script type="text/javascript" language="javascript">
var Surl="http://localhost:3031/HTMLService/Service.asmx";
$(document).ready(function() {
$("input#submit").click(function(event) {
$.ajax(
{ ServiceCallID = 1;
var uid = document.getElementById("UserName").value;
var pwd = document.getElementById("Password").value;
var dataString = "{ 'UserName' : '" + uid + "', 'Password' : '" + pwd + "'}";
url: Surl;
type: 'POST';
data: dataString,
contentType: "application/json; charset=utf-8";
dataType: "json";
success: function (result) {
returnVal = result.d;
};
error: function (XMLHttpRequest, textStatus, errorThrown) {
returnVal = '';
};
});
}}

</script>
</head>
<body onload="Initialize()" id="service" style="behavior:url(webservice.htc)" onresult="Result()">
<form action="">
<label>Enter the Username</label>
<input type="text" id="UserName" name="username" />
<label>Enter the Password</label>
<input type="text" id="Password" name="password" />
<input id="submit" type="button" value="button" />
</form>
</body>
</code>

ZurdoDev · Answer 3 · 2012-02-23T01:57:00

You use .ajax[^]

Example:

JavaScript

var dataString = "{'Site':'" + site + "'}";
$.ajax(
 {
     url: wsUrl,
     type: 'POST',
     data: dataString,
     contentType: "application/json; charset=utf-8",
     dataType: "json",
     success: function (result) {
         returnVal = result.d;
     },
     error: function (XMLHttpRequest, textStatus, errorThrown) {
         returnVal = '';
     }
 });
 }

But, you'll also have to mark your C# function as a WebMethod. You've got a lot of work to do so come back with something more specific if you get stuck.

how to call webservice in HTML page using JQuery

3 solutions

Solution 3

Solution 2

Solution 1

Add your solution here

Preview 0