Retrieve JSON object and file in MVC

Question

I have the following client-side code to send a JSON object and a file to MVC using JQuery ajax:

var formData = new FormData();
formData.append('logo', logoImg);
var objArr = [];

objArr.push({"id": id, "name": userName});

//JSON obj
formData.append('ocorrencia', JSON.stringify( objArr ));


$.ajax({
    url: "/Ocorrencia/Edit",
    type:"POST",
    processData:false,
    contentType: false,
    data: formData,
        complete: function(data){
                    alert("success");
            }
  });

On the server-side, I'm using ASP.NET MVC.

[HttpPost]
public JsonResult Edit()
{
    // How to retrieve the data and the file here?

I have a model to the "ocorrencia". What do I have to do to retrive the model and the file on the server side?

You could try adding `GlobalConfiguration.Configuration.Formatters.JsonFormatter.MediaTypeMappings.Add(new RequestHeaderMapping("Accept", "text/html", StringComparison.InvariantCultureIgnoreCase, true, "application/json"));` to the _Register_ method of _WebApiConfig.cs_ — schlonzo, May 17 '19 at 13:25

Alexandre Rodrigues · Answer 1 · 2019-05-20T08:27:13.783

1

Try using FromBodyAttribute

using System.Web.Http;

public JsonResult Edit([FromBody]List<Ocorrencia> ocorrencia,HttpPostedFileBase logo)
{
}

Edited

using System.Web.Http can be added by Microsoft.AspNet.WebApi.Core package on NuGet.

edited May 20 '19 at 08:27

answered May 17 '19 at 13:43

Alexandre Rodrigues

690
5
11

I'm having the error "The type or namespace 'FromBody' could not be found". =( – Taian May 17 '19 at 13:56
@Taian you have to use `using Microsoft.AspNetCore.Mvc;` – Alexandre Rodrigues May 17 '19 at 14:01
I'm not using AspNetCore, I'm just using AspNet. – Taian May 17 '19 at 14:06
so use `using System.Web.Http; ` :) – Alexandre Rodrigues May 17 '19 at 14:08
There's no System.Web.Http there too =( – Taian May 17 '19 at 14:30
@Taian, which version of framework are you using? I think you can install Microsoft.AspNet.WebApi.Core package on NuGet. give a look --> [post](https://stackoverflow.com/questions/27819109/system-web-http-missing-after-net-4-5-upgrade) – Alexandre Rodrigues May 17 '19 at 15:39

apomene · Answer 2 · 2019-05-17T13:19:24.357

0

You just need to correctly define the Action signature on your controller and use Newton Json. Like:

[HttpPost]
public JsonResult Edit(List<Ocorrencia> ocorrencia)
{
  var model = JsonConvert.DeserializeObject<List<Ocorrencia>>(ocorrencia);
   ...

Above code assumes that you have a class named Ocorrencia.

edited May 17 '19 at 13:19

answered May 17 '19 at 13:12

apomene

14,282
9
46
72

Jasmin Solanki · Answer 3 · 2019-05-17T13:19:26.170

0

You can get both your logo file and your data

public JsonResult Edit(List<Ocorrencia> ocorrencia,HttpPostedFileBase logoImg)
{
}

edited May 17 '19 at 13:19

answered May 17 '19 at 13:15

Jasmin Solanki

369
7
26

score 0 · Answer 4 · answered May 17 '19 at 13:49

Im going to say that your ajax is wrong, your midding content and dataType

This is an example of what I am using right now and works perfectly

 $.ajax({
        type: "POST",
        headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
        url: url,
        data: JSON.stringify(model),
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (result) {
            ... success code here
        },
            error: function (x, y, z) {
            }
        });

I define my model like

var model = {
             myObject: "somevalue"
             myOtherObject: 2
             }

Url is obvious

and then

[HttpPost]
[Route("sign")]
public async Task<IActionResult> Sign([FromBody]ReportLessonSign model)
{
 // your code in here
}

At this point the json object is passed into my model and handled accordingly.

With regards to your file, how are you trying to pass this up?

When I define the `dataType`, I cannot send the file. The `dataType` must be set to `false`. — Taian, May 17 '19 at 14:49

Retrieve JSON object and file in MVC

4 Answers4