Tuesday, November 10, 2009

MVC 2 Preview 2 Client Side Validation

Every once in a while early adoption has a way of making a simple process painful. What makes matters even worse is the lack of documentation. Several times during the spiking process I found myself second guessing whether I was at fault or I found a bug. 

First here's an awesome walk through of how to use MVC client side validation. That's right, it's just a blank page at the moment.



Validating on the Server Side 


ASP.MVC 2 Preview 1 introduced DataAnnotations to validate a presentation model on the server side. After decorating your model with DataAnnotations validating the presentation model is taken care of by the DefaultModelBinder.

For example, I created a car presentation model class that ensures the make and model are both required and the string length can be no more than 100 characters. I also added a validation to ensure that the year is between 1900 and 2011.


  public class Car
        {
            [DisplayName("Make")]
            [Required]
            [StringLength(100)]
            public string Make { get; set; }
  
            [DisplayName("Model")]
            [Required]
            [StringLength(100)]
            public string Model { get; set; }
            [Range(1900,2011)]
            public int Year { get; set; }
        }
 The create action can now ask the ModelState if it is valid. If the ModelState is not valid you can redisplay the view with errors.


        public ViewResult Create(Car car)
        {
            if (ModelState.IsNotValid())
                return View(car);
            CreateCarCommand.Execute(car);

            return View("Success");
        }



        public static class ModelStateDictionaryExtensions
        {
            public static bool IsNotValid(this ModelStateDictionary subject)
            {
                return !subject.IsValid;
            }
        }
On the view you can display errors in a validation summary or place the errors next to the offending html control.
Validating On The Client Side (MVC 2 Preview 2)


As great as server side validation is, client side validation is the icing on the cake. In the spirit of re-usability DataAnnotations can be reused on the client side. Here is an snippit from ASP.MVC 2 preview 2 release notes:


"The model validator provider class exposes validation metadata to the browser in the form of JSON-serialized metadata that can be consumed by a client-side validation library. The provider class allows you to use other client validation frameworks by writing an adapter that processes the JSON metadata and calls into the alternate client validation library.
ASP.NET MVC Preview 2 includes the jQuery validation library and a client-side validation adapter for that library. The adapter supports the following DataAnnotations namespace validation attributes:
·         StringLengthAttribute
·         RequiredAttribute
·         RegexAttribute
·         RangeAttribute                                                                 
                                                             " 
The only kicker is that this is a preview and far from perfect.

To enable client side validation you only need a few things:
  1. A call to Html.EnableClientSideValidation();
  2. Three javascript files
    1. jquery core
    2. jquery validate
    3. and MicrosoftMvcJqueryValidation.JS
  3. A lucky rabbit's foot...
Actually it really wasn't that hard to get going and I imagine it will be allot easier in future releases. Heres a list of a few bugs and annoyances.
  1. Html.BeginForm and Html.EndForm do not work as pointed out on Hadi Hariri's blog. Since it does not implement IDisposable.

  2. Html.BeginForm does not seem to generate any JSON or JS needed to validate on the client. I have no Idea why this will not work since it does implement IDisposable..

  3. So far only Html.BeginForm with out generics works but you can still do some cleaver things to keep things strongly typed.

  4. Once I had my application up and running I noticed the javascript validations were not firing when I was tabbing over the input boxes. They only started to work after clicking submit.

  5. If you plan on doing server side validations there seems to be an odd side effect. At least I think it's an odd side effect. I have a view that requires one of the inputs to be validated on the server side. I achieved this by creating a custom validation attribute. Upon returning to the view you are presented with a input box that is colored red and has text explaining the error. Once entering text into the input the textbox returns to normal and the red text disappears. Since the error resides from the server side I would expect the error message to not disappear. I'm still deciding if this is odd behavior or not.
Overall I'm happy with the first release of client side validation for Asp.net MVC. Now that I've had a taste of client side validation in ASP.Net MVC I'm ready to try other validation frameworks.
        

28 comments:

Anonymous said...

Hi,

Have you manage to solved the issue? I'm having the same like the red text...

Weird ha?

Anonymous said...

[url=http://community.bsu.edu/members/buy+online+Viagra.aspx]buy cheap Viagra online no prescription[/url]

[url=http://eterporno.ru/seks-znakomstva-v-tobolske.php]секс знакомства в тобольске[/url]
[url=http://eterporno.ru/prostitutki-mulatki-negrityanki.php]проститутки мулатки негритянки[/url]

[url=http://pc.eterporno.ru/znakomstvo-biseksualov.php]знакомство бисексуалов[/url]
[url=http://pc.eterporno.ru/eroticheskie-rasskazy-intim.php]эротические рассказы интим[/url]
[url=http://pv.eterporno.ru/index.php]самый большой чат знакомств[/url]
[url=http://pv.eterporno.ru/unye-seks-blog.php]юные секс blog[/url]

[url=http://px.eterporno.ru/www-rambler-ru-znakomstva-mamba.php]www rambler ru знакомства мамба[/url]
[url=http://px.eterporno.ru/znakomstva-dlya-seksa-v-tashkente.php]знакомства для секса в ташкенте[/url]

[url=http://pz.eterporno.ru/ulichnye-prostitutki-pitera.php]уличные проститутки питера[/url]
[url=http://pz.eterporno.ru/sayt-znakomstva-moskva.php]сайт знакомства Москва[/url]
[url=http://pz.eterporno.ru/blyadi-chelnov.php]бляди челнов[/url]

Anonymous said...

Dear Author blog.streamlinelogic.ca !
As much as necessary.

Anonymous said...

[color=#336699]Группа [url=http://dejavu-group.ru/artist.php]Deja Vu[/url] - это коллектив заслуженных вокалистов и музыкантов.
[url=http://dejavu-group.ru/index.php]Дежа вю[/url]- законодатель в области музыкального оформления праздников, дней рождения, шоу-программ, копроративов, торжеств и дней рождения.
В копилке Музыкантов Дежа вю более 3тыс. песен.
Только живое исполнение. Ждаз, ретро, хиты 70-80-90-х, диско, поп, шансон, фоновое сопровождение .
ВИА Deja Vu располагает мощной качественной аппаратурой, позволяющей наполнить приятным и плотным уху звуком как небольшое помещение (фуршет), так и большое помещение (корпоратив до 1000 человек).

Игорь +7 916 623 4047 [/color]

Anonymous said...

I want to quote your post in my blog. It can?
And you et an account on Twitter?

Anonymous said...

Отличный и безопасный портал, http://www.pi7.ru
есть всё! Чего нет. Создадим по вашей прозьбе.

[url=http://www.pi7.ru/soft/]Программы[/url]
[url=http://www.pi7.ru/kino/]НОВИНКИ КИНО[/url]
[url=http://www.pi7.ru/horoscope/]Гороскоп на каждый день[/url]
[url=http://www.pi7.ru/video/]видео для взрослых[/url]
[url=http://www.pi7.ru/multy/]Мультфильмы[/url]
[url=http://www.pi7.ru/video/137-porno-video.html]порно видео[/url]
[url=http://www.pi7.ru/soft/128-movavi-video-converter-901.html]скачать видеоконвертер Movavi Video Converter 9.0.1[/url]
[url=http://www.pi7.ru/soft/127-the-bat-voyager-v42141.html]почтовая программа[/url]
[url=http://www.pi7.ru/forum/]форум[/url]


:) и Анекдот от недосыпа В мединституте професор принимает экзамен у тупой студентки. Стучит себя по лбу:
- Ну! Вот здесь, где я стучу! Как эта кость называется?!
-... лобковая.
- М-да. Вы хоршо подумали? Еще раз спрашиваю, как называется эта кость?
- лобковая.
- Хорошо! Тогда ЭТО что, по вашему?!
И дергает себя за нос.

Anonymous said...

Отличный и безопасный портал, http://www.pi7.ru
есть всё! Чего нет. Создадим по вашей прозьбе.

[url=http://www.pi7.ru/soft/]Программы[/url]
[url=http://www.pi7.ru/kino/]НОВИНКИ КИНО[/url]
[url=http://www.pi7.ru/horoscope/]Гороскоп на каждый день[/url]
[url=http://www.pi7.ru/video/]видео для взрослых[/url]
[url=http://www.pi7.ru/multy/]Мультфильмы[/url]
[url=http://www.pi7.ru/video/137-porno-video.html]порно видео[/url]
[url=http://www.pi7.ru/soft/128-movavi-video-converter-901.html]скачать видеоконвертер Movavi Video Converter 9.0.1[/url]
[url=http://www.pi7.ru/soft/127-the-bat-voyager-v42141.html]почтовая программа[/url]
[url=http://www.pi7.ru/forum/]форум[/url]


:) и Анекдот от недосыпа Профессора принимали экзамены и валерьянку.
Сдавали студенты и нервы.

Anonymous said...

Отличный и безопасный портал, http://www.pi7.ru
есть всё! Чего нет. Создадим по вашей прозьбе.

[url=http://www.pi7.ru/soft/]Программы[/url]
[url=http://www.pi7.ru/kino/]НОВИНКИ КИНО[/url]
[url=http://www.pi7.ru/horoscope/]Гороскоп на каждый день[/url]
[url=http://www.pi7.ru/video/]видео для взрослых[/url]
[url=http://www.pi7.ru/multy/]Мультфильмы[/url]
[url=http://www.pi7.ru/video/137-porno-video.html]порно видео[/url]
[url=http://www.pi7.ru/soft/128-movavi-video-converter-901.html]скачать видеоконвертер Movavi Video Converter 9.0.1[/url]
[url=http://www.pi7.ru/soft/127-the-bat-voyager-v42141.html]почтовая программа[/url]
[url=http://www.pi7.ru/forum/]форум[/url]


:) и Анекдот от недосыпа Я предлагаю в школе ввести уроки полового воспитания.
- Зачем?
- Ну надо же как-то детей в школу заманить!

Anonymous said...

Отличный и безопасный портал, http://www.pi7.ru
есть всё! Чего нет. Создадим по вашей прозьбе.

[url=http://www.pi7.ru/soft/]Программы[/url]
[url=http://www.pi7.ru/kino/]НОВИНКИ КИНО[/url]
[url=http://www.pi7.ru/horoscope/]Гороскоп на каждый день[/url]
[url=http://www.pi7.ru/video/]видео для взрослых[/url]
[url=http://www.pi7.ru/multy/]Мультфильмы[/url]
[url=http://www.pi7.ru/video/137-porno-video.html]порно видео[/url]
[url=http://www.pi7.ru/soft/128-movavi-video-converter-901.html]скачать видеоконвертер Movavi Video Converter 9.0.1[/url]
[url=http://www.pi7.ru/soft/127-the-bat-voyager-v42141.html]почтовая программа[/url]
[url=http://www.pi7.ru/forum/]форум[/url]


:) и Анекдот от недосыпа Профессора принимали экзамены и валерьянку.
Сдавали студенты и нервы.

Anonymous said...

Слушайте, ну сколько можно уже встречать этого тигра!? Уже реально поднадоели эти праздники, наверное правы были те, кто советовал куда-нибудь ехать, а не ваньку валять все 10 дней. Уже реально делать нечего - в квартире прибралась, отмыла и отчистила всё что только возможно, отметили с нашей шумной компанией Новый Год, отошли от его отмечания, доели и допили всё, что осталось от новогодней пьян.. ночи :) Отошли от доедания и допивания, съездили на природу, пожарили курочку на гриле, покатались на коньках, покатали шары в боулинге, в кино поглядели Чёрную Молнию, покатались с горок на ватрушках, в гостях у мамы побывала. Сегодня утром проснулась и осознала, что впереди ещё пять дней отдыха. Чем заняться ещё, уже ума не приложу. Кто вообще чем занимается в эти праздники, поделитесь со мной идеями.
ЗЫ И правда говорят, что 10 дней отдыха - это удар, но не только по экономике страны, но и про нам самим)))

Anonymous said...

[url=http://allmet.org]Я вас[/url] [url=http://tvparty.biz]любил[/url] [url=http://otzv.net]любовь еще[/url] [url=http://avto-shop.biz]быть может[/url] [url=http://vybory2012.com]в душе моей[/url] [url=http://vgashop.net]угасла[/url] [url=http://jmarket.info]не совсем[/url]

Anonymous said...

Sory, delete plz[url=http://datingonline.totalh.com].[/url] :(

Anonymous said...

вот намутили сделали сайт всем сайтам расти до таких
сайтов еще не видел что бы автоответчики стояли и телефоны были
http://videolov.com
скоро еще ренген придумают
Here намутили have made a site to all sites to grow to such sites yet
would not see that answering machines stood also phones were

Anonymous said...

[color=#336699]Музыканты на праздник [url=http://dejavu-group.ru/index.php]Дежа вю[/url] - это коллектив профессиональных вокалистов и музыкантов на праздник.
[url=http://dejavu-group.ru/index.php]Deja Vu[/url]- законодатель в области проведения и организации торжеств, музыкальных мероприятий, корпоративок .
В копилке музыкантов на праздник Dejavu-group более 3000 произведений.
Живой звук. Ретро, хиты 70-80-90-х, джаз, диско, поп, современная музыка, европейские хиты, фоновая музыка, шансон.
Музыканты на праздник Deja Vu располагает мощной качественной музыкальной аппаратурой, позволяющей заполнить плотным и приятным уху звуком как маленькое помещение (фуршет), так и огромное пространство (корпоратив до 1000 человек).

Андрей +7 910 483 8294, Игорь +7 916 623 4047 [/color]

Anonymous said...

The information here is great. I will invite my friends here.

Thanks

Anonymous said...

Позавчера сходили с друзьями на киносеанс Нашей Раши, хочется поделиться впечатлениями, пока свежи воспоминания и горячи эмоции. Сразу хочу высказать своё ИМХО - посмотреть фильм стоит. Новая лента Comedy Club Production выигрывает у своих предшественников – “самых лучших фильмов» сразу по нескольким критериям. Во-первых, это актёрский состав. Совсем не трудно догадаться, что больше половины ролей в фильме исполняют Маша Галустян и Светлаков. Конечно, не хочется говорить, что фильм выехал только на них, но если бы не эти ребята, фильм смотрелся бы достаточно убого. Не спорю, может быть мы все уже привыкли и полюбили персонажей из сериала Наша Russia, и именно поэтому в кино мы шли без большой доли скептицизма. И это уже показатель второй: бренд нашей Раши. Ну и в третьих, это какой-никакой, но сюжет - последовательность действий, которые мало-помалу развиваются от начала, и имеют логическую (или не совсем) концовку. Чего фактически не было в самых лучших фильмах - где грубо говоря была последовательность миниатюр, кое как скреплённых общей ниточкой меж собой.
Конечно, фильм Наша Раша Яйца Судьбы не без минусов - это порой уже потёртые шутки, а некоторые моменты можно было обыграть и развить получше. Слишком мало в действии мы увидели Ваню Дулина, Анастасию Кузнецову, Снежану Денисовну, Славика с Димоном. Ну и, если честно, не очень порадовала концовка, которая оказалась как то очень смятой, скоротечной, и при этом предсказуемой. Но, несмотря на это, фильм всё же понравился. Конечно создатели постарались, чтобы зрители выходили из зала с улыбкой на лице, и в финальные титры "посадили" Сергея Юрьевича Белякова, который в пух и прах разложил всех создателей и участников фильма, кроме себя любимого. Ход сыграл на все 100%!!!

Anonymous said...

После вселенской катастрофы Америка превратилась в мертвую пустыню. По бескрайним дорогам, кишащим бандами, ведущеми воины за воду и еду, путешествует безстрашный Илай. Однажды он попадает в мрачные края, где когда-то была цветущая Калифорния, а теперь это сущий ад, где бесчинствует тиран Карнеги.
книга илая трейлер

Anonymous said...

[color=#336699]
Приветик! мм.. есть мега мысль по[url=http://www.pi7.ru] видео[/url] порталу Думаю вам понравится

[url=http://www.pi7.ru]скачать фильм трах брэда армстронга[/url]
aнекдот для разнообразия :)

Трахаются двое у автомобиле. Подходит ГАИшник. Смотрит - девочка что надо. . .
- О, мужи,к я следующий!
- Ладно, - усмехаеся тот, - даввно я ментов не #бал. . .

Я 9 часов блуждала по сети, пока не вышела на ваш форум! Думю, я здесь останусь надолго!
проуш прощения за опечатки.... очено малленькая клавииатура у PDA!

[/color]

Anonymous said...

Ого/Ничего себе

Anonymous said...

Недавно стала всё больше размышлять над такой ситуёвиной: а что если бы во всём мире исчез интернет. Я конечно понимаю, что интеренет сам по себе взять и испариться не может, но тем не менее, если опустить все технические нюансы, и вообразить что такое возможно... Теперь не почитать новости, блоги, не найти нужную информацию в гугле, а самое страшное не выйти ни в ICQ, ни в контакт!
И тут я поняла насколько я зависима от сети. Нет, вроде бы целыми днями перед монитором не провожу, однако признаюсь, день начинаю и заканчиваю и менно компьютером. Хотя, если с другой стороны посмотреть, будет больше реального общения, и больше времени на реальные развлечения, на саморазвитие и т.п. Хотя опять же с другой стороны, с некоторыми друзьями связаться можно только через интернет (кто живет в других городах и странах, телеон - дорого знаете ли), ну и дополн.инфо можно получить быстро, чем сидеть в библиотеках...
А как вы, легко бы смогли перенести такую утрату?

Anonymous said...

Мадемуазель де Соммери, будучи поймана своим любовником на месте преступления, храбро это отрицала, а когда тот стал горячиться, заявила: “Ах, я прекрасно вижу, что Вы меня разлюбили! Ибо Вы больше верите тому, что вы видите, нежели тому, что я говорю!” http://cans.ru/

Anonymous said...

Ну что вы тут раскричались? Пора успокоится и советую скачать Алису в стране чудес. Думаю просмотр успокоит немного нервишки;)

Anonymous said...

Хорошая статья. Действительно было интересно почитать. Не часто такое и встречается та.Наверное стоит подписаться на ваше RSS

Anonymous said...

Действительно интересно. Побольше бы таких статей.

Anonymous said...

Очень интересная статья. Скажите, а могу ли я ее повесить на один из своих сайтов? Соотвественно с гиперсылкой на вас.

Anonymous said...

Привет, прикольный блог, буду читать

Anonymous said...

Я бы на эту тему написал гораздо меньше. Я по другим темам в основном шарю.

Anonymous said...

Огромная просьба, всем кому не лень, тыркнуть за меня на кнопочку. Всем заранее спасибо.

[url=http://bit.ly/dsPMsk]Кнопка[/url]