Применить MVC ValidationAttribute к jEditable - PullRequest
1 голос
/ 27 октября 2011

Я использую MVC 3 и хочу настроить класс модели для применения проверки.Хорошо работает с «нормальной» формой.Но я получил еще один View, который отображает данные в тексте и использует плагин 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;
                    }
                }
            });
        }
    });

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

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

1 Ответ

0 голосов
/ 01 ноября 2011

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

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

...