尝试在 POST 请求中发送 Ajax jQuery 参数时收到 NULL 值 - MVC CORE答案

【问题标题】：I receive NULL values when trying to send Ajax jQuery parameters in POST request - MVC CORE尝试在 POST 请求中发送 Ajax jQuery 参数时收到 NULL 值 - MVC CORE
【发布时间】：2017-02-24 03:11:18
【问题描述】：

我对 ASP.NET MVC 核心有点陌生。

我的要求如下：我有一个包含联系表单的Contact.cshtml 视图。

用户填写联系表单并点击“提交”按钮后，我想用ajax jQuery post方法将输入的表单参数发送给控制器，然后在不刷新页面的情况下将反馈发送回用户。

我的控制器方法：

[HttpPost]
public IActionResult Contact(string name, string email, string subject, string message)
{
        // Future code will be entered here and do some logic with the parameters

        // This will be replaced with a call to a partial View which contains a success message
        return View();
}

我的Contact.cshtml 文件的一部分：

<form method="post" role="form" id="contactForm">
    <div class="form-group">
        <label for="name">השם שלך</label>
        <input type="text" class="form-control" id="name">
    </div>
    <div class="form-group">
        <label for="email">כתובת מייל</label>
        <input type="email" class="form-control" id="email">
    </div>
    <div class="form-group">
        <label for="subject">נושא</label>
        <input type="text" class="form-control" id="subject">
    </div>
    <div class="form-group">
        <label for="message">הודעה</label>
        <textarea class="form-control" id="message" rows="3"></textarea>
    </div>
    <button type="submit" class="btn btn-theme">שלח</button>
</form>

@section scripts
{
            <script>
                    $('#contactForm').submit(function () {
                        $.ajax({
                            url: '/Home/Contact',
                            type: 'post',
                            data: { 'name': $('#name').val() },
                            success: function (data) {
                                alert(data);
                            }
                        });
                    });
            </script>
}

我已设法缩小问题范围。我写的一切都很好，但$('#name').val() 的选择器不起作用。它返回null 值！如果我输入一些硬编码值，例如“john doe”而不是选择器，那么它就可以工作！有人能告诉我这个 jQuery 选择器有什么问题吗？谢谢！

【问题讨论】：

好吧，$('#message') 是一个包含 DOM 节点的对象，toString 可能只是为您提供所有值的[object, Object]，这就是您要找的吗？你可能想要$('#message').val()
jsfiddle.net/adeneo/h1t4kbof
我也试过 val().... 我的朋友对我没用
您还需要使用preventDefault: $('#contactForm').submit(function (e) { e.preventDefault(); // your code... 停止表单提交。您的 $.post 调用似乎也缺少 URL 值，但我认为它刚刚从问题中的示例中删除
嘿，Rory，没关系，不需要 URL。我在控制器方法中设置了一个断点，它到达了那里。也许是因为我把 [HttpPost] 动作过滤器放在了它知道需要调用它

标签： jquery ajax post asp.net-core asp.net-core-mvc

【解决方案1】：

您的代码应该可以正常工作。确保您阻止了默认的正常表单提交行为。你可以使用 jQuery preventDefault 方法来做到这一点。

$('#contactForm').submit(function (e) {
    e.preventDefault();
    // your existing code
});

您也可以考虑将序列化的表单发送到操作方法，而不是一一读取输入值。

$(function() {
    $('#contactForm').submit(function (e) {
        e.preventDefault();

        $.ajax({
            url: '/Home/Contact',
            type: 'post',
            data: $(this).serialize(),                   
            success: function (data) {
                alert(data);
            }
        });
    });
});

您需要确保您的表单元素具有与您的操作方法参数名称匹配的name 属性

<input type="text" class="form-control" name="name" id="name" />
<input type="email" class="form-control" name="email" id="email" //>

【讨论】：