javascript - MVC3 EditorFor() JavaScript 模型中的更改值无法识别更改

Question

编辑: 在查看了我这样做的方式之后，我决定更改我的整个 View 模型，因此这个问题不再有效。我不介意知道我做错了什么，但我真的不需要我的项目的答案。

谢谢!

当下拉列表的值更改时，我使用 JavaScript 来更改文本框的值。当页面发布时，Javascript 中更改的值始终为零。

Javascript 似乎工作正常，但该值无法返回到服务器。

这是我的 View 模型:

...
[Required(ErrorMessage = "\"{0}\" is required")]
    [Display(Name = "Mileage Out")]
    public decimal MileageOut { get; set; }

[Required(ErrorMessage = "Vehicle is required.")]
    public Guid VehicleID { get; set; }

    [Display(Name = "Vehicle")]
    public List<SelectListItem> Vehicles { get; set; }
....

这是我的观点:

....
<div class="editor-label">
        @Html.LabelFor(model => model.Vehicles, "Vehicle")
    </div>
    <div class="editor-field">
        @Html.DropDownListFor(model => model.VehicleID, new SelectList(Model.Vehicles, "Value", "Text"), "Vehicle is required . . .", new {@onchange="GetLastMileage(this.value);"})
        @Html.ValidationMessageFor(model => model.Vehicles)
    </div> 

    <div class="editor-label">
        @Html.LabelFor(model => model.MileageOut)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.MileageOut, null, "txtMileageOut")
        @Html.ValidationMessageFor(model => model.MileageOut)
    </div>
...
<script type="text/javascript">

function GetLastMileage(vehicleID) {
    switch (String(vehicleID))
    {

        @{
            foreach (KeyValuePair<string, decimal> item in Model.VehiclesLastMileage)
            {
                @Html.Raw("case '" + item.Key + "': document.getElementById('txtMileageOut').value = '" + ((decimal)item.Value).ToString() + "';break;")
            }
        }
        default: return 0;
    }
}

</script>

我发现如果我改变这个:

@Html.EditorFor(model => model.MileageOut, null, "txtMileageOut")

对此:

@Html.EditorFor(model => model.MileageOut)

日期很好地返回到服务器，但 JavaScript 不起作用(文本框中没有 id)。显然，我使用了错误的方法来更改客户端上的值，但我不知道正确的方法。

谢谢!

Answer 1

更改 JavaScript。

document.getElementById('txtMileageOut').value

至

document.getElementById('MileageOut').value

此外，您应该使用 jQuery 并将 javascript 移至其自己的外部文件中。它还会大大简化 JS 代码。您可以使用 classed 作为选择器而不是 ID，并用更少的代码做更多的事情。