應用MVC ValidationAttribute到jEditable

Question

我使用MVC 3，有一個自定義模型類應用驗證。它適用於「正常」形式。但是，我得到了另一個視圖，它顯示文本中的數據並使用jEditable插件允許用戶編輯任何內聯字段。

我需要相同的驗證適用於現場爲好，但我曾試圖爲封裝與using.HtmlBeginForm（），但它仍然力的工作觀。以下是呈現在一個表中查看：

@using (Html.BeginForm()) 
{ 
<table id="stocktable" class="pretty"> 
<thead> 
    <tr> 
     <th class="name"> 
      Name 
     </th> 
     <th class="amount"> 
      Amount 
     </th> 
     <th> 
      Unit 
     </th> 
     <th> 
      Storage Date 
     </th> 
     <th> 
      Expiry Date 
     </th> 
     <th> 
      Food Type 
     </th> 
     <th> 
     </th> 
     <th> 
     </th> 
    </tr> 
</thead> 
<tbody> 
    @foreach (var item in Model) 
    { 
    @*Plugin use id at tr tag to identify which row to delete*@ 
     <tr id="@(item.FoodID)"> 
      <td id="name@(item.FoodID)" class="namefield"> 
       @Html.DisplayFor(modelItem => item.FoodName) 
      </td> 
      <td id="amnt@(item.FoodID)" class="amountfield"> 
       @Html.DisplayFor(modelItem => item.FoodAmount) 
      </td> 
      <td id="unit@(item.FoodID)" class="unitdropdown" title="@(item.FoodTypeID)"> 
       @Html.Action("GetFoodUnitsName", "Stock", new { id = item.FoodUnitID }) 
      </td> 
      <td id="sdat@(item.FoodID)" class="storagedatepicker"> 
       @String.Format("{0:ddd, d MMM yyyy}", item.StorageDate) 
      </td> 
      <td id="edat@(item.FoodID)" class="expirydatepicker"> 
       @String.Format("{0:ddd, d MMM yyyy}", item.ExpiryDate) 
      </td> 
      <td id="type@(item.FoodID)" class="dropdown" > 
       @Html.DisplayFor(modelItem => item.FOODTYPE.FoodTypeName) 
      </td> 
      <td id="favitem"> 
       @* Call function to check is fav or not and display respective image *@ 
       @Html.Action("GetFavFlag", "Stock", new { id = item.FoodID }) 
      </td> 
      <td id="min" title="@(item.FoodID)"> 
       @Html.Action("GetMinAmount", "Stock", new { id = item.FoodID }) 
      </td> 
     </tr> 
    } 
</tbody> 

而且我改變各類型的字段爲可編輯的是這樣的：

// Normal text field 
    $('.namefield').editable('@(Url.Action("Edit", "Stock"))', 
    { 
     indicator: 'saving...', 
     event: 'dblclick', 
     tooltip: 'Double click to edit...', 
     //style: 'inherit', 
     submit: '<img src="../../Content/Add_in_Images/ok.png" alt="ok"/>', 
     cancel: '<img src="../../Content/Add_in_Images/cancel.png" alt="cancel"/>', 
     style: 'display:inline', 
     height: '20px', 
     width: '100px', 
     onsubmit: function (settings, td) { 
      var input = $(td).find('input'); 
      var original = input.val(); 

      if (original == "") { 
       alert('Please enter a value'); 
       return false; 
      } 
      else { 
       return true; 
      } 
     } 

    }); 

（注：對於文本字段，我能並使用的onsubmit方法一些驗證，我的問題在日期時間字段，其值是自動提交，一旦用戶選擇從日期選擇任何日期發生，所以我不能應用驗證它：

更新：我用下面的代碼試過，我得到的警報if語句，但該值仍提交，請幫助...

$('.expirydatepicker').editable('@(Url.Action("Edit", "Stock"))', 
    { 
     type: 'datepicker', 
     indicator: 'saving...', 
     event: 'dblclick', 
     tooltip: 'Double click to edit...', 
     submit: '<img src="../../Content/Add_in_Images/ok.png" alt="ok"/>', 
     cancel: '<img src="../../Content/Add_in_Images/cancel.png" alt="cancel"/>', 
     style: 'inherit', 
     onsubmit: function (settings, td) { 
      var form = this; 
      var tid = $(td).attr('id'); 
      var input = $(td).find('input'); 
      var newDate = input.val(); 
      alert('id' + tid); 
      alert('newdate' + newDate); 
      $.ajax({ 
       async: false, 
       url: '/Stock/CompareDate', 
       type: 'GET', 
       data: { id: tid, inputDate: newDate }, 
       success: function (result) { 
        alert(result); 
        if (result < 0) { 
         alert("Expiry dare cannot be earlier than storage date"); 
         return false; 
        } 
        else { 
         alert('else'); 
         return true; 
        } 
       } 
      }); 
     } 
    }); 

需要幫助，在這裏...我買不起忽略驗證...

感謝所有幫助...

Answer 1

默認MVC模型綁定器不知道如何與jEditable集成，因此沒有服務器驗證和EditorTemplate功能也不知道如何與jEditable集成（它需要寫入輸入），所以您需要編寫自己的集成來處理模型的服務器端和客戶端驗證部分。

您必須編寫自己的自定義的驗證中手動onsubmit的形式，也寫在你攢動的自定義檢查。要獲得至少服務器驗證，你可以創建自己的模型綁定併發送錯誤返回給客戶端的JSON和使用的東西，像什麼在這篇文章建議在UI中顯示的錯誤：Jeditable Async revert on error