How to pass data to MVC Controller using React.js?

Question

I'm doing a project using React.js as Front End and Asp.net MVC as Back end Process.

Now my query is i have to pass user input values to Controller Method. . I was googled it but i didn't find any solutions.

Here it is my Controller Method:

// POST: LoginController/Create
        [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Create(LoginModel objModel)
        {
            try
            {
                return RedirectToAction(nameof(Index));
            }
            catch
            {
                return View();
            }
        }

This is React.js Code

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export class Login extends Component {
    static displayName = Login.name;

    constructor(props) {
        super(props);
        this.state = { strToken: '', strMessage: '', strUserName: '', strPassword: '' };
        this.UserhandleChange = this.UserhandleChange.bind(this);
        this.PwdhandleChange = this.PwdhandleChange.bind(this);
        this.LoginClick = this.LoginClick.bind(this);
    }

    UserhandleChange(event) { this.setState({ strUserName: event.target.value }); }
    PwdhandleChange(event) { this.setState({ strPassword: event.target.value }); }

    LoginClick(event) {
        event.preventDefault();
        const data = new FormData();
        
        if (this.state.strUserName == "admin" && this.state.strPassword == "admin") {
            data.append("UserName", this.state.strUserName);
            data.append("Password", this.state.strPassword);

            var xhr = new XMLHttpRequest();
            xhr.open('post', this.props.Url, true);
            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhr.onreadystatechange = function () {
                if (xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200) {
                    // Do something on success
                }
            }
            xhr.send(data);
        }
        else {
            this.setState({
                strMessage: "InValid UserName/ Password"
            });
        }
    }

    render() {
        return (
            <form onSubmit={this.LoginClick}>
                <div class="container">
                    <label>UserName</label>
                    <br />
                    <input type="text" value={this.state.strUserName} onChange={this.UserhandleChange}></input>
                    <br />
                    <br />
                    <label>Password </label>
                    <br />
                    <input type="password" value={this.state.strPassword} onChange={this.PwdhandleChange}></input>
                    <br />
                    <br />
                    <button type="submit" className="btn btn-primary">Login &nbsp; </button>
                    <button type="reset" className="btn btn-danger">Cancel &nbsp; </button>
                    <br />
                    <br />
                    <p aria-live="polite">Note :  <strong>{this.state.strMessage}</strong></p>
                </div >
            </form>
        );
    }
}

ReactDOM.render(<Login url="https://localhost:44384/Login/Create" />, document.getElementById('root'));

I don't Know how to do that if anyone knows please help me to achieve that.

Thank You.

Answer 1

You can try using axios library and send http POST request like this

axios.post('/login', {
    username: '[email protected]',
    password: 'Test@123'
  })
  .then(function (response) {
    // login success
    console.log(response);
  })
  .catch(function (error) {
    // error handling
    console.log(error);
  });

Official Doc: https://axios-http.com/docs/post_example

You can add axios library using npm install axios command.