ASP.Net MVC validation with Angular VS Razor

8
votes

ASP.Net MVC together with Custom Attributes in your model and with Razor, lets you just write an HTML Helper like @Html.ValidationMessageFor(model => model.MyAttribute) to validate each field.

AngularJS intends to render everything on the client side, so we don't have access to Razor and all the javascript validators generated for free. We have to code everything again by hand, and we don't have the guarantee that this validation is in sync with the server side validation, which we had with Razor.

How will we overcome this GAP?

3
asp.net-mvcangularjsvalidationrazor
I encounted this same design choice scenario. I eventually dropped any MVC validation altogether, and used a few of the built-in angularJS client validation directives. For validations that do need to access a server resource or not in any of the built in validations, I created and implemented it as a directive – alpinescrambler
seems like you are trying to use angularjs in the same way as knockout works! drop the validations OOB that comes with MVC it uses jquery so you're trying to mix oranges and apples, to me you should re-think your project in terms of architecture the best scenario is to use a Restfull API behind angular, validate anything on the client side and validate all the inputs of your API in the server side as well, servicestack or web API are good options for your middleware! – pedrommuller
But my Restfull API may be returning a ViewModel that is composed by several objects. In Razor Validations they were given for free if you just use attributes in your model classes on the server side. In angular it's all lost, and if I change a validation attribute on the server, it doesn't reflect on the client. – user3864332
I may be trying to mix apples with oranges, but it seems that ASP.Net MVC should return Angular Validations in a next Version! – user3864332
another approach could be to throw a 4XX exception in your web API, ant catch the exception on the client side using a httpInterceptor and show a message to the client, I can elaborate an answer using that approach if you are interested. – pedrommuller

3 Answers

4
votes

This solves my problem:

https://github.com/alisabzevari/ngval

If we want to go deeper (which I don't need now), we can have this:

https://bitbucket.org/asiemer/angularjs.mvc/wiki/Home

0
votes

I think this is a question Angular beginners will put (this is how I found it :)), and this ishow I think in the end:

The model field to validate gets from the angular view -> to an angular controller -> to an angular service -> to asp.webapi method or asp.mvc controller action, which in the end maps -> to an mvc model

This means that on all those (at least 4 "projectors") you must be sure to transfer the exact model and field that you will refer with razor.

So what I mean, is that there are a lot of things that can blow your consistency on the way.

Give up on razor for validation.

It's more maintainable (readable) to rewrite them manually for the client-side, and use automated tests to ensure consistency.

0
votes

I will use the server side model for doing server validation only and do all client validation with Angular.

The issue is old and does exist before Angular gain popularity. Imagine that you're building your domain model, and you create simple view model for the MVC app. In this case, you have the following alternatives:

  1. Build your view model on top of the domain model which is not a good solution sometimes. In this case, you can share validation from domain model with view model.
  2. Build the view model decoupled from your domain model which is ideal actually, however in this case you might end up by duplicating validation. Develop validation for server side in the domain model and validation for the UI in the view model.

By view model, I mean the model in the MVC project that's attached to the view.

In my opinion, I will always go for option 2 and in your case, I'll create client side validation by Angular and server side validation in the domain model.