Question

这是我的服务器端方法（通过邮递员获取数据）

public class HomeController : Controller
    {
        public IActionResult Index()
        {
            return View();
        }

        [HttpPost]
        public HttpStatusCode RegisterNewUser(UserModel user)
        {
            return HttpStatusCode.OK;
        }
    }

这是.jsx javascript代码：

 $.ajax({
                url: "Home/RegisterNewUser",
                type: "POST",
                data: JSON.stringify(this.state),
                dataType: "json",
                contentType: "application/json",
                success: function (status) {
                    console.log(status);
                    if (status == '200') {
                        alert('You are registered now !!');
                        this.setState({ Email: '', FirstName: '', LastName: '', LastNamePrefix: '', AcceptTerms: false, CompanyName: '' });
                    }
                    else {
                        alert(' you are not registered !!');
                    }
                    $('#forgetEmailId').val('');
                    $('#divGetPass').css('display', 'none');
                    $('#getPass').val('Send My Password on Email');
                },
                error: function () {
                    alert('Some error occured !!');
                }
            });

这是javascript代码在我的服务器端方法中命中调试指针，但模型没有填充，而如果我使用Postman命中它，则填充模型。

这是完整的反应代码

var RegistrationBox = React.createClass({
    getInitialState: function () {
        return {Email:'', FirstName: '', LastName: '',LastNamePrefix:'',AcceptTerms:false,CompanyName:'' };
    },
    handleEmailChange: function (e) {
        this.setState({Email: e.target.value });
    },
    handleFirstNameChange: function (e) {
        this.setState({ FirstName: e.target.value });
    },
    handleLastNamePrefixChange: function (e) {
        this.setState({ LastNamePrefix: e.target.value });
    },
    handleLastNameChange: function (e) {
        this.setState({ LastName: e.target.value });
    },
    handleCompanyNameChange: function (e) {
        this.setState({ CompanyName: e.target.value });
    },
    handleAcceptChange: function (e) {
        this.setState({ AcceptTerms: e.target.checked });
    },
    toggleIsChecked: function () {
        this.setState({ AcceptTerms: !this.state.checked });
    },
    handleReset: function (e) {
        this.setState({ Email:'', FirstName: '', LastName: '', LastNamePrefix: '', AcceptTerms: false, CompanyName: '' });
    },
    handleSubmit: function (e) {
        e.preventDefault();
        var email = this.state.Email.trim();
        var fName = this.state.FirstName.trim();
        var lName = this.state.LastName.trim();
        var lNamePrefix = this.state.LastNamePrefix.trim();
        var cName = this.state.CompanyName.trim();
        var aTerms = this.state.AcceptTerms;

        if (email == null || fName == null || lName == null ||
            lNamePrefix == null || cName == null || aTerms == null) {
            return;
        }

        if (aTerms == false){
            alert('Please accept Terms');
            return;
        }
        else //Make Ajax Call
        {
            $.ajax({
                url: "Home/RegisterNewUser",
                type: "POST",
                data: JSON.stringify(this.state),
                dataType: "json",
                contentType: "application/json",
                success: function (status) {
                    console.log(status);
                    if (status == '200') {
                        alert('You are registered now !!');
                        this.setState({ Email: '', FirstName: '', LastName: '', LastNamePrefix: '', AcceptTerms: false, CompanyName: '' });
                    }
                    else {
                        alert(' you are not registered !!');
                    }
                    $('#forgetEmailId').val('');
                    $('#divGetPass').css('display', 'none');
                    $('#getPass').val('Send My Password on Email');
                },
                error: function () {
                    alert('Some error occured !!');
                }
            });
        }
    },

    render: function () {
        var chkBoxStyle = {
            width: 25,
            height: 25,
        };

        var chkboxlabel = {
            margin: 8
        };

        return (
            <div className="registrationBox">
                <form method="post" id="user-registration-form" data-parsley-validate className="form-horizontal form-label-left">
                    <div className="form-group">
                        <label className="control-label col-md-3 col-sm-3 col-xs-12">
                            Email <span className="required">*</span>
                        </label>
                        <div className="col-md-6 col-sm-6 col-xs-12">
                            <input onChange={this.handleEmailChange} value={this.state.Email} type="text" id="email" required="required" className="form-control col-md-7 col-xs-12" />
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="control-label col-md-3 col-sm-3 col-xs-12">
                            First Name <span className="required">*</span>
                        </label>
                        <div className="col-md-6 col-sm-6 col-xs-12">
                            <input onChange={this.handleFirstNameChange} value={this.state.FirstName} type="text" id="first-name" required="required" className="form-control col-md-7 col-xs-12" />
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="control-label col-md-3 col-sm-3 col-xs-12">
                            Last Name Prefix<span className="required">*</span>
                        </label>
                        <div className="col-md-6 col-sm-6 col-xs-12">
                            <input onChange={this.handleLastNamePrefixChange} value={this.state.LastNamePrefix} type="text" id="last-name-prefix" name="last-name-prefix" required="required" className="form-control col-md-7 col-xs-12" />
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="control-label col-md-3 col-sm-3 col-xs-12">
                            Last Name <span className="required">*</span>
                        </label>
                        <div className="col-md-6 col-sm-6 col-xs-12">
                            <input onChange={this.handleLastNameChange} value={this.state.LastName} type="text" id="last-name" name="last-name" required="required" className="form-control col-md-7 col-xs-12" />
                        </div>
                    </div>
                    <div className="form-group">
                        <label
                            style={chkboxlabel}
                            className="control-label col-md-3 col-sm-3 col-xs-12">
                            Accept Terms & Conditions &nbsp;
                            <span className="required">*</span>
                        </label>
                        <div className="checkbox col-md-6 col-sm-6 col-xs-12">
                            <div style={{ float: 'left', width: 60, paddingLeft: 5 }}>
                                <input onChange={this.handleAcceptChange} checked={this.state.AcceptTerms} type="checkbox" id="accept"
                                    name="accept" required="required" style={chkBoxStyle} />
                            </div>
                        </div>
                    </div>
                    <div className="form-group">
                        <label className="control-label col-md-3 col-sm-3 col-xs-12">
                            Company Name <span className="required">*</span>
                        </label>
                        <div className="col-md-6 col-sm-6 col-xs-12">
                            <input onChange={this.handleCompanyNameChange} value={this.state.CompanyName} type="text" id="company-name" name="compnay-name" required="required" className="form-control col-md-7 col-xs-12" />
                        </div>
                    </div>
                    <div className="form-group">
                        <div className="col-md-6 col-sm-6 col-xs-12 col-md-offset-3">
                            <button className="btn btn-primary" type="button">Cancel</button>
                            <button onClick={this.handleReset} className="btn btn-primary" type="reset">Reset</button>
                            <button onClick={this.handleSubmit} type="button" className="btn btn-success">Submit</button>
                        </div>
                    </div>
                </form>
            </div>
        );
    }
});

ReactDOM.render(
    <RegistrationBox />,
    document.getElementById('registration-div')
);

这一行 JSON.stringify（this.state）按预期给予一切。

看起来我错过了一些非常小而重要的东西...... :(

用户模型 **

public class UserModel
    {
        public string Email { get; set; }
        public string FirstName { get; set; }
        public string LastNamePrefix { get; set; }
        public string LastName { get; set; }
        public bool AcceptTerms { get; set; }
        public string CompanyName { get; set; }
    }

**

使用Postman这样的POST请求与相同的服务器端代码一起工作正常

数据没有从$ .ajax发布到.Net核心asp.net mvc方法

0 个答案: