MVC 4 / AJAX - 尽管列表中的条目有效，但仍将空值传递给控制器答案

【问题标题】：MVC 4 / AJAX - Null values passed to controller despite valid entry from a listMVC 4 / AJAX - 尽管列表中的条目有效，但仍将空值传递给控制器
【发布时间】：2014-12-04 17:48:01
【问题描述】：

我正在处理一个“创建”表单。其中两个字段是 OriginAirportID 和 DestinationAirportID。

目前可以做的是有人在此字段中键入一串字母，然后页面使用此字符串创建 AJAX 请求以获取一组返回 JSON 的数据。然后将此 JSON 数据格式化并显示在用户可以单击它的页面上，并将项目名称添加到字段中。

按下提交/创建按钮，我在 Visual Studio 中对此进行了调试，可以看到 FromAirport 和 ToAirport 字段显示为空。

很明显，机场 ID 没有被发送回控制器，因此模型验证失败。

这样做而不是下拉列表的原因是因为加载页面变得很繁重，尤其是数据库中有 50,000 个机场的两个字段（总共 100,000 个选择项）。

字段的 HTML 标记是：

        <input type="text" name="OriginAirportID" id="OriginAirportID" />

        <input type="text" name="DestinationAirportID" id="DestinationAirportID" />

当有人在 OriginAirportID 字段中键入“LHR”时，将发送以下内容：

        term=LHR

这是回复：

        [{"AirportID":16420,"Name":"London Heathrow Airport"}]

在我的 $.ajax 如下：

                $.ajax({
                    url: "/Flight/<MethodName>",
                    type: "POST",
                    dataType: "json",
                    data: { term: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.Name, value: item.Name };
                        }))

                    }
                })

如果这不清楚或令人困惑，请告诉我，我会尽力提供更多信息。

编辑：格林威治标准时间 14 年 4 月 12 日 1844 年

感谢您迄今为止关于看起来像 js 对象的模型以及隐藏字段技术的三个回复。我会修改每一个建议，看看它是否最终接受了这个模型。 StuartLC - 我想我认为它很聪明，但刚刚意识到你指出的代码没有 AirportID 什么的！这肯定会使问题更加复杂。

【问题讨论】：

当然，您还需要保留从 Ajax 调用返回的 AirportID，因为这是在发布表单时最终在 OriginAirportID / DestinationAirportID 输入中设置的内容，例如return { id: item.AirportID, label: item.Name, value: item.Name }; 等？

标签： c# ajax asp.net-mvc json asp.net-mvc-4

【解决方案1】：

问题似乎是您使用模型中的实际属性作为用户输入文本的字段，但看起来这些属性实际上应该是整数。一旦 modelbinder 开始处理发布的数据，它就会尝试将字符串值绑定到 int，但是由于“LHR”之类的东西不能转换为 int，所以你会得到一个 null。你应该做的是这样的：

<input type="text" id="OriginAirport" />
<input type="hidden" name="OriginAirportID" />

用户在文本框中键入，该文本框未绑定任何内容。您的 AJAX 使用它来查找机场 id，然后将隐藏的输入设置为绑定到您的实际属性。现在，当您发布时，实际的整数 id 会被发布，modelbinder 将能够正确地将其绑定到您的模型。

【讨论】：

嗨，克里斯，我终于有机会尝试了，它确实有效！非常感谢。

【解决方案2】：

这就是我会做的：

1) 根据用户输入，您进行 AJAX 调用并获取机场 ID 和其他数据。您可以将机场 ID 保存在隐藏字段中或作为输入字段的“数据”属性。这没什么大不了的，两种选择都可以。假设您使用隐藏字段。

2) 与目的地机场相同。

现在您有 2 个隐藏字段，一个用于来源，另一个用于目的地。

3) 用户提交：在您的 AJAX 调用中，您创建一个 JS 对象并设置两个 ID（源 ID 和目标 ID）。像这样的：

var vm = {};
vm.originAirportId = $("#OriginAirportID").val();
vm.destinationAirportId = $("#DestinationAirportID").val();

4) 在 ASP.NET MVC Action 上，您应该有一个 ViewModel，它与 JS 对象具有相同的属性，如下所述。

public class TripVM {
     public int OriginAirportId { get; set; }
     public int DestinationAirportId { get; set; }
}

然后，ASP.NET MVC 将为您完成绑定。

这样，您只需将 ID 从客户端发送到服务器。我建议您使用 JSON.stringify 将 JS 对象转换为 JSON 表示。请记住，JS 对象的属性名称必须与 C# 类的属性匹配，但比较不区分大小写，因此您可以尊重每种语言的命名约定 :)

【讨论】：