Click here to Skip to main content
Rate this: bad
good
Please Sign up or sign in to vote.
See more: C# jQuery
How to call web services mwethod in html page my script like this
 
<script src="Scripts/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
 
    <script language="javascript" type="text/javascript">
    $(document).ready(function(){
      
           
            $("#btnok").click(function () {
                //alert('');
                $.ajax({
                    type: "POST",
                    url: "http://localhost:3658/HostingService.asmx/SETPostJobDetails",
                    data: "{title:'" + $("#title").val() + "',C.Name:'" + $("#name").val() + "',city:'" + $("#city").val() + "',state:'" + $("#state").val() + "',date:'" + $("#date").val() + "',duration:'" + $("#duration").val() + "',pay:'" + $("#pay").val() + "',industry:'" + $("#industry").val() + "',type:'" + $("#type").val() + "',status:'" + $("#status").val() + "',description:'" + $("#description").val() + "',qualification:'" + $("#qualification").val() + "',}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess,
                    error: OnError
                });
            });
        });
 
        function OnSuccess(data, status) {
            alert('The addition of two number is : ' + data.d);
        }
 
        function OnError(data, status, error) {
            alert(data.d);
        }      
    </script>
 
my html page
<tr>
    <td width="25%" align="left" valign="middle">
        Job ID :
    </td>
    <td width="75%" align="left" valign="middle">
        <input id="id" type="text" class="textbox2" name="name" size="30">
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Job Title :
    </td>
    <td align="left" valign="middle">
        <input id="title" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Enter Company Name :
    </td>
    <td align="left" valign="middle">
        <input id="name" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        City :
    </td>
    <td align="left" valign="middle">
        <input id="city" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        State :
    </td>
    <td align="left" valign="middle">
        <input id="state" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Post Date :
    </td>
    <td align="left" valign="middle">
        <input id="date" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Duration :
    </td>
    <td align="left" valign="middle">
        <input id="duration" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Pay Rate :
    </td>
    <td align="left" valign="middle">
        <input id="pay" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Industry :
    </td>
    <td align="left" valign="middle">
        <input id="industry" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Job Type :
    </td>
    <td align="left" valign="middle">
        <input id="type" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Enter Job Status :
    </td>
    <td align="left" valign="middle">
        <input id="status" type="text" class="textbox2" name="name" size="30" />
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Job Description :
    </td>
    <td align="left" valign="middle">
        <textarea id="description" name="" cols="" rows="" class="textarea1">&nbsp;</textarea>
    </td>
</tr>
<tr>
    <td align="left" valign="middle">
        Qualification :
    </td>
    <td align="left" valign="middle">
        <textarea id="qualification" name="" cols="" rows="" class="textarea1">&nbsp;</textarea>
    </td>
</tr>
<tr>
    <td align="center" valign="middle">
        &nbsp;
    </td>
    <td align="center" valign="middle">
        <input id="btnok" name="Submit" type="button" value="Submit" class="btn2" border="0" /><input
            name="reset" type="button" value="Reset" class="btn2" border="0" />
    </td>
</tr>
 

please help me
 
thanks and regards
Posted 2-Jan-13 23:42pm
Edited 2-Jan-13 23:52pm
DaveAuld174.6K
v2
Comments
Tadit Dash at 3-Jan-13 7:28am
   
Are you facing any problem with this code?
If yes, please tell us the problem.
Santhosh23 at 3-Jan-13 8:10am
   
Yes, get the OnError alert box, and i dont get the data values and always i got undefined values in alert box. and object xmlhttprequest error.. this is are me facing the problems. please help me.. thank and regards
Tadit Dash at 3-Jan-13 8:43am
   
Write URL like below...
url: "HostingService.asmx/SETPostJobDetails".
Check if it works or not?
Santhosh23 at 3-Jan-13 9:08am
   
just now am tired.. but not working and already i added [ScriptService] method in .asmx page..
Tadit Dash at 3-Jan-13 9:24am
   
Then please post the codes of asmx service.
Santhosh23 at 3-Jan-13 9:33am
   
ok this is my services code
 
[WebMethod, ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public string SETPostJobDetails(string Title, string Type, string Description, string Qualification, string Compensation, string openings, string city,
string state, string name, string phone, string email, string date, string zipcode, string job_categories, string client_id)
{
DataSet ds = new DataSet();
try
{
SqlDataAdapter adp = new SqlDataAdapter();
adp.SelectCommand = new SqlCommand();
adp.SelectCommand.CommandType = CommandType.StoredProcedure;
adp.SelectCommand.Connection = (SqlConnection)OpenConnection1();
adp.SelectCommand.CommandText = "SP_POST_JOBDETAILS_SET";
SqlParameter[] Parameters = new SqlParameter[15];
Parameters[0] = new SqlParameter("@JOB_TITLE", SqlDbType.VarChar, 100);
Parameters[0].Value = Title;
 
Parameters[1] = new SqlParameter("@JOB_TYPE", SqlDbType.VarChar, 50);
Parameters[1].Value = Type;
 
Parameters[2] = new SqlParameter("@DESCRIPTION", SqlDbType.VarChar, 5000);
Parameters[2].Value = Description;
 
Parameters[3] = new SqlParameter("@QUALIFICATIONS", SqlDbType.VarChar, 1000);
Parameters[3].Value = Qualification;
 
Parameters[4] = new SqlParameter("@COMPENSATION_RANGE", SqlDbType.VarChar, 200);
Parameters[4].Value = Compensation;
 
Parameters[5] = new SqlParameter("@NO_OF_OPENINGS", SqlDbType.VarChar, 50);
Parameters[5].Value = openings;
 
Parameters[6] = new SqlParameter("@CITY", SqlDbType.VarChar, 200);
Parameters[6].Value = city;
 
Parameters[7] = new SqlParameter("@STATE", SqlDbType.VarChar, 100);
Parameters[7].Value = state;
 
Parameters[8] = new SqlParameter("@CONTACT_NAME", SqlDbType.VarChar, 500);
Parameters[8].Value = name;
 
Parameters[9] = new SqlParameter("@CONTACT_PHONE", SqlDbType.VarChar, 50);
Parameters[9].Value = phone;
 
Parameters[10] = new SqlParameter("@EMAIL", SqlDbType.VarChar, 100);
Parameters[10].Value = email;
 
Parameters[11] = new SqlParameter("@START_DATE", SqlDbType.DateTime);
Parameters[11].Value = Convert.ToDateTime(date);
 
Parameters[12] = new SqlParameter("@ZIPCODE", SqlDbType.VarChar, 20);
Parameters[12].Value = zipcode;
 
Parameters[13] = new SqlParameter("@JOB_CATEGORIES", SqlDbType.VarChar, 200);
Parameters[13].Value = job_categories;
 
Parameters[14] = new SqlParameter("@CLIENT_ID", SqlDbType.Int);
Parameters[14].Value = int.Parse(client_id);
 
adp.SelectCommand.Parameters.AddRange(Parameters);
adp.Fill(ds);
string[][] JaggedArray = new string[ds.Tables[0].Rows.Count][];
//int i = 0;
//Dictionary<object, object> resultMain = new Dictionary<object, object>();
List<object> resultMain = new List<object>();
foreach (DataRow rs in ds.Tables[0].Rows)
{
 
Dictionary result = new Dictionary();
 
foreach (DataColumn dc in ds.Tables[0].Columns)
{
 
result.Add(dc.ColumnName, rs[dc].ToString());
 
}
 
resultMain.Add(result);
 

//i = i + 1;
}
 
JavaScriptSerializer js = new JavaScriptSerializer();
 
string strJSON = js.Serialize(resultMain);
return strJSON;
}
catch
Santhosh23 at 4-Jan-13 2:24am
   
i got the new error in like. this error shows firebug
Error while calling a function using jquery-ajax ("NetworkError: 500 Internal Server Error)
Tharaka MTR at 3-Jan-13 10:28am
   
could you please modify your error function as follows and give us the output
 
function OnError(data, status, error) {
alert(data.responseText);
}
Santhosh23 at 4-Jan-13 1:58am
   
hi tharaka MTR,
just now am modify the script in On-error function. but it shows the empty alert box only. how to solve my problem please help me.
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 1

First you have to check whether your web service is configured to access using client side script. If not, it will raise the error message “500 – Internal server error”.
To call the webservice using client side scipt, web service should configure with [ScriptService] attribute.
 
For more details how to do this please check the following URL
http://tharakaweb.com/2013/01/01/web-service-and-script-service/[^]
 
by changing the error function you can see the detail error response as follows
 
function OnError(data, status, error) {
      alert(data.responseText);
}
 
see the error message, it is occurred due to the serialization issue. Please check Dictionary object and serialization
 
{"Message":"Cannot convert object of type "System.String" to type "System.Collections.Generic.IDictionary`2[System.String,System.Object]","StackTrace":" at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeInternal(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)\r\n at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeMain(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize(JavaScriptSerializer serializer, String input, Type type, Int32 depthLimit)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize[T](String input)\r\n at System.Web.Script.Services.RestHandler.GetRawParamsFromPostRequest(HttpContext context, JavaScriptSerializer serializer)\r\n at System.Web.Script.Services.RestHandler.GetRawParams(WebServiceMethodData methodData, HttpContext context)\r\n at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.InvalidOperationException"}
  Permalink  
v3
Comments
Santhosh23 at 4-Jan-13 4:28am
   
{"Message":"Cannot convert object of type \u0027System.String\u0027 to type \u0027System.Collections.Generic.IDictionary`2[System.String,System.Object]\u0027","StackTrace":" at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeInternal(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)\r\n at System.Web.Script.Serialization.ObjectConverter.ConvertObjectToTypeMain(Object o, Type type, JavaScriptSerializer serializer, Boolean throwOnError, Object& convertedObject)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize(JavaScriptSerializer serializer, String input, Type type, Int32 depthLimit)\r\n at System.Web.Script.Serialization.JavaScriptSerializer.Deserialize[T](String input)\r\n at System.Web.Script.Services.RestHandler.GetRawParamsFromPostRequest(HttpContext context, JavaScriptSerializer serializer)\r\n at System.Web.Script.Services.RestHandler.GetRawParams(WebServiceMethodData methodData, HttpContext context)\r\n at System.Web.Script.Services.RestHandler.ExecuteWebServiceCall(HttpContext context, WebServiceMethodData methodData)","ExceptionType":"System.InvalidOperationException"}
 
i got the this type errors on my alert. am modifythe my script like below
 

<script language="javascript" type="text/javascript">
 

$(document).ready(function () {
 

$("#btnok").click(function () {
 

var title = $("#title").val();
var name = $("#name").val();
var city = $("#city").val();
var state = $("#state").val();
var date = $("#date").val();
var duratin = $("#duration").val();
var pay = $("#pay").val();
var type = $("#type").val();
var industry = $("#industry").val();
var status = $("#status").val();
var description = $("#description").val();
var qualification = $("#qualification").val();
// var data = { title: title, Name: name, city: city, state: state, date: date, duration: duratin, pay: pay, industry: industry, type: type, status: status, description: description, qualification: qualification };
var data = { title:$("#title").val(),name: $("#name").val(), city: $("#city").val(), state: $("#state").val(), date: $("#date").val(),duration:$("#duration").val(),pay:$("#pay").val(),type: $("#type").val(),industry:$("#industry").val(),status:$("#status").val(),description:$("#description").val(),qualification: $("#qualification").val() };
var data = JSON.stringify(data);
alert(data);
$.ajax({
type: "POST",
url: "http://localhost:3658/HostingService.asmx/SETPostJobDetails",
data:JSON.stringify(data),//"{'title':" + title + ",'C.Name':" + name + ",'city':" + city + ",'state':" + state + ",'date':" + date + ",'duration':" + duratin + ",'pay':" + pay + ",'industry':" + industry + ",'type':" + type + ",'status':" + status + ",'description':" + description + ",'qualification':" + qualification + "}",
// data: // "{'title':'" + $("#title").val() + "','C.Name':'" + $("#name").val() + "','city':'" + $("#city").val() + "','state':'" + $("#state").val() + "','date':'" + $("#date").val() + "','duration':'" + $("#duration").val() + "','pay':'" + $("#pay").val() + "','industry':'" + $("#industry").val() + "','type':'" + $("#type").val() + "','status':'" + $("#status").val() + "','description':'" + $("#description").val() + "','qualification':'" + $("#qualification").val() + "'}",
contentType: "application/json;charset=utf-8",
processData: false,
dataType: "json",
success: function (data) {
alert('Success');
},
error: function (data, status, error)
Rate this: bad
good
Please Sign up or sign in to vote.

Solution 2

hi all,
 
am solved my problem small modification in script code
<script src="http://code.jquery.com/jquery-latest.js"></script>
 
<script src="http://localhost:3658/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.cdnjs.com/ajax/libs/json2/20110223/json2.js"></script>
 
<script language="javascript" type="text/javascript">
$("#btnok").live("click", function () {
var username = $("#name").val();
var password = $("#password").val();
var clientid = $("#clientid").val();
$.ajax({
type: 'POST',
url: 'HostingService.asmx/SETusers',
data: "{username:" + JSON.stringify(username) + ",password:" + JSON.stringify(password) + ",clientid:" + JSON.stringify(clientid) + "}",
contentType: 'application/json; charset=utf-8',
dataType: 'json',
success: function (data, status) {
alert(data.d);
}
});
});
 

code is working fine..
 
thanks and regards,
  Permalink  

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



Advertise | Privacy | Mobile
Web02 | 2.8.141022.1 | Last Updated 4 Jan 2013
Copyright © CodeProject, 1999-2014
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100