Click here to Skip to main content
12,079,202 members (27,411 online)
Rate this:
 
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>

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 3-Jan-13 0:42am
Edited 3-Jan-13 0:52am
DaveAuld184.6K
v2
Comments
Tadit Dash 3-Jan-13 7:28am
   
Are you facing any problem with this code?
If yes, please tell us the problem.
Santhosh23 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 3-Jan-13 8:43am
   
Write URL like below...
url: "HostingService.asmx/SETPostJobDetails".
Check if it works or not?
Santhosh23 3-Jan-13 9:08am
   
just now am tired.. but not working and already i added [ScriptService] method in .asmx page..
Tadit Dash 3-Jan-13 9:24am
   
Then please post the codes of asmx service.
Santhosh23 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 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 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 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 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)

  Print Answers RSS
Top Experts
Last 24hrsThis month


Advertise | Privacy | Mobile
Web04 | 2.8.160212.1 | Last Updated 4 Jan 2013
Copyright © CodeProject, 1999-2016
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