Проверка jQuery с помощью сценария jQuery. Шаблоны - PullRequest
Новая
       22

Проверка jQuery с помощью сценария jQuery. Шаблоны

4 голосов
/ 16 февраля 2011

Я использую шаблоны jQuery для группы сайтов, над которыми я работаю, и достиг точки, когда мне нужно решить, как реализовать проверку, на стороне клиента.Серверная часть - это сервис Asp.Net Mvc Restful, который работает с различными моделями.Модели украшены DataAnnotations для описания проверки.Ниже приведен пример (обратите внимание, что мы используем файл ресурсов для копии ошибки): 

    [Required(
        ErrorMessageResourceType = typeof(Validation),
        ErrorMessageResourceName = "HomeAddressRequired")]
    [StringLength(250,
        ErrorMessageResourceType = typeof(Validation),
        ErrorMessageResourceName = "HomeAddressStringLength")]
    public string Address { get; set; }

Ранее я просто использовал Razor (или старый движок представления Asp.Net, пока мы не переключились на Mvc 3).), который обрабатывал создание всех клиентских украшений, необходимых для подключения к jquery.validate.js.Теперь, когда я использую шаблоны jQuery, это не так жизнеспособно.

Здесь я вижу три варианта:

  1. Измените шаблоны, чтобы вручную включитьпроверка и копия ошибки .Этот отстой, потому что я буду вынужден поддерживать проверку клиента и сервера отдельно;Это как бы убивает всю идею DataAnnotations.

  2. Использование ненавязчивого подхода Javascript к Razor и Mvc 3, чтобы помочь мне сделать шаблоны .Лучше, так как он воспроизводит проверку для меня, но при достижении производительности.Также означает, что я использую шаблонизатор на стороне сервера ... для рендеринга шаблонов.Я могу свести к минимуму снижение производительности за счет кэширования вывода.

  3. Полагаться исключительно на удаленную проверку, которая возвращает состояния моделей для моих моделей, и написать собственный адаптер для jQuery Validate для обработки ошибок маршрутизации.на соответствующий элемент .Этот способ обходится без использования Razor, но убивает чистую проверку на стороне клиента и означает, что мне нужно написать сложный плагин.

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

Итак, на мой вопрос: Использование jQuery шаблонов на стороне клиента и DataAnnotations на моей модели сервера, что является наиболее эффективным средством обработки проверки безповторяюсь?

1 Ответ

2 голосов
/ 17 февраля 2011

Я пойду с 2)

Шаблоны ошибок могут находиться на стороне клиента.Код на стороне сервера, который не влияет на производительность, - это код, который устанавливает правила для jQuery.validation.Но этого на самом деле нельзя избежать, поскольку ваши правила определены в ваших моделях .NET.

У меня похожая проблема сегодня, но со стилем мне не очень нравится, как jQuery.validation делает для вас метку.Я хочу переопределить вывод с помощью шаблонов jQuery.Я также хочу, чтобы мой вывод находился в другой ячейке таблицы.

Очевидно, вы можете переопределить функцию validator.prototype.showLabel в плагине.Теперь у вас есть полный контроль над тем, где отображать и что отображать в случае сбоя.

Вот пример: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
    <script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.js"></script>


    <script type="text/javascript">
        $.extend($.validator.prototype, {
            showLabel: function (element, message) {
                $(element).siblings('.validationLabel').remove();
                $('#tmplValidationLabel').tmpl({ Message: message }).insertAfter($(element));
            }
        });
    </script>
</head>
<body>


<form>
    <div><input type="text" name="Email" /></div>
    <div><input type="text" name="SomeName" /></div>
    <input type="submit" value="Submit" />
</form>



<script type="x-jquery-tmpl" id="tmplValidationLabel">
<span class="validationLabel">
    <b>${Message}</b> <span> :( </span>
</span>
</script>

<script type="text/javascript">
    $(function () {

        $('form').validate({
            rules: {
                Email: { required: true, email: true },
                SomeName: "required"
            },
            messages: {
                Email: { required: "Enter Email", email: "Not an email" },
                SomeName: "Enter something man!"
            }
        });
    });
</script>
</body>
</html>

Надеюсь, это поможет,

Чи

...