Применить MVC ValidationAttribute к jEditable

Я использую 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>

And I am changing each type of field into editable like this:

 // 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;
                    }
                }
            });
        }
    });

Нужна помощь здесь... Я не мог позволить себе игнорировать проверку...

Ценю любую помощь...


person shennyL    schedule 26.10.2011    source источник


Ответы (1)


MVC ModelBinder по умолчанию не знает, как интегрироваться с jEditable, поэтому проверка сервера отсутствует, а функциональность EditorTemplate также не знает, как интегрироваться с jEditable (для этого требуется записанный ввод), поэтому вам нужно будет написать свою собственную интеграцию для обработки частей проверки вашей модели как на стороне сервера, так и на стороне клиента.

Вам нужно будет вручную написать свою собственную проверку в onsubmit для форм, а также написать собственные проверки в своем действии сохранения. Чтобы получить хотя бы проверку сервера, вы можете создать свою собственную привязку модели и отправить ошибки обратно клиенту в JSON и использовать что-то вроде того, что предлагается в этом посте, для отображения ошибок в пользовательском интерфейсе: Jeditable Async возвращается при ошибке

person Paul Tyng    schedule 31.10.2011
comment
привет, я пытался добавить проверку метода onsubmit, но значение всегда отправляется, даже если оно вводит оператор if и возвращает false, я понятия не имею, почему это происходит, я обновил код в своем вопросе, пожалуйста, помогите .... - person shennyL; 01.11.2011
comment
Вы не можете просто вернуть false, Ajax является асинхронным, то есть к тому времени, когда сервер отвечает, метод onsubmit уже завершился. Вместо этого вам нужно восстановить исходное значение вместо возврата false. Посмотрите на ответ в посте, на который я ссылаюсь, он говорит о том, как вы возвращаетесь. - person Paul Tyng; 01.11.2011
comment
извините, но я прошел по этой ссылке, и это не похоже на то, что мне нужно. что вы подразумеваете под восстановлением исходного значения? потому что, если я сделаю так, как указано в ссылке, неверная дата все равно будет отправлена ​​​​... - person shennyL; 01.11.2011
comment
В вашем действии, если у вас есть ошибка проверки, вы не должны продолжать сохранять значение, вы должны вернуть ошибки обратно вызывающему. - person Paul Tyng; 01.11.2011
comment
Привет, кажется, я как-то понял, что ты имеешь в виду. Я не пытаюсь остановить отправку, но я переназначаю исходное значение, если проверка не удалась, так что спасибо!! - person shennyL; 03.11.2011