Knockout.js行无法在MVC中验证

Question

我正在使用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());

当我在第一行中输入一个非数字并单击“保存”时，它便已通过验证，但是当我添加第二行并输入一个非数字值时，除了第一行外，它不会验证其他行。 这是什么问题？

好像在数据-VAL <input type="text" data-val="true" />不工作？

Answer 1

我认为正在发生的事情是，当您向SKUPrice数组中添加新项目时，Knockout将新的<td>推入DOM中，但是此新的DOM元素尚未应用MVC不干扰验证。 我不是MVC专家，但是您可以尝试addPrice添加到addPrice ：

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

当然， #yourFormSelector是到达您的<form>元素的jQuery选择器，我在您的HTML中看不到。

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

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

Answer 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("");
    }
});