JSON object to ASP.NET MVC

Question

I know there are multiple threads around this issue, but I still can't figure mine out. Can someone please help me figure out why my classObject always has null value? I feel like I've tried everything by now.

My class:

public class ClassAB
{
    [Required]
    [MaxLength(100)]
    [DataType(DataType.Text)]
    public string A{ get; set; }

    [Required]
    [MaxLength(100)]
    [DataType(DataType.MultilineText)]
    public string B{ get; set; }
}

My home controller:

    [HttpPost]
    public ActionResult MyMethod(ClassAB classObject)
    {}

and my Javacript call

let data = {           
      "A": "A",
      "B": "B"          
}

await fetch(`https://localhost:44359/Home/MyMethod/`, {
            method: "POST",
            body: JSON.stringify(data),
            contentType:"application/json", 
            success: (result)=>{
                console.log(result)
            },
            failure: (result) => {
                alert(result)
            }
        });

MeeraWeeks · Accepted Answer · 2020-03-20 10:37:42Z

1

Found the issue. My contentType should have been in header. Modifying request to

await fetch(`https://localhost:44359/Home/MyMethod/`, {
            method: "POST",
            body: JSON.stringify(data),
            headers: {
                 'Content-Type': 'application/json'
            },
            success: (result)=>{
                console.log(result)
            },
            failure: (result) => {
                alert(result)
            }
        });

fixed the issue

answered Mar 20, 2020 at 10:37

MeeraWeeks

10310 bronze badges

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

Comments

JohnMathew · Accepted Answer · 2020-03-20 09:43:59Z

0

Try this

       var data = [{A: 'A',B:'B'}];       
       await fetch(`https://localhost:44359/Home/MyMethod/`, {
                method: "POST",
                body: JSON.stringify(data),
                contentType:"application/json", 
                success: (result)=>{
                    console.log(result)
                },
                failure: (result) => {
                    alert(result)
                }
            });

        [HttpPost]
        public ActionResult MyMethod(List<ClassAB > classObject)
        {}

answered Mar 20, 2020 at 9:43

JohnMathew

5282 gold badges6 silver badges25 bronze badges

5 Comments

MeeraWeeks Over a year ago

I still get null value

JohnMathew Over a year ago

did you try [FromBody]

MeeraWeeks Over a year ago

I did. It didn't help neither

JohnMathew Over a year ago

what happening if you pass a string

MeeraWeeks Over a year ago

Changed contentType to text/html; charset=UTF-8, passed string in body, and still got null

Eric Herlitz · Accepted Answer · 2020-03-20 10:37:57Z

0

WebAPI won't know to model bind an object like that. See https://learn.microsoft.com/en-us/aspnet/core/mvc/models/model-binding?view=aspnetcore-3.1

Try using the [FromBody] attribute

[HttpPost]
public ActionResult MyMethod([FromBody] ClassAB classObject)
{}

When combining this with a proper javascript post this will work, see image.

Sample js

<script>
    var xhr = new XMLHttpRequest();
    var url = "https://localhost:5001/api/default/MyMethod";
    xhr.open("POST", url, true);
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4 && xhr.status === 200) {
            var json = JSON.parse(xhr.responseText);
            console.log(json.email + ", " + json.password);
        }
    };
    var data = JSON.stringify({ "A": "A", "B": "B" });
    xhr.send(data);
</script>

edited Mar 20, 2020 at 10:37

answered Mar 20, 2020 at 9:33

Eric Herlitz

26.4k28 gold badges117 silver badges167 bronze badges

1 Comment

MeeraWeeks Over a year ago

Unfortunately it didn't help. Also, when I temporarily change type in controller, as in MyMethod(string classObject) I still get null

Collectives™ on Stack Overflow

JSON object to ASP.NET MVC

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related