Calling aspx page method using jquery

Question

I want to call a function from my code behind (C#) using Jquery but no luck. Below is my code behind function and my jquery: [System.Web.Services.WebMethod] public static VmLowestLatestPrice LowestLatestPrice( string carMake, string carModel, string partsCode) { using (SqlConnection con = DBCS.DBCon()) { SqlCommand cmd = new SqlCommand( "spClaims_GetLowestLatestPrice" , con); cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.AddWithValue( "@carMake" , carMake); cmd.Parameters.AddWithValue( "@carModel" , carModel); cmd.Parameters.AddWithValue( "@partsCode" , partsCode); con.Open(); SqlDataReader rdr = cmd.ExecuteReader(); while (rdr.Read()) { VmLowestLatestPrice price = new VmLowestLatestPrice(); price.LowestPrice = Convert.ToDouble(rdr[ "LowestPrice" ]); price.LatestPricePurchase = Convert.ToDouble(rdr[ "LatestPricePurchase" ]); return price; } rdr.Close(); return null ; } } "text/javascript" > $(document).ready( function () { $( '# ' ).change( function () { var partsCode = $( '#ddlDamageName option:selected' ).val(); var make = $( '#lblMake' ).val(); var model = $( '#lblModel' ).val(); $.ajax({ url: 'create-quotation.aspx/LowestLatestPrice' , method: 'post' , conttentType: 'application/json' , data: '{carMake: ' + make + ', carModel: ' + model + ', partsCode: ' + partsCode + '}' , dataType: 'json' , succes: function (data) { $( '#lblLowest' ).val(data.d.LowestPrice); $( '#lblLatest' ).val(data.d.LatestPricePurchase); }, error: function (error) { alert(error); } }); }); }); My jquery version is 3.0.0. Thanks for any possible assistance.

Rajeesh Menoth · Answer

Hi Hold, In your App_Code folder, with in your RouteConfig.cs comment out the following line or change its RedirectMode to Off and also add the resolve url from the reference link public static void RegisterRoutes(RouteCollection routes) { var settings = new FriendlyUrlSettings(); //settings.AutoRedirectMode = RedirectMode.Permanent; settings.AutoRedirectMode = RedirectMode.Off; routes.EnableFriendlyUrls(settings); } Also change the ajax url like the following way. url: ' ' Reference : https://www.aspforums.net/Threads/449325/Error-Authentication-failed-during-jQuery-Ajax-call-in-ASPNet/ https://stackoverflow.com/questions/29911785/authentication-failed-error-when-calling-web-method-using-ajax https://forums.asp.net/t/1975897.aspx?jquery+ajax+calls+to+asp+net+web+methods+authentication+error+ Note : Once you implemented the above setup then again share us the console output then we will get to know still you are facing the authentication issue.

Rajeesh Menoth · Answer

Hi, I am just repeating you inside the success method you just add "console.log(data)" and open the browser console. Then you will get to know the result I am assuming it's an array of data. Try the following code instead of your code inside the success. $( '#MainContent_lblLowest' ).val(data.d[0].LowestPrice); $( '#MainContent_lblLatest' ).val(data.d[1].LatestPricePurchase);

Rajeesh Menoth · Answer

Hi, Good , Now inside the success method you just add "console.log(data)" because then only we will get to know the property details. Currently the error message is showing as "undefined".

Rajeesh Menoth · Answer

Hi, Remove the resolve url and add the old code in the ajax call and try it. url: 'create-quotation.aspx/LowestLatestPrice' , In both resolve url and normal direct url check the below thoughts. The two points remmeber one is WebMethod should contain inside the Page class not in the service call. Also put break point in the browser level and server side level code that's mean inside the webmethod you will get to know which line you are getting the error code.

Jes Sie · Answer

Hi Rajeesh, Yes, changed it already. Please find the full jquery code below: "text/javascript" > $(document).ready( function () { $( '#MainContent_ddlDamageName' ).change( function () { var pageUrl = ' ' ; var CarDetails = {}; CarDetails.carMake = $( '#MainContent_lblMake.ClientID' ).val(); CarDetails.carModel = $( '#MainContent_lblModel.ClientID' ).val(); CarDetails.partsCode = $( this ).val(); $.ajax({ type: 'POST' , url: pageUrl, data: JSON.stringify(CarDetails), contentType: 'application/json; charset=utf-8' , dataType: 'json' , success: function (data) { // $('#MainContent_lblLowest').val(data.d[0].LowestPrice); // $('#MainContent_lblLatest').val(data.d[1].LatestPricePurchase); console.log(data); }, error: function (error) { alert(error); } }); }); });

Rajeesh Menoth · Answer

Hi, Have you setup Resolve url in the ajax property like the following way ? url: ' '

Jes Sie · Answer

Hi Rajeesh, This is the new error after changing the "Permanent" to "Off" public static class RouteConfig { public static void RegisterRoutes(RouteCollection routes) { var settings = new FriendlyUrlSettings(); //settings.AutoRedirectMode = RedirectMode.Permanent; settings.AutoRedirectMode = RedirectMode.Off; routes.EnableFriendlyUrls(settings); } }

Jes Sie · Answer

Below is my method from my code behind: [System.Web.Services.WebMethod] public static VmLowestLatestPrice LowestLatestPrice( string carMake, string carModel, string partsCode) //string carMake, string carModel, string partsCode { VmLowestLatestPrice price = new VmLowestLatestPrice(); using (SqlConnection con = DBCS.DBCon()) { SqlCommand cmd = new SqlCommand( "spClaims_GetLowestLatestPrice" , con); cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.AddWithValue( "@carMake" , carMake); cmd.Parameters.AddWithValue( "@carModel" , carModel); cmd.Parameters.AddWithValue( "@partsCode" , partsCode); con.Open(); SqlDataReader rdr = cmd.ExecuteReader(); while (rdr.Read()) { price.LowestPrice = Convert.ToDouble(rdr[ "LowestPrice" ]); price.LatestPricePurchase = Convert.ToDouble(rdr[ "LatestPricePurchase" ]); return price; } rdr.Close(); return price; } } Below is the VmLowestLatestPrice class: public class VmLowestLatestPrice { public double LowestPrice { get ; set ; } public double LatestPricePurchase { get ; set ; } } And the CarDetails class: public class CarDetails { public string carMake { get ; set ; } public string carModel { get ; set ; } public string partsCode { get ; set ; } }

Jes Sie · Answer

Hello Rajeesh, I tried your suggested code below and I still got the same error so I removed it and added the console.log(data) $( '#MainContent_lblLowest' ).val(data.d[0].LowestPrice); $( '#MainContent_lblLatest' ).val(data.d[1].LatestPricePurchase); After the console.log(data), this is what it shows:

Bidyasagar Mishra · Answer

do one thing, after success function write the below code console.log(data); then go to the console screen, take a screen shot and paste it .

Bidyasagar Mishra · Answer

can u show me your method again please

Jes Sie · Answer

Hi Bidyasagar, I really appreciate your help. I copied and pasted your code. Still I got the same error ;(

Bidyasagar Mishra · Answer

change the return null to the below code [System.Web.Services.WebMethod] public static VmLowestLatestPrice LowestLatestPrice( string carMake, string carModel, string partsCode) { VmLowestLatestPrice price = new VmLowestLatestPrice(); using (SqlConnection con = DBCS.DBCon()) { SqlCommand cmd = new SqlCommand( "spClaims_GetLowestLatestPrice" , con); cmd.CommandType = CommandType.StoredProcedure; cmd.Parameters.AddWithValue( "@carMake" , carMake); cmd.Parameters.AddWithValue( "@carModel" , carModel); cmd.Parameters.AddWithValue( "@partsCode" , partsCode); con.Open(); SqlDataReader rdr = cmd.ExecuteReader(); while (rdr.Read()) { price.LowestPrice = Convert.ToDouble(rdr[ "LowestPrice" ]); price.LatestPricePurchase = Convert.ToDouble(rdr[ "LatestPricePurchase" ]); return price; } rdr.Close(); return price ; } } declare the 'VmLowestLatestPrice price = new VmLowestLatestPrice();' object starting of the method, then change the return 'null' to 'return price'as the above code . Please compare your method with my method .

Jes Sie · Answer

Hi Rajeesh, I already corrected the spelling error and added the "charset=utf-8". Hi Bidyasagar, I also have done your recommendation as shown below: I got a new error: Uncaught TypeError: Cannot read property 'LowestPrice' of undefined I tested my SP from my DB and it is working. What did I miss?

Rajeesh Menoth · Answer

Hi Hold, First correct the spelling mistake ( conttentType ) in the ajax call. conttentType: 'application/json', Add the following line instead of above line. contentType: "application/json; charset=utf-8" , Also change " type: "post" " to " type: "POST" " Reference : https://www.c-sharpcorner.com/UploadFile/2a6dc5/auto-save-using-Asp-Net-and-ajax/

Bidyasagar Mishra · Answer

Hi Hold, Do one thing , declare a class in the backend, like below Public Class CarDetails{ public string carMake{get;set;} public string carModel{get;set;} public string partsCode{get;set;} } pass the parameter ' CarDetails' inside your method in the scripting file create a object for the variables var CarDetails {}; CarDetails .carMake=your value CarDetails .carModel=your value CarDetails .partsCode=your value then stringify the above object and pass the object

Jes Sie · Answer

Thanks Bidyasagar for your reply. I did change the code according to your recommendation but still I can't get my method. I tried to make an alert to see if i get the parameter value and yes parameters has values. //alert(make + ' ' + model + ' ' + partsCode); "text/javascript" > $(document).ready( function () { $( '#MainContent_ddlDamageName' ).on( 'change' , function () { var partsCode = $( this ).val(); var make = $( '#MainContent_lblMake' ).text(); var model = $( '#MainContent_lblModel' ).text(); //alert(make + ' ' + model + ' ' + partsCode); $.ajax({ url: 'create-quotation.aspx/LowestLatestPrice' , method: 'post' , contentType: 'application/json' , //data: '{carMake: "' + make + '", '+' carModel: "' + model + '", '+' partsCode: "' + partsCode + '"}', data: JSON.stringify({carMake: ' + make + ' , carModel: ' + model + ' , partsCode: ' + partsCode + ' }), dataType: 'json' , succes: function (data) { $( '#MainContent_lblLowest' ).val(data.d.LowestPrice); $( '#MainContent_lblLatest' ).val(data.d.LatestPricePurchase); }, error: function (error) { alert(error); } }); }); }); But for some reason, it did not read the url part.

Bidyasagar Mishra · Answer

your method need to stringify so change in your data to the below format JSON.stringify({carMake: ' + make + ' , carModel: ' + model + ' , partsCode: ' + partsCode + ' }),

Jes Sie · Answer

Maybe sharing my stored procedure will help.