将 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 方法进行一些验证，我的问题发生在 datetime 字段中，一旦用户从 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