Knockout.js строки не будет проверять в MVC

Question

i'am с использованием MVC, C#, бритву и 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()); 

Когда я вхожу не-число в первой строке и нажмите сохранить его подтверждено, но когда я добавляю вторую строку и ввести не-номер значение не проверяет другие строки, кроме первой строки. В чем проблема с этим?

Похоже, что data-val в <input type="text" data-val="true" /> не работает?

Answer 1

Я думаю, что происходит, когда вы добавляете новый элемент в массив SKUPrice, Нокаут толкает новый <td> в ваш DOM, но этот новый DOM элемент не имел unobstrusive проверки MVC применяется к нему. Я не эксперт с MVC, но вы можете попробовать добавить эту строку в addPrice:

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

где конечно #yourFormSelector является селектор JQuery, чтобы добраться до <form> элемента, который я не могу видеть в вашем HTML.

Как в стороне, я заметил, что у вас нет <tr> внутри вашего <tbody> - это преднамеренно? Это может быть более нормальным:

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

Answer 2

Ответил без использования JQuery.unobtrusive.validation.js в MVC и использовать только простой запрос для проверки.

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