Calling aspx page method using jquery

Jes Sie

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 () {
$('#<%=ddlDamageName.ClientID %>').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.

19 Replies

Know the answer? Post it — somebody with the same question will find it here.

Rajeesh Menoth7y ago
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.
0
Jes Sie7y ago
Hi Rajeesh,

Yes, changed it already. Please find the full jquery code below:
"text/javascript">
        $(document).ready(function () {
            $('#MainContent_ddlDamageName').change(function () {
                var pageUrl = '<%= ResolveUrl("create-quotation.aspx/LowestLatestPrice") %>';

                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);
                    }
                });

            });
        });
0
Rajeesh Menoth7y ago
Hi,

Have you setup Resolve url in the ajax property like the following way ?
url: '<%= ResolveUrl("create-quotation.aspx/LowestLatestPrice") %>'
0
Jes Sie7y ago
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);
        }
    }
0
Rajeesh Menoth7y ago
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: '<%= ResolveUrl("create-quotation.aspx/LowestLatestPrice") %>'
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.
0
Jes Sie7y ago
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; }
        }
0
Jes Sie7y ago
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:
0
Bidyasagar Mishra7y ago
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 .
0
Rajeesh Menoth7y ago
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);
0
Rajeesh Menoth7y ago
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".
0
Jes Sie7y ago
Maybe sharing my stored procedure will help.

-1
Bidyasagar Mishra7y ago
can u show me your method again please
0
Jes Sie7y ago
Hi Bidyasagar, I really appreciate your help.

I copied and pasted your code. Still I got the same error ;(

0
Bidyasagar Mishra7y ago
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 .
0
Jes Sie7y ago
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?
0
Rajeesh Menoth7y ago
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/
0
Bidyasagar Mishra7y ago
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
0
Jes Sie7y ago
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.
0
Bidyasagar Mishra7y ago
your method need to stringify so change in your data to the below format
JSON.stringify({carMake: ' + make + ', carModel: ' + model + ', partsCode: ' + partsCode + '}),
0