jQuery + MVC pass string to controller

Question

I'm trying to do something I would think is fairly simple, but I must be missing the syntax.

function removeFile(filename) {
    var json = { "fileName": filename };
    $.ajax({
        type: 'post',
        url: "home/RemoveFile",
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(json),
        success: function(result) {
            alert("good:" + result);
        },
        failure: function (response) {
            alert("bad:" + response.d);
        }
    });    
}

And to receive the filename in the controller:

[HttpPost]
public JsonResult RemoveFile(string fileName)
{
    if (fileName == null) return Json(" {'result' : 'failure'}");
    FileUpload fileUpload = new FileUpload(_hostingEnvironment, _settings);
    Boolean removeFile = fileUpload.RemoveFile(fileName);
    return Json(" {'result' : 'ok'}");
}

the fileName is always null, yet Fiddler shows the Json being passed as:

- JSON
     -fileName=2851cd1d-f364-4f00-8824-0792cf6ca598\Capture-after.JPG

What am I doing wrong?

Are you sure ? With the code you posted, it won't be null. (just tested it) — Shyju
– Shyju, Commented Nov 10, 2017 at 18:11

Korio · Accepted Answer · 2017-11-10 18:03:58Z

2

Ty to remove JSON.stringy from the data. Since you are putting "dataType:json" it's expecting a json.

answered Nov 10, 2017 at 18:03

Korio

844 bronze badges

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

1 Comment

Shyju Over a year ago

dataType is used by client, not server. Server uses contentType header

Shyju · Accepted Answer · 2017-11-10 18:39:43Z

1

When you specify the contentType as application/json, the $.ajax method will send data in the request body.

Since you are sending a lean-flat data object, send the js object in the data property. The $.ajax method will convert this js object to Form Data when the call is made.

var json = { fileName: 'myfile.png' };
$.ajax({
    type: 'post',
    url: "home/RemoveFile",
    data: json,
    success: function(result) {
        alert("good:" + result);
    },
    failure: function (response) {
        alert("bad:" + response.d);
    }
});

Use a JSON string of your object ( the result of JSON.stringify(json)) as data when you want to send a complex js object ( not just a lean-flat view model). Make sure you are specifying the contentType header to application/json so that the server know what type of data it is receiving and how to do model binding.

Also do not build a json string in server. Let the json serializer does that for you. Pass an anonymous object to your Json method.

return Json(new {result = "ok"});

Your existing code where you are sending the JSON string as the data and contentType as application/json, will work if you have a view model with fileName property.

public class MyViewModel
{
    public string FileName { set; get; }
}

and in the action method. Use this view model as the parameter along with [FromBody] decorator.

[HttpPost]
public JsonResult RemoveFile3([FromBody]MyViewModel f)
{       
    return Json(new {result = f.FileName});
}

edited Nov 10, 2017 at 18:39

answered Nov 10, 2017 at 18:20

Shyju

220k106 gold badges420 silver badges499 bronze badges

3 Comments

P-Finny Over a year ago

This worked. Thanks!!! I'm still a bit confused why removing contentType and dataType resulted in posting the data correctly to the controller?!?!

Shyju Over a year ago

dataType is used by the client (when the response coming back). contentType is used by the server for model binding (mapping the form post data to the parameter of the method). For complex type you need to specify contentType as application json as you can send complex data in the request body

Shyju Over a year ago

jquery will intelligently guess the dataType from the response coming back. Hence it is not mandatory in this case. Take a look at this post stackoverflow.com/questions/47122518/…

Collectives™ on Stack Overflow

jQuery + MVC pass string to controller

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related