AJAX sending data to backend C# issue

Question

Presently I am having the issue of trying to pass information back to the behind code, in this case a user selected name from a list. I have tried setting the data VN to an object and passing that, but that did not work either. Presently it seems to never send it to the behind code as it errors out instead. An example value for VN is: "Location1 Building"

This worked fine when the data part of the AJAX call wasn't used and the query was hardcoded into the behind code. I believe I am misunderstanding exactly how this functions. I have read over 8 similar threads but the fixes on those didn't quite work here either and lead to errors also listed below.

JAVASCRIPT

$("#btnClient_Report").click("click", function CallService() {
  var Cn = document.getElementById('client_input'); 
  var VN = Cn.value;
    
    
    
        alert("C1 Name: " + VN);
    $.ajax({
            traditional: true,
            type: "POST",
            url: '/ClientChart.aspx/Getdata',
            data: JSON.stringify(VN), 
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            processData: true,
            success: function (msg) {
                alert("Success: " + msg.d);
                CCData = msg.d;
                
                bindClientChart();
            },
            error: function(ermsg){
                alert(ermsg.responseText);
            }
        });
    });

BEHIND CODE - C#

[WebMethod]
 public static string[] Getdata(string VN) //test the connection and rerieve data requested. 
        {
            var loc_name = VN;
   
            //connect to DB and query more info.

At present the error is "Cannot convert object of type \u0027System.String\u0027 to type \u0027System.Collections.Generic/IDictonary'2..."

though attempting to change the ajax data to VN from JSON.stringify(VN) leads to "INVALID JSON Primitive" error.

Attempting to change VN to a simple object like var VN = { ID:[Cn.value]}; leads to a similar error.

The jquery $.AJAX function documentation says is accepts type string, so I would like to learn about how I am messing up and understand this better. Thank you for any and all help!

Answer 1

After trial and error I learned my mistake was that the ajax data line needed to be:

data: '{VN:"' + $("#client_input").val() + '"}',

Inserting the string alone doesn't work properly as it needs the identifier even if you try passing a string as the same identifier name. Hop this may help someone in future learn from my foolish mistake

Answer 2

Do Something like this to Pass string to method..

  $.ajax({
                type: "POST",
                url: "ClientChart.aspx/Getdata",
                contentType: "application/json; charset=utf-8",
                data: "{'VN':'" + VN + "'}",
                async: true,
                cache: true,
                dataType: "json",
                success: function (data) {
                alert("Success: " + data.d);
                bindClientChart();
            },
            error: function(ermsg){
                debugger;
                alert(ermsg.d);
            }
        });