passing data from javaScript to MVC controller view ajax

Question

This is strange, I have no clue why this is not working, no matter what I do, I am always end up receiving null for the action method parameter. Why is that not working?

<input type="button" value="Save" onclick="SaveDocument()"  />

       function SaveDocument() {
            
         var data = "sss";

            $.ajax({
                url: "/Home/Save",
                type: "POST",
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                data: JSON.stringify(data),
                success: function (mydata) {
                    alert("Saved");
                },
                error: function(error)
                {
                    alert('failed');
                    alert(error);
                }
            });
          
        }
    
    </script>

    [HttpPost]
    public ActionResult Save(string data)
    {
        return null;
    }

JSON.stringify("sss") resolves to ""sss"" So this might be a problem, because this is not a valid JSON. — Canilho
– Canilho, Commented Oct 11, 2016 at 21:24
Look at @Jaimin Dave solution ... in your ajax call you have to pass { "data": "some string" } — Piotr Pasieka
– Piotr Pasieka, Commented Oct 12, 2016 at 5:34

Pedram · Accepted Answer · 2016-10-14 09:21:31Z

4

I have created same test code in my local. i get null as you get. You can try with below code. it worked for me.

function SaveDocument() {          
        $.ajax({
            url: "/Home/Save",
            type: "POST",               
            data: {"data" : "sss"},
            success: function (mydata) {
                alert("Saved");
            },
            error: function(error)
            {
                alert('failed');
                alert(error);
            }
        });
    }

edited Oct 14, 2016 at 9:21

Pedram

6,55811 gold badges69 silver badges93 bronze badges

answered Oct 12, 2016 at 4:56

Jaimin Dave

1,22210 silver badges18 bronze badges

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

Comments

Shyju · Accepted Answer · 2016-10-11 22:22:59Z

1

You should pass a js object(key value pair) to the JSON.stringify method, for sending the stringified version of data via your ajax call. The key/object property name should match with your action method parameter name.

The below should work.

data: JSON.stringify({ data:"some string"}),
contentType: "application/json; charset=utf-8",

You might also want to consider a return false; in your js method so that the normal form submission won't happen.

Also since your server action method is returning null, you should not specify "json" as the "dataType" property value for your ajax call. Just remove that line from your ajax call.

Or you can return some valid json data from your action method instead of null

[HttpPost]
public ActionResult Save(string data)
{
  return Json(data);
}

edited Oct 11, 2016 at 22:22

answered Oct 11, 2016 at 21:37

Shyju

220k106 gold badges420 silver badges499 bronze badges

2 Comments

lucas Over a year ago

Hmm, so I replaced data part with what you have specified, still receiving null. Should I change anything else in the action method?

Shyju Over a year ago

It should work. Just put a breakpoint in the method and inspect the value.I just verified it.

Pedram · Accepted Answer · 2016-10-14 09:22:01Z

1

Change the action parameter name to some other meaningful name. data is a reserved keyword in jQuery.

[HttpPost]
public ActionResult Save(string tempName)
{
  return Json(tempName);
}

edited Oct 14, 2016 at 9:22

Pedram

6,55811 gold badges69 silver badges93 bronze badges

answered Oct 12, 2016 at 0:09

prabhu379

693 bronze badges

Comments

ilidiocn · Accepted Answer · 2021-11-03 14:01:33Z

//Javascript method
function postData(parsData)
    {
       var dataToSend = {  ParsData: parsData};

       var ReceivedData= JSON.stringify( dataToSend );
       $.ajax({
                 url: '@Url.Action("SetData")',
                 type: 'POST',
                 data: ReceivedData
       }).done(function (response) 
       {
           console.log(response);

           document.getElementById("result").innerHTML = response.resultHint;
           document.getElementById("amount").innerHTML = response.resultAmount;
           document.getElementById("image").src = response.imageUrl;

        });
    }
//Javascript method Implementation
postData("Fuking code");

//C# Controller

public class ReceivedData
        {
            public string ParsData{ get; set; }
        }

        public class Result
        {
            public string resultHint { get; set; }
            public string resultAmount { get; set; }
            public string imageUrl { get; set; }
            public string decoded { get; set; }
        }
        [HttpPost]
        public ActionResult SetData()
        {
            //var jss = new JavaScriptSerializer();
           // ReceivedData decodedQR = new JavaScriptSerializer().Deserialize<ReceivedData>(receivedData);
            // var dataObject = new JavaScriptSerializer().Deserialize(receivedData);
            // .. do something with data object 
            var jsonFromRequest = new System.IO.StreamReader(Request.InputStream).ReadToEnd();
            ReceivedData decodedQR = Newtonsoft.Json.JsonConvert.DeserializeObject<ReceivedData>(jsonFromRequest);



            Result result= new Result();

            result.resultHint = "Tem certeza que pretende permitir que o João Deposite o valor de ";
            result.decoded = decodedQR.ParsData;
            result.resultAmount = "200 MT";
            result.imageUrl = "https://picsum.photos/id/237/200/300";

            return Json(result);
        }

Credit to: https://mestanzasoft.wordpress.com/2018/03/05/pass-data-from-asp-net-mvc-view-to-controller-with-ajax-and-json/

Collectives™ on Stack Overflow

passing data from javaScript to MVC controller view ajax

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related