MVC 中的 JQuery Ajax，将表单值传递给 Controller 方法。所有值都是空的，我怎样才能通过 jquery 正确地将表单值传递给控制器？答案

【问题标题】：JQuery Ajax in MVC, passing form values to Controller method. All values are null, how can I properly pass form values through jquery to a controller?MVC 中的 JQuery Ajax，将表单值传递给 Controller 方法。所有值都是空的，我怎样才能通过 jquery 正确地将表单值传递给控制器？
【发布时间】：2021-09-10 08:00:39
【问题描述】：

我正在尝试从用户输入的视图中传递一些数据，以便我可以根据控制器方法返回的结果动态更改标签。

我可以访问表单中的标签 ID 并通过 javascript 函数对其进行更改，但我似乎无法访问表单值并将其传递给我的 Controller 方法。

我的方法在提交表单时被正确调用，并且在我的脚本传递的表单参数的一些逻辑之后，应该返回一个字符串消息准备好让我的脚本显示在页面上。

我的脚本：

@section Scripts{
    <script type="text/javascript">
        $(document).ready(function () {
            $("#submit1").click(function () {
                $.ajax({
                    type: 'POST',
                    url: '/Home/GetResult',
                    data: { number: $("#param1").val(), string: $("#param2").html(), string: $("#param3").html() },
                    success: function (result) {
                        alert(result);
                    },
                    error: function () {
                        $("#rates").html("Something went wrong");
                    }
                });
            });
        })
    </script>
}

我的 HTML：

<form class="form-inline" name="NumberInput" method="post">
    <input type="number" class="form-control mb-2 mr-sm-2" name="param1" id="param1" placeholder="Insert number">

<div class="input-group mb-2 mr-sm-2">
    <select class="custom-select mr-sm-2" name="param2" id="param2">
        <option selected>Choose...</option>
    </select>
</div>
    <div class="input-group mb-2 mr-sm-2">
    <select class="custom-select mr-sm-2" name="param3" id="param3">
        <option selected>Choose...</option>
    </select>
</div>
    <button type="button" onclick="GetResult()" class="btn btn-primary mb-2" id="submit1" name="submit1" value="Get Result">Result</button>

<div class="form-check mb-2 mr-sm-2">
    <label class="form-check-label" name="rates" id="rates">Currency 1 = Currency 2</label>
</div>

我的控制器方法：

[HttpPost]
public ActionResult GetResult(double param1, string param2, string param3)
{
    var result = "";
    // some logic with param1, 2 and 3
    return Ok(result);
}

此时，我只想使用我的结果来更新我的#rates 消息 .html，就像我在脚本的错误部分中所做的那样。但是传递给 GetResult() 的所有 3 个参数都是 0、null 和 null，所以我总是最终返回错误。

我认为我没有访问 ID 并正确传递它们，但我也一直在阅读许多其他答案，其中一些提到 json.stringify()。但是我可以很好地访问我的#rates ID，所以我不确定为什么表单输入中的 3 个参数没有传递给我的方法。任何建议表示赞赏。

【问题讨论】：

这里是使用 $.ajax() stackoverflow.com/questions/5004233/…987654321@ 配置的许多选项的示例
您的控制器需要名为 param1、param2 和 param3 的参数，但您传递的是 number、string。更改您的 data 对象键以使用预期的名称
感谢汤姆森 Mixab。不幸的是，这似乎没有太大帮助。我想我刚刚破解了@Phil！我的数据现在是：data: { param1: $("#param1").val(), etc. }，因为问题似乎是我不知道您需要在 ajax 数据行中命名参数。在 chrome 的控制台中进行了一些调试，让我看看如何使用 .val() 实际访问输入中的元素非常高兴现在可以使用，很快就会更新我的答案。

标签： jquery ajax asp.net-mvc

【解决方案1】：

如果使用表单提交，则不必使用Ajax，例如：

<div class="row">
    <div class="col-md-4">
        <form class="form-inline" name="NumberInput" method="post" action="~/Home/GetResult">
            <input type="number" class="form-control mb-2 mr-sm-2" name="param1" placeholder="Insert number">

            <div class="input-group mb-2 mr-sm-2">
                <select class="custom-select mr-sm-2" name="param2">
                    <option selected value="Choose...">Choose...</option>
                </select>
            </div>
            <div class="input-group mb-2 mr-sm-2">
                <select class="custom-select mr-sm-2" name="param3">
                    <option selected alue="Choose...">Choose...</option>
                </select>
            </div>
            <button type="submit" class="btn btn-primary mb-2" id="submit1" name="submit1" value="Get Result">Result</button>

            <div class="form-check mb-2 mr-sm-2">
                <label class="form-check-label" name="rates" id="rates">Currency 1 = Currency 2</label>
            </div>
        </form>
    </div>
</div>

【讨论】：