0

我有點麻煩:我有一個頁面,其特點是一個整數值,應該針對數據庫驗證其是否具有重複性,使用MVC的內置TextBoxFor可以正常工作,但是當我將其更改爲Kendo的NumericTextBox for更好的輸入驗證和全面的用戶友好性,遠程方法永遠不會被調用。如何在Kendo UI的NumericTextBox上使用MVC的遠程驗證?

基本上是:

[Remote("ValidateDuplicity", "Edital", AdditionalFields = "Year, Id", ErrorMessage = "Code already used")]   
    public int Code { get; set; } 

如果在視圖中我用下面,一切工作正常:

@Html.TextBoxFor(x => x.Code, new { @class = "k-textbox lt-width-full" }) 
    @Html.ValidationMessageFor(x => x.Code) 

但在接下來的情況下,確認從未觸發:

@Html.Kendo().NumericTextBoxFor(x => x.Code) 
    @Html.ValidationMessageFor(x => x.Code) 

關於我可能會遺漏的任何想法?

編輯:

至於問,呈現的HTML看起來像這樣:

<span class="k-numeric-wrap k-state-default"> 
    <input type="text" class="k-formatted-value k-input" tabindex="0" aria-disabled="false" aria-readonly="false" style="display: inline-block;"> 
    <input data-val="true" data-val-number="The field Numero must be a number." data-val-regex="Número inválido" data-val-regex-pattern="^([0-9]+)$" data-val-remote="Edital já cadastrado" data-val-remote-additionalfields="*.Numero,*.Ano,*.Id" data-val-remote-url="/SAGI/DNIT/Edital/ValidadeDuplicidadeEdital" data-val-required="Campo requerido" id="Numero" name="Numero" type="text" value="457" data-role="numerictextbox" role="spinbutton" class="k-input" aria-valuenow="457" aria-disabled="false" aria-readonly="false" style="display: none;"> 
    <span class="k-select"> 
    <span unselectable="on" class="k-link"> 
     <span unselectable="on" class="k-icon k-i-arrow-n" title="Increase value"> 
     Increase value 
     </span> 
    </span> 
    <span unselectable="on" class="k-link"> 
     <span unselectable="on" class="k-icon k-i-arrow-s" title="Decrease value"> 
     Decrease value 
     </span> 
    </span> 
    </span> 
</span> 

編輯2

而使用TextBoxFor生成的HTML的時候看起來是這樣的:

<input class="k-textbox lt-width-full" data-val="true" data-val-number="The field Numero must be a number." data-val-regex="Número inválido" data-val-regex-pattern="^([0-9]+)$" data-val-remote="Edital já cadastrado" data-val-remote-additionalfields="*.Numero,*.Ano,*.Id" data-val-remote-url="/SAGI/DNIT/Edital/ValidadeDuplicidadeEdital" data-val-required="Campo requerido" id="Numero" name="Numero" type="text" value="457"> 
+0

當您使用Kendo NumericTextBox時,最終呈現的html看起來像什麼? – ataravati

+0

@ataravati它現在在那裏。這似乎是好的。 –

+0

你可以顯示標準文本框的生成代碼嗎?比較可能會顯示出一個重要的區別。 – jwatts1980

回答

2

首先,我們需要定義一個新的遠程規則kendoValidator並使其禁用jQuery的驗證器的remote方法,然後經過async: false,可以使用data-val-remote-url和ASP.NET MVC的其他屬性與KendoUI。

$.validator.methods.remote = function() { /* disabled */ }; 
$("form").kendoValidator({ 
    onfocusout: true, 
    onkeyup: true, 
    rules: { 
     remote: function (input) { 
      var remoteAttr = input.attr("data-val-remote-url"); 
      if (typeof remoteAttr === typeof undefined || remoteAttr === false) { 
       return true; 
      } 

      var isInvalid = true; 
      var data = {}; 
      data[input.attr('name')] = input.val(); 

      $.ajax({ 
       url: remoteAttr, 
       mode: "abort", 
       port: "validate" + input.attr('name'), 
       dataType: "json", 
       type: input.attr("data-val-remote-type"), 
       data: data, 
       async: false, 
       success: function (response) { 
        isInvalid = response; 
       } 
      }); 
      return !isInvalid; 
     } 
    }, 
    messages: { 
     remote: function (input) { 
      return input.data('val-remote'); 
     } 
    } 
});