Trouble posting form data to MVC4 controller action method using jQuery

Question

I have a form with a textarea and when trying to send the information, I am using JSON.stringify, I get errors. Here is the code:

        $.ajax({
            type: "POST",
            dataType: "json",
            data: JSON.stringify({
                reportid: data["reportid"], //Guid
                assessmentId: data["assessmentId"], //Guid
                title: data["title"], //string
                body: data["body"], //string
                section: data["section"], //string
                reportsection: data["reportSection"] //string
            }),
            url: "/Assessments/ModifyAssessmentTemplateText",
            success: function (data) {
                lastModified = data["LastModified"];
                updateLastModified(lastModified);
                alert(data);
            }
        });

My controller method was set up as follows:

[POST("ModifyAssessmentTemplateText")]
[AjaxOnly]
public JsonResult ModifyAssessmentTemplateText(Guid reportid, Guid assessmentid, string title, string body, string section, string reportSection)
{
//...
}

I get a 500 server error.

I know that when I tried testing, and had only one parameter, reportid, and had my method accept a string, it worked. But when I set it to Guid I get the 500 error. Is there a way I should be parsing the JSON server side?

EDIT:

Note: when I don't use data, and I do url: "/Assessments/ModifyAssessmentTemplateText?reportid=" + reportid

it works with no problem.

Try the parameter as nullable (Guid? reportid, Guid? assessmentid... — vinodpthmn
– vinodpthmn, Commented May 7, 2013 at 20:19

Nick Albrecht · Accepted Answer · 2013-05-17 16:44:59Z

1

I think the answers so far are dancing around the point. Your data doesn't have to be a string at all, have you tried this?

$.ajax({
    type: "POST",
    dataType: "json",
    data: {
        reportid: data["reportid"], //Guid
        assessmentId: data["assessmentId"], //Guid
        title: data["title"], //string
        body: data["body"], //string
        section: data["section"], //string
        reportsection: data["reportSection"] //string
    },
    url: "/Assessments/ModifyAssessmentTemplateText",
    success: function (data) {
        lastModified = data["LastModified"];
        updateLastModified(lastModified);
        alert(data);
    }
});

answered May 17, 2013 at 16:44

Nick Albrecht

17k11 gold badges72 silver badges101 bronze badges

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

Comments

Tomas Kirda · Accepted Answer · 2013-05-07 20:09:09Z

1

You don't have to call JSON.stringify, because you are expecting parameters so it should be key value pairs and you are trying to POST JSON object.

You may crate parameter that matches JavaScript object and then use JSON.stringify, this way model binder will try to deserialize it into the object.

answered May 7, 2013 at 20:09

Tomas Kirda

8,4233 gold badges33 silver badges24 bronze badges

5 Comments

appsecguy Over a year ago

I need to do stringify for when I send a string that has newlines and special characters though.

Tomas Kirda Over a year ago

jQuery will convert it into proper key value pairs and encode the content. Stringify converts JavaScript object into JSON string literal representation.

appsecguy Over a year ago

So shouldnt $.ajax({ type: "POST", dataType: "json", data: { reportid: data["reportid"] }, contentType: "application/json; charset=utf-8", url: "/Assessments/ModifyAssessmentTemplateText", success: function (data) { lastModified = data["LastModified"]; updateLastModified(lastModified); } }); work?

appsecguy Over a year ago

The error from ELMAH is: System.ArgumentException: Invalid JSON primitive: reportid.

Tomas Kirda Over a year ago

Of course because it can not bind JSON string to any of your paramters. dataType:'json', refers to data type returned by your server. Leave everything as is just remove JSON.stringify.

Moo-Juice · Accepted Answer · 2013-05-17 16:21:23Z

1

So I managed to find the answer on http://encosia.com/asmx-scriptservice-mistake-invalid-json-primitive/. Essentially, what I needed to do was encapsulate the JSON string in quotation marks. This made the string a JSON string rather than a JavaScript Object literal.

Quoted from the site:

The solution is as simple as two single-quotes:
// RIGHT
$.ajax({
  type: 'POST',
  contentType: 'application/json',
  dataType: 'json',
  url: 'WebService.asmx/Hello',
  data: '{ FirstName: "Dave", LastName: "Ward" }'
});

Did you spot the difference? Instead of a JavaScript object literal, the data parameter is a JSON string now. The difference is subtle, but helpful to understand. Since it’s a string, jQuery won’t attempt to perform any further transformation, and the JSON string will be unimpeded as it is passed to the ASMX ScriptService.

edited May 17, 2013 at 16:21

Moo-Juice

38.9k11 gold badges83 silver badges132 bronze badges

answered May 7, 2013 at 20:32

appsecguy

1,0493 gold badges21 silver badges37 bronze badges

2 Comments

Tomas Kirda Over a year ago

But this is the same as his sample, since JSON.Stringify converts object into JSON string.

appsecguy Over a year ago

When I did JSON.stringify though for some reason it didnt work, not sure why.

Smith · Accepted Answer · 2013-05-07 20:10:45Z

0

Have you tried posting the guid as a string and parsing out a Guid on the server?

answered May 7, 2013 at 20:10

Smith

3,1943 gold badges21 silver badges25 bronze badges

Comments

webdeveloper · Accepted Answer · 2013-05-07 20:18:08Z

0

If you trying to send data as json. You should know:

Specifying the Data Type for AJAX Requests

json - Evaluates the response as JSON and sends a JavaScript Object to the success callback.

But how binder detect that it is json request?

By contentType: 'application/json; charset=utf-8'

answered May 7, 2013 at 20:18

webdeveloper

17.3k3 gold badges51 silver badges47 bronze badges

3 Comments

appsecguy Over a year ago

Thanks for the tip. However, even after adding it all it did not help. $.ajax({ type: "POST", dataType: "json", data: { reportid: data["reportid"] }, contentType: "application/json; charset=utf-8", url: "/Assessments/ModifyAssessmentTemplateText", success: function (data) { lastModified = data["LastModified"]; updateLastModified(lastModified); } });

webdeveloper Over a year ago

@pendraggon87 Create model object for posted data and send all fields. And then show us error message.

appsecguy Over a year ago

I am trying to avoid the overhead of creating an object model just for this. It seems strange that if I can send it through the url it works, but if I do it through body (data) it does not. The GUIDs are necessary for the function to do a couple lookups and determine if it should perform a modification

Collectives™ on Stack Overflow

Trouble posting form data to MVC4 controller action method using jQuery

5 Answers 5

Comments

5 Comments

2 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

5 Comments

2 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related