Using razor views with jQuery validation using angularJS

I use AngularJS in my MVC application and try to use the best of both worlds. I really like how in MVC you can configure the validation logic in viewmodels and perform client-side validation using jQuery validation in your razor views without much effort. I use AngularJS to get SPA behavior with routing, etc., but when I create a razor view that I use to enter the page with: <div data-ng-view="data-ng-view"></div>

then the jQuery check stops working, even if the script files are links to the page where the view is entered. See below for my kind of razor:

 @model BandViewModel <div data-ng-controller="App.BandCreateCtrl"> <form name="startBandForm"> @Html.ValidationSummary(true) <br /> @Html.LabelFor(m => m.Name) @Html.TextBoxFor(m => m.Name, new { data_ng_model = "band.Name" }) @Html.ValidationMessageFor(m => m.Name) <br/> <input data-ng-disabled="startBandForm.$invalid" type="submit" data-ng-click="createBand(band)" value="Create"/> </form> </div> 
+6
source share
5 answers

First of all, an IMO that uses Razor to render your templates is fraught with danger at best. Typically, you want to use static HTML for your page and directive templates, and then retrieve and send data as AJAX to your API. Actually the ASP.NET web API is really good. If your base model has validation, then bad network API calls will throw an exception that you can catch in the $ http or $ resource handler and show it to the user. Mixing standard HTTP form messages with AngularJS will be ... complicated.

In order to achieve what you want, I think that someone (and not me) will have to write the AngularJS equivalent for the jQuery Unobtrusive Validation library , which itself uses the jQuery Check plugin . Not trivial. I personally do not see Angular availability checking happen in the near future, especially since it is more related to markup and less related to the JS configuration object.

Perhaps you could reinitialize the check when the view has completed loading using the $ viewContentLoaded event . But please do not do this.

+7
source

It pains me that everywhere I looked, we get the same answers: "HTML should be just a template." Maybe, but I'm just not ready to delegate everything to JavaScript

Instead of using an anonymous object to pass HTML attributes, try using a dictionary

 @Html.TextBoxFor(m => m.Name, new Dictionary<string, object>(){{ "data_ng_model", "band.Name" }}) 

Make sure that

 Dictionary<string, object> 

And not

 Dictionary<string, string> 

Otherwise, the constructor will confuse it for

 object HtmlAttribute 

Not so pretty though ... but it works for the most part.

Finally, keep in mind that if you enable AngularJS after jQuery, it will use jQuery for selectors.

+4
source

For those who are still looking for a solution to this problem, there is an easy way to make it work.

  var currForm = $("#myForm"); currForm.removeData("validator"); currForm.removeData("unobtrusiveValidation"); $.validator.unobtrusive.parse(currForm); currForm.validate(); 

You can put this code in $ viewContentLoaded or in other places that are relevant to your code.

So far, I understand some of the views that prevent MVC from being viewed as templates for your Angular code. My reason for being it is not a natural way of doing things in Angular, and therefore there is a chance that you will run into problems like this. But if you use the use of MVC representations as templates, this is not the way to hell. IT works and can benefit you. I have 2 use cases in my project where using MVC views makes a lot of sense.

  • My project really has a requirement that the client can enable the required validation in a specific field, for this I use the MVC user data annotation validator, which allows me to add or remove data annotation during visualization of the view using one class, if you were to create one Same flexibility in angular, you would have to write a lot more code. Therefore, MVC views work fine for me, as custom data annotations are triggered using the DisplayFor and EditorFor helpers.
  • We are actively investing in internationalization, and although Angular is great for other purposes, internationalization is not its strongest package (at the time of writing this at least), I still feel the support of internationalization in MVC with .RESX works fine and has been long here. This again uses the power of DisplayAttribute data annotation.

TL; DR: Representing MVC as templates may give you some unexpected problems, but they are worth it if you really use the full power of the data annotation pipeline created by Microsoft.

Hope someone comes up with the Angular HTML Helpers library in the future, it will be a lot easier.

+3
source

Perhaps using Angular to test can be less painful than you think. Using a couple of custom directives, you can easily get something very close to Razor with markup as simple as:

  <validated-input name=username display="User Name" ng-model=model.username required</validated-input> 

Look at my example here and his inspiration here , He only implements the required and quantity at the moment, but setting it up should be easy.

+1
source

You can use the ngval library. It brings data annotations to the client side as angularjs validation directives.

+1
source

Source: https://habr.com/ru/post/946894/


All Articles