Question 397788 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How can i hadndle json data for registraton in my asp.net web api

Microsoft.AspNetCore.Http.BadHttpRequestException: Failed to read
parameter "RegisterRequest registration" from the request body as
JSON. —> System.Text.Json.JsonException: JSON deserialization for
type ‘Microsoft.AspNetCore.Identity.DTO.RegisterRequest’ was missing
required properties, including the following: password at
System.Text.Json.ThrowHelper.ThrowJsonException_JsonRequiredPropertyMissing(JsonTypeInfo
parent, BitArray requiredPropertiesSet) at
System.Text.Json.Serialization.Converters.ObjectWithParameterizedConstructorConverter`1.OnTryRead(Utf8JsonReader&
reader, Type typeToConvert, JsonSerializerOptions options, ReadStack&
state, T& value)

I tried this

const data = { registration: { email: '[email protected]', password:'asdfghjkj' } };
const response = await fetch('https://localhost:7290/register',
        {
          method: 'POST',
          headers: { 
           'Content-Type': 'application/json',
           'Accept': '*/*' 
          },
          body: JSON.stringify(data)
Tags:

2

Answers


  1. 0

    You are missing required properties. The JSON structure you are sending doesn’t match the structure of the RegisterRequest object in your web API.

    Double check your RegisterRequest class, then double check the JSON Structure — these two things should match 1 to 1.

    The JSON you are sending should match the RegisterRequest class props without nesting under a registration property. Update your client side code to send the correct JSON format as well.

    You can also add more elegant error handling to catch these errors sooner and in a more verbose way.

    Login or Signup to reply.
  2. 0

    How can i hadndle json data for registraton in my asp.net web api

    Acoroding to your error message, it might be happen due to couple of reason.

    First of all, if the request model doesn’t match with your javascript post method structure.

    For instance, you are binding your post request model like below:

    const data = { registration: { email: '[email protected]', password: 'asdfghjkj' } };

    So upon to your Javascript structure, you should have following API request model, other than you might encounter request failure or error:

    public class RegistrationModel
{
    public string Email { get; set; }
    public string Password { get; set; }
}

public class RegisterRequest
{
    public RegistrationModel Registration { get; set; }
}

    Controller action:

    [HttpPost]
public IActionResult Register([FromBody] RegisterRequest registration)
{

    if (registration == null || string.IsNullOrWhiteSpace(registration.Registration.Email) || string.IsNullOrWhiteSpace(registration.Registration.Password))
    {
        return BadRequest("Invalid registration data.");
    }

    return Ok(new { Message = "Registration successful!" });
}

    Output:

    enter image description here
    enter image description here

    Note: If you have above code, you would be able to resolve your issue. However, If I were the developer, I would have refactored the code as following:

    Javascript:

    const email = document.getElementById('email').value;
const password = document.getElementById('password').value;

const data = { email: email, password: password };
const response = await fetch('https://localhost:7246/register', {
    method: 'POST',
    headers: {
        'Content-Type': 'application/json',
        'Accept': '*/*'
    },
    body: JSON.stringify(data)
});

    Request Model:

    public class RegisterRequest
{
    public string Email { get; set; }
    public string Password { get; set; }
}

    Controller:

    [ApiController]
[Route("[controller]")]
public class RegisterController : ControllerBase
{
    [HttpPost]
    public IActionResult Register([FromBody] RegisterRequest registration)
    {
        if (registration == null || string.IsNullOrWhiteSpace(registration.Email) || string.IsNullOrWhiteSpace(registration.Password))
        {
            return BadRequest("Invalid registration data.");
        }


        return Ok(new { Message = "Registration successful!" });
    }

   
}

    Output:

    enter image description here
    enter image description here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search