How to Call ASP.Net method with values from Javascript

Question

I am trying to make a call to a C# function in the page's .aspx.cs file called testFun() from my javascript code and I want to pass 2 values to it. My javascript code looks a bit like this:

var questionsDone = 45;
var questionsCorrect = 23;
var exercisesDone = 65;
var exercisesCorrect = 12;
alert("<%= testFun() %>");

And my method to which I want to pass values looks like this:

public string testFun(double questionScore, double exerciseScore){
    return "done"; 
}

What I want to do is pass 2 values, first one being (questionsCorrect/questionsDone) and the seconds one being (exercisesCorrect/exercisesDone). Could anyone help me figure out how to do so?

Make a reference to the JQuery Library [link](https://jquery.com/download/) then use standard Ajax post to your method. — bilpor, Jun 27 '16 at 15:08
Have you looked into using a [Web Method](https://msdn.microsoft.com/en-us/library/4ef803zd(v=vs.90).aspx) — zgood, Jun 27 '16 at 15:08
Maybe you will find this [post](http://codingstill.com/2012/02/asp-net-and-ajax-all-about-update-panels-web-methods-page-methods-and-jquery/) helpful — Tasos K., Jun 27 '16 at 17:12

score 5 · Accepted Answer · edited Jun 27 '16 at 15:29

5

Couple of different ways to do this but I like to use Ajax to call "WebMethods"

You need to have a script manager within your main form with enablepagemethods set to true

<asp:ScriptManager ID="scm" runat="server" EnablePageMethods="true" />

cs

[WebMethod]
public static string search()
{
    return "worked";
}

Javascript (JQuery Ajax. YOu can use whatever lib you want)

   $.ajax({
        type: "POST",
        url: "MyPage.aspx/search",
        data: data,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            alert(msg)
        }
    });

-Edit

To pass parameters, you can do something like this and send it as your post body. The ASP.NET engine will automatically fill it into your method parameters assuming that the names are the same within your javascript object

    var post = {
    questionScore: 5,
    exerciseScore: 5
    }

   $.ajax({
        type: "POST",
        url: "MyPage.aspx/testFun",
        data: post,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (msg) {
            alert(msg)
        }
    });

cs

public static string testFun(double questionScore, double exerciseScore){ //both params should be 5
    return "done"; 
}

edited Jun 27 '16 at 15:29

Angelos Chalaris

6,611
8
49
75

answered Jun 27 '16 at 15:09

tier1

6,303
6
44
75

I do no understand where I would put the passed values. Could you please elaborate? – Angelos Chalaris Jun 27 '16 at 15:10
@AngelosChalaris See my edit. Does that make sense? – tier1 Jun 27 '16 at 15:13
But how do I sent it as the post body exactly? Sorry for the follow-up questions, but turns out I am not very familiar with this kind of thing. – Angelos Chalaris Jun 27 '16 at 15:15
@AngelosChalaris Added another example to hopefully make it more clear – tier1 Jun 27 '16 at 15:16
Keep in mind, this is a JQuery post request. Just wanted to make that clear since you said you are not very familiar. You would have to include the JQuery library to make this work. Alternatively use vanilla javascript as shown here: http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery – tier1 Jun 27 '16 at 15:18
I am familiar with jQuery, very much so, but AJAX requests not so much. Your latest edit does not work, it logs `ReferenceError: data is not defined`. How do I fix this? – Angelos Chalaris Jun 27 '16 at 15:19
1

He called his `data` object `post` so you would have to change it to `data: post,` in your ajax request – zgood Jun 27 '16 at 15:23
Now I get a `500 Internal Server Error` saying `Invalid JSON primitive: questionScore.`What exactly should I do? – Angelos Chalaris Jun 27 '16 at 15:35
1

@AngelosChalaris Could be a couple of things. Try to stringify your data before sending it: data: JSON.stringify(post) – tier1 Jun 27 '16 at 15:38
@AngelosChalaris For debugging sake, you might also want to try to change your function parameters to strings until you get data to pass back and forth. – tier1 Jun 27 '16 at 15:39
Turning the data into strings seems to have worked perfectly fine! Thank you very very much for your help and your time! – Angelos Chalaris Jun 27 '16 at 15:42

How to Call ASP.Net method with values from Javascript

1 Answers1