Call C# server side from Javascript with parameter passing

Question

I know this question has been asked before but nothing so far has helped me reach a final solution.

I have an ASP web page that has numerous buttons that perform different functions. I also have a dropdown box that contains a list of objects. When I select an item from the dropdown, the button functionality remains the same in each button, however I would like a function called on the server in my C# code that receives a couple of key variables that I can then pass to an API. If only one parameter can be passed, I could pass it as a JSON string, so this is not a restriction any possible solutions should be concerned with.

What I am having trouble with is determining the best way to do this. I have read some possibilities in things like using AJAX calls, an OnCommand attribute inside the asp button, WebMethods and a few other more obscure possibilities. I would like to avoid the hidden field approach as it does seem pretty hacky. That being said, I am open to changing my thoughts if people really do think it is the best way.

The relevant parts of my code are as follows:

Javascript code

function testAJAX()
{
    //The console.log was called successfully, however the ProcessData function was never hit correctly
    /*console.log("hello");     
    PageMethods.ProcessData("Hello", successAjax, failAjax);*/

    $.ajax({ 
        type: "POST", 
        url: "UserManagement.aspx/ProcessData", 
        data: '{data:"Hello"}', // passing the parameter 
        contentType: "application/x-www-form-urlencoded; charset=utf-8", 
        dataType: "text", 
        success: function(retValue) {
            // Do something with the return value from.Net method
            alert(retValue);
            } 
        }); 
}

function successAjax(response) {
    alert(response.get_message());
}

function failAjax(response) {
    alert(response.get_message());
}

C# code (debugging was attempted on data += " from the server";)

[WebMethod(EnableSession = true)]
public static string ProcessData(string data)
{
    data += " from the server";
    return data;
}

Calling the Javascript code

<form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" EnablePageMethods="true" runat="server" />
    <button onclick="testAJAX()">Test AJAX</button>
</form>

For the life of me, I simply can not get ANY Ajax or Web Method calls hitting my breakpoint in the server side code. I have tried:

Copying the AJAX from the top answer in this and changing the variables so that it points to my function (url: "UserManagement.aspx/ProcessData",)
Moving my script tag to be inside the body tag
Adding a ScriptManager to my form
Made sure I was not using a Master page as apparently that changes things
Using PageMethods.ProcessData(). This seems to be the closest, as it actually did hit the success function, but didn't seem to hit my ProcessData function...

I'm really at a loss as to why it is not debugging on the server, if anyone has any suggestions, that would be fantastic. I'm assuming I am missing something small, but it certainly seems to be enough to halt progress. Once I can debug, I should be good to go. Thank you all in advance.

Have you tried to test your server endpoint going to "UserManagment.aspx/ProcessData" directly on your web browser? Also, you are sending a plain string in the ajax data, not a json. And you are defining the ajax response as json (but the server is adding a plain string to the response, I think this will give an error too). — Ion Gorostizu
– Ion Gorostizu, Commented Jan 8, 2019 at 8:15
@IonGorostizuAlbeniz I haven't tried that, I wasn't aware that you could but it makes sense now that you mention it. I will try it out and report back. Thanks for the tips! — Stevo
– Stevo, Commented Jan 8, 2019 at 8:17
I think in the ajax request the type must be GET instead of POST. — Gaurav
– Gaurav, Commented Jan 8, 2019 at 8:39

ArunPratap · Accepted Answer · 2019-02-12 12:53:35Z

0

you are not passing your data correctly

// data:"{data:Hello}", its not correct

remove and do that like this

data: { data: Hello },

and you can pass Hello variable like this

var Hello = "test";
        $.ajax({
            type: "POST",
            url: 'UserManagement.aspx/ProcessData',
            data: { data: Hello },               
            contentType: "application/json; charset=utf-8",
            success: function (data) {
                console.log(data);
            },
            failure: function (response) {
                alert(response.d);
            }
        });

edited Feb 12, 2019 at 12:53

answered Jan 8, 2019 at 8:08

ArunPratap

5,0807 gold badges28 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Stevo Over a year ago

Cheers for the suggestion, I've fixed that up (silly mistake on my part), but I am still not hitting the function on the server. I will edit that part of the code in my question to prevent any confusion.

Timothy Groote Over a year ago

the data prop does not have to be a string, you can just get rid of all that nasty concatenation and do this : $.ajax({type: 'post', url:'something', data : {data:Hello}});

Collectives™ on Stack Overflow

Call C# server side from Javascript with parameter passing

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related