Knockout.js 行不会在 MVC 中验证答案

【问题标题】：Knockout.js rows won't validate in MVCKnockout.js 行不会在 MVC 中验证
【发布时间】：2015-05-19 11:08:45
【问题描述】：

我正在使用 MVC、C#、Razor 和 Knockout.js

模型 > SKUPrice.cs

[Required]
[Display(Name = "SRP")]
public Decimal SRP { get; set; }

控制器 > SKUPriceController.cs

public ActionResult Create(int id = 1)
{
    return View();
}

[HttpPost]
public ActionResult Create(List<SKUPrice> skuprices)
{
    if (ModelState.IsValid) {
        foreach (SKUPrice skuprice in skuprices) 
        {
            db.SKUPrices.AddObject(skuprice);
            db.SaveChanges();
        }
    }
}
return View();

视图 > SKUPrice > Create.cshtml

<table>
    <thead>
        <tr>
            <th>
                @Html.LabelFor(model => model[0].SRP)
            </th>
            <th>
            </th>
        <tr>
        <tr>
            <td>
                <input class="form-control" data-val="true" data-val-number="The field SRP must be a number."
                    data-val-required="The SRP field is required." name="[0].SRP" type="number" value="0" step="0.25">
                <span class="help-block"><span class="field-validation-valid" data-valmsg-for="[0].SRP"
                    data-valmsg-replace="true"></span></span>
            </td>
            <td>
                <input type="button" onclick="" value="Add" class="btn btn-primary" data-bind="click: addPrice">
            </td>
        </tr>
    </thead>
    <tbody data-bind="foreach: SKUPrice">
        <td>
            <input class="form-control" data-val="true" data-val-number="The field SRP must be a number."
                data-val-required="The SRP field is required." type="number" value="0" step="0.01" data-bind="attr: { name: '[' + ($index() + 1) + '].SRP'}">
            <span class="help-block"><span class="field-validation-valid" data-valmsg-replace="true"
                data-bind="attr: { 'data-valmsg-for': '[' + ($index() + 1) + '].SRP'}"></span>
            </span>
        </td>
        <td>
        <i class="fa fa-close" data-bind="click: $parent.removePrice" style="cursor: pointer; color: Red;"></i>
        </td>
    </tbody>
</table>
<input type="submit" value="Save" name="Save" class="btn btn-primary" />

脚本 > main.js

function ViewModel() {
    var self = this;

    self.SKUPrice = ko.observableArray([]);

    self.addPrice = function () {
        self.SKUPrice.push({ count: "" });
    };

    self.removePrice = function () {
        self.SKUPrice.remove(this);
    };
}
ko.applyBindings(new ViewModel());

当我在第一行输入非数字并单击保存时，它已验证，但当我添加第二行并输入非数字值时，它不会验证除第一行之外的其他行。这有什么问题？

<input type="text" data-val="true" /> 中的 data-val 似乎不起作用？

【问题讨论】：

我们能看到更多的 rour main.js 吗？您可能在某个地方有一些应用验证插件的代码 - 我认为这是关键 - 我将在下面草拟一个答案来解释。

标签： javascript c# asp.net-mvc asp.net-mvc-4 knockout.js

【解决方案1】：

我认为当您向SKUPrice 数组添加一个新项目时，Knockout 会将一个新的<td> 推送到您的 DOM 中，但这个新的 DOM 元素尚未应用 MVC 非干扰验证。我不是 MVC 专家，但您可以尝试将此行添加到 addPrice:

self.addPrice = function () {
    self.SKUPrice.push({ count: "" });
    $.validator.unobtrusive.parse('#yourFormSelector')
};

当然，#yourFormSelector 是一个 jQuery 选择器，用于访问您的 <form> 元素，我在您的 HTML 中看不到它。

顺便说一句，我发现你的<tbody> 中没有<tr> - 这是故意的吗？这可能更正常：

<tbody data-bind="foreach: SKUPrice">
    <tr>
        <td>
            inputs...
        </td>
        <td>
            close link...
        </td>
    </tr>
</tbody>

【讨论】：

我在$("a[data-ajax=true]").live("click", function (evt) { 的代码行中的jquery.unobtrusive-ajax.js 文件中发现了一个错误，此错误Uncaught TypeError: undefined is not a function。为什么会出现这个错误？
我认为你应该打开一个新问题来讨论这个问题，而不是在这里做。此外，接受您自己的答案是可以的，这样做确实很有帮助：它会告诉人们问题已得到回答，这对于其他想要回答或寻找解决方案的人很有用。

【解决方案2】：

没有使用 MVC 的 JQuery.unobtrusive.validation.js 就回答了它，只使用了一个简单的查询进行验证。

$("input[name*=SRP]").each(function(){
    $(this).val($(this).val().trim());
    if($(this).val() == "") {
        err++;
        $("span[data-valmsg-for='" + $(this).attr("name") + "']").html("The field SRP is required.");
    } else if(isNaN($(this).val())) {
        err++;
        $("span[data-valmsg-for='" + $(this).attr("name") + "']").html("The field SRP must be a number.");
    } else {
        $("span[data-valmsg-for='" + $(this).attr("name") + "']").html("");
    }
});

【讨论】：