在jEditable中应用MVC ValidationAttribute

Question

我使用的是MVC3，并且有一个自定义的模型类来应用验证。它在“正常”形式下工作得很好。但是，我得到了另一个视图，它显示文本中的数据，并使用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方法进行一些验证，我的问题发生在日期时间字段中，一旦用户从datepicker中选择任何日期，该字段的值就会自动提交，因此我无法对其应用验证：

更新:我尝试了以下代码，我在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 ModelBinder不知道如何与jEditable集成，因此没有服务器验证，EditorTemplate功能也不知道如何与jEditable集成(它需要写出的输入)，因此您需要编写自己的集成来处理模型的服务器和客户端验证部分。

您必须在表单的onsubmit中手动编写自己的自定义验证，并在保存操作中编写自定义检查。要至少获得服务器验证，您可以创建自己的模型绑定器，并用JSON将错误发送回客户端，然后使用本文中建议的内容在UI中显示错误：Jeditable Async revert on error