Как отправить данные в .NET Core Web API с помощью метода fetch () javascript - PullRequest
Новая
       15

Как отправить данные в .NET Core Web API с помощью метода fetch () javascript

2 голосов
/ 27 сентября 2019

Я пытаюсь отправить данные из внешнего интерфейса React в метод .NET Core Web API.Я размещаю сообщения с помощью fetch() метода javascript.Когда я устанавливаю точку останова в .NET-коде для анализа значений viewModel, все его члены равны нулю.

Я также попытался передать простую строку вместо модели представления, но это также пусто.

Я попытался добавить атрибут [FromBody] перед параметром.

ContactForm.js 

onSubmit(e) {
    e.preventDefault();

    let data = {
        viewModel: {
            name: this.state.name,
            serviceRequested: this.state.interest,
            email: this.state.email,
            phone: this.state.phone,
            contactPreference: this.state.preference
        }
    };

    fetch('api/Contact/Contact', {
        method: "POST",
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(data)      
    })
    .then(response => {
        response.text().then(function (text) {
            alert(text);
        });
    });

}

ContactController.cs 

private readonly string successMessage = "success";
private readonly string modelStateMessage = "Invalid input.";

[HttpPost("[action]")]
public ActionResult Contact(ContactFormViewModel viewModel)
    {
        if (ModelState.IsValid)
        {

        }
        else 
        {
            return Content(modelStateMessage);
        }

        return Content(successMessage);
    }

ContactFormViewModel.cs 

public class ContactFormViewModel {

    [Required]
    public string Name {get;set;}

    public string ServiceRequested {get; set;}

    [DataType(DataType.EmailAddress)]
    public string Email {get;set;}

    [DataType(DataType.PhoneNumber)]
    public string Phone {get;set;}

    public string ContactPreference {get;set;}

    [StringLength(1000)]
    public string Message {get;set;}

}

Я ожидаю, что данные будут заполнять свойства моделей представления, но все они равны нулю.Инструменты разработчика Firefox показывают, что Запрос передает JSON-параметры в теле.

Ответы [ 2 ]

1 голос
/ 27 сентября 2019

Измените свой код с: 

let data = {
    viewModel: {
        name: this.state.name,
        serviceRequested: this.state.interest,
        email: this.state.email,
        phone: this.state.phone,
        contactPreference: this.state.preference
    }
};

На: 

let data = {                    
    name: this.state.name,
    serviceRequested: this.state.interest,
    email: this.state.email,
    phone: this.state.phone,
    contactPreference: this.state.preference
};

И сохраните свой клиентский код для размещения строки json с application/json в качестве типа содержимого.Получите значение на стороне сервера с помощью [FromBody]: 

[HttpPost("[action]")]
public ActionResult Contact([FromBody]ContactFormViewModel viewModel)
{

   ....
}
0 голосов
/ 27 сентября 2019

Я всегда использую метод, чтобы сделать метод статическим и асинхронным, вы можете соответствующим образом изменить, то есть удалить статический и асинхронный, если вам это не нужно. Если у вас есть запрос, ответьте:

Ниже приведен код:

  static async post(URL, body) {
    debugger;
    const response = await fetch(`${API_URL_PREFIX}/api/${url}`, {
        method: 'POST',
        headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
            Pragma: 'no-cache',
        },
        body: JSON.stringify(body),
        credentials: 'include',
        mode: 'cors',
    })

    return response.ok;
}
...