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
– schlonzo, Commented May 17, 2019 at 13:25

Alexandre Rodrigues · Accepted Answer · 2019-05-20 08:27:13Z

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, 2019 at 8:27

answered May 17, 2019 at 13:43

Alexandre Rodrigues

7305 silver badges12 bronze badges

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

6 Comments

Taian Over a year ago

I'm having the error "The type or namespace 'FromBody' could not be found". =(

Alexandre Rodrigues Over a year ago

@Taian you have to use using Microsoft.AspNetCore.Mvc;

Taian Over a year ago

I'm not using AspNetCore, I'm just using AspNet.

Alexandre Rodrigues Over a year ago

so use using System.Web.Http; :)

Taian Over a year ago

There's no System.Web.Http there too =(

|

apomene · Accepted Answer · 2019-05-17 13:19:24Z

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, 2019 at 13:19

answered May 17, 2019 at 13:12

apomene

14.4k10 gold badges51 silver badges76 bronze badges

Comments

Jasmin Solanki · Accepted Answer · 2019-05-17 13:19:26Z

0

You can get both your logo file and your data

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

edited May 17, 2019 at 13:19

answered May 17, 2019 at 13:15

Jasmin Solanki

4192 gold badges10 silver badges26 bronze badges

Comments

Simon Price · Accepted Answer · 2019-05-17 13:49:02Z

0

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?

answered May 17, 2019 at 13:49

Simon Price

3,2716 gold badges48 silver badges109 bronze badges

1 Comment

Taian Over a year ago

When I define the dataType, I cannot send the file. The dataType must be set to false.

Collectives™ on Stack Overflow

Retrieve JSON object and file in MVC

4 Answers 4

6 Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related