0

Soon I'll start working on the next version of a website I've built. Basically it's kind of a CRM. Lots of tables, forms, CRUD everywhere. The problem is that it's going to be nearly a rewrite cause of huge requirements for functionality for the up-coming version, and we will need to make the website a bit more interactive, responsive and user friendly.

Currently it's ASP.NET MVC 4, with some jQuery for ajax stuff. MVC 4 application acts as a glue/proxy between client-side and underlying service which provides all the data, so WebApp has no direct communication with database. Also MVC 4 application is where business objects are transformed into ViewModels. We use DataAnnotations Validation for ViewModels.

Now what I was looking for, is to somehow integrate something like AngularJs. The goal is to move closer to SPA, give the client-side some structure, as building more functionality on top of existing jQuery code will just result in a sphagetti. However, writing full-blown SPA is not really an option, as it will require way too much effort and time, as always, is not unlimited.

For start the goal is to move Html forms management to AngularJs. That means I need a way to render MVC partial view with MVC model, and let Angular take over the controll. Posting changes/updating the view should be handled by Angular.

I have been researching Angular + asp.net for a while now, and the problem is that I need MVC models, but Angular also needs a 'model' ($scope). I know about ng-init, but some models will be quite complex. so it does not seem like a good idea.

Also server side validation (DataAnotations with loads of customized stuff) with unobtrusive client-side validation works very well for us, so would like to keep that and somehow make it work with Angular.

I've also looked into AngularJs/BreezeJs/MVC4, but breeze mvc integration is focused on EntityFramework, and it needs model metadata for client-side to be able to save, update and cache entities. And as mentioned earlier, mvc app does not access database directly, nor has a way to generate metadata. Writing by hand is not an option.

I know I'm trying to make some kind of hybrid and would have a lot's of issues having models on server and client sides, so I am looking for an advice which way should I go.

Is this doable? Maybe I can generate metadata for Breeze js from existing ViewModels on MVC (breeze seems to work with dataanotations and validation works on client-side, at least minimally)? Maybe this is a nonsense and I should either continue with MVC app, or go full-SPA, and there is no easy way to combine them both.

Marius
  • 33
  • 5
  • You should read through this SO question and answers. http://stackoverflow.com/questions/15046817/asp-net-mvc-validation-form-with-angularjs If I were in your shoes, I would lean toward SPA. It's a paradigm shift, but you'll probably spend the same amount of time learning SPA as you would making a hybrid solution. – jessegavin Apr 02 '14 at 14:29
  • Also, this article might be of some value. It talks about how to integrate AngularJS form validation with DataAnnotations. http://www.danielroot.info/2013/09/hooking-angularjs-validation-to-aspnet.html – jessegavin Apr 02 '14 at 14:30
  • Thanks. I had already read them both. Actually validation is just one issue. The real problem is that I have no way to represent MVC models in angular app. If I decided to go full-SPA, I'm guessing I could keep MVC models, then WebApi controller actions would glue them up from the data received from external data source, and return them to angular via jsonresult or something like that. I am correct? – Marius Apr 02 '14 at 14:50
  • You're on the right track. I would suggest building a quick prototype. Create a WebApi controller with basic CRUD methods for just one of your models, then wire up a simple CRUD interface in Angular. – jessegavin Apr 02 '14 at 15:00

0 Answers0