用于 jQuery 的带有文本框 ID 的 Html.EditorFor答案

【问题标题】：Html.EditorFor with textbox ID for use in jQuery用于 jQuery 的带有文本框 ID 的 Html.EditorFor
【发布时间】：2014-09-19 06:22:20
【问题描述】：

我正在使用 MVC 5 / Razor 3、Bootstrap 3.x 开发一个 ASP.NET 4.0 (.NET 4.5) Web 应用程序。在这个特定的控制器中，我使用了 Google Maps API v3。

基本上，我有两个文本框，一个用于纬度，另一个用于经度。然后我还有一个带有 ONE 标记的谷歌地图。

当用户右键单击某个点时，我希望为标记设置当前单击的 Lat/Long 并更新 Lat/Long 文本框并将地图居中。

当用户将标记拖到新位置时，应该会发生同样的事情，两个文本框都会更新为新的标记位置。

除了添加了谷歌地图之外，表单的其余部分与 Visual Studio“使用 EF CRUD 添加视图”模板完全相同。

现在的问题...由 VS 模板创建的文本框控件代码不允许您设置控件 ID，我可以使用 jQuery/Javascript 代码来更新文本框，但所有地图行为（标记替换、居中等）的作品：

@Html.EditorFor(model => model.longitude, new { htmlAttributes = new { @class = "form-control" } })

在这个站点的某个地方，有人建议另一个人使用 TextBoxFor 而不是 EditorFor，这似乎可以让您为文本框指定一个 ID。但是，这会以标准格式呈现两个文本框，这与其他文本框的外观完全不一致。

然后我选择了另一个建议来替换该代码：

@Html.EditorFor(model => model.latitude, null, "mylatitude", new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.latitude, "", new { @class = "text-danger" })
@Html.EditorFor(model => model.latitude, null, "mylongitude", new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.longitude, "", new { @class = "text-danger" })

使用此表单，文本框看起来像其他文本框，当我移动标记或右键单击时，纬度/经度文本框会使用相应的坐标进行更新，因为我可以使用我在 EditorFor 中声明的 ID 从 JavaScript 处理它们。

但是，当我提交表单时，文本框上的纬度/经度值都没有在模型上填充，其他模型值都被正确填充。如果我恢复到原来的 EditorFor - 我无法指定 ID - 则正确提交值。

所以有些奇怪，文本框得到更新（正确的 ID），但不知何故，通过 Javascript 填充的实际文本框值没有填充到模型中。

【问题讨论】：

标签： javascript google-maps google-maps-api-3 asp.net-mvc-5 editorfor

【解决方案1】：

当你使用重载时

@Html.EditorFor(model => model.latitude, null, "mylatitude", ..

第三个参数将 name 属性设置为 mylatitude，它与属性名称 latitude 不匹配，因此 DefaultModelBinder 无法匹配值。

为什么不能使用生成的 ID @Html.EditorFor(model => model.longitude, .. 将是“经度”，或者使用 TextBoxFor 并添加相关的类名，使其样式看起来与 @Html.EditorFor 生成的输出相同

【讨论】：