jQuery AJAX请求没有将值传递给WEB API动作

Question

我有一个WEP API控制器类，由ASP.NET MVC中的.cshtml网页调用。我正在使用JSON将值从页面传输到控制器。但是，尽管调用了该方法，但该方法不会接收来自请求的值。以下是我的代码。

HTML

<form id="register_form" name="register_form" method="post" onsubmit="AjaxRegister();">
    @Html.AntiForgeryToken()
    <div class="twelve columns">
        <label id="message"></label>
    </div>
    <div class="twelve columns">
        <input type="email" id="reg-email" name="signup_email" class="inputbox" required placeholder="Your email">
    </div>
    <div class="twelve columns">
        <input type="date" id="dob" name="dob" class="inputbox" required placeholder="Your date of birth">
    </div>
    <div class="twelve columns">
        <select id="country-list" name="reg-country">
            <option value="AU">Australia</option>
            <option value="NZ">New Zealand</option>
            <option value="US">United States</option>
        </select>
    </div>
    <div class="six columns">
        <input type="password" id="reg-password" name="signup_password" class="inputbox" required placeholder="Desired password">
    </div>
    <div class="six columns">
        <input type="password" id="confirm_password" name="signup_password_confirm" class="inputbox" required placeholder="Confirm password">
    </div>
    <div class="twelve columns">
        <button type="submit" id="signup" name="submit" class="radius alert button"><i class="icon-heart"></i> &nbsp;CREATE MY ACCOUNT</button>&nbsp;
    </div>
</form>

JS

function AjaxRegister() {
    var input = {
        "user": {
            "UserId": 0,
            "Email": jQuery('#reg-email').val(),
            "DateOfBirthTemp": jQuery('#dob').val(),
            "Password": jQuery('#reg-password').val(),
            "CountryCode": jQuery('#country-list').val(),
        }
    };
    jQuery.ajax({
        type: 'POST',
        dataType: 'json',
        url: 'api/v1/user',
        contentType: 'application/json; charset=utf-8',
        data: JSON.stringify(input),
        success: function(data) {
            jQuery('#message').text('Success');
        },
        error: function() {
            jQuery('#message').text('Error');
        },
        async: false
    });
}

WEB API

控制器

public class UserController : BaseApiController
{
    // POST api/<controller>
    public void Post(User value)
    {
        try
        {
            var newUser = unitofwork.UserRepository.Add(value);
            unitofwork.Commit();
        }
        catch (Exception ex)
        {

        }
    }
}

WebApiConfig

public static void Register(HttpConfiguration config) {
    config.MapHttpAttributeRoutes();

    config.Routes.MapHttpRoute(
        name: "DefaultApi",
        routeTemplate: "api/v1/{controller}/{id}",
        defaults: new {
            id = RouteParameter.Optional
        }
    );
}

调用post方法但value参数为null。 Javascript函数被称为表单的onsubmit事件。我也试过按钮点击，但结果相同。任何帮助将不胜感激。

Answer 1

尝试创建您希望传递到服务器端的数据对象，无需使用JSON.stringify

function AjaxRegister() {

var input = {};

input.user.UserId = 0;
input.user.Email = jQuery('#reg-email').val();
input.user.DateOfBirthTemp = jQuery('#dob').val();
input.user.Password = jQuery('#reg-password').val();
input.user.CountryCode = jQuery('#country-list').val();


    jQuery.ajax({
        type: 'POST',
        dataType: 'json',
        url: 'api/v1/user',
        data: input,
        success: function (data) {
            jQuery('#message').text('Success');
        },
        error: function () {
            jQuery('#message').text('Error');
        },
        async: false
    });
}

Answer 2

按以下方式定义input变量

var input = {
    "Email" : jQuery('#reg-email').val(),
    "DateOfBirthTemp" : jQuery('#dob').val(),
    "Password" : jQuery('#reg-password').val(),
    "CountryCode" : jQuery('#country-list').val()
};

我不确定DateOfBirthTemp字段。 json中定义的名称应与您定义的类的属性名称完全匹配。

这是假设你的User类或多或少看起来像

public class User
{
    public string Email { get; set; }
    public DateTime DateOfBirthTemp { get; set; }
    public string Password { get; set; }
    public SomeDatType CountryCode { get; set; }    
}

并且您已正确使用data: JSON.stringify(input)将json数据发送到您的网络API动作。

您需要调试并找出下一个问题（如果存在）的位置......

可能的地方

1. Console.log（输入）并检查值是否正确发送
2. 检查控件是否达到您的操作
3. 检查所有值是否已正确发布
4. 检查控件是否返回到ajax调用的成功/错误回调。