current community

your communities

more stack exchange communities

Stack Exchange
tour help
stack overflow careers
Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 4 down vote favorite
2

I'm using AngularJS in my MVC application and trying to use the best of both worlds. I really like how you can in MVC set up your validation logic in your viewmodels and generate client side validation with jQuery validation in your razor views with little effort. I use AngularJS to get the SPA behavior with routing etc, but when I create a razor view that I use to inject into a page with: <div data-ng-view="data-ng-view"></div>

then the jQuery validation stops working, even though the script files is references on the page where the view is injected. See below for my razor view:

@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>
share|improve this question

4 Answers 4

up vote 7 down vote accepted

First of all, IMO using Razor to render your templates is fraught with peril, at best. Generally you want to use static HTML for your page and directive templates, and then retrieve and post data as AJAX to your API. The ASP.NET web API is really good at this, actually. If your underlying model has validation, then bad web API calls will throw an exception, which you can catch in your $http or $resource handler and show to the user. Mixing standard HTTP form posts with AngularJS will be... difficult.

To achieve what you want, I think someone (not me) would have to write the AngularJS equivalent to jQuery Unobtrusive Validation library, which itself is using the jQuery Validate plugin. Not trivial. I personally don't see drop-in Angular validation happening soon, especially since it has more to do with markup and less to do with a JS configuration object.

Possibly you could re-initialize the validation when the view has finished loading using the $viewContentLoaded event. But please don't.

share|improve this answer
3  
As I feared ... thank you for a great answer :) I'll take your feedback into consideration. –  GoldnArms Jun 10 '13 at 9:02
1  
I personally think that having Razor-based views can be beneficial. You could for example place @Html.TextBoxFor(m => m.Name) and it will generate AngularJS empowered input field with all its ng-model, ng-required and many other attributes which is error prone to do by hand. Of cause using ASP.NET MVC might be an overkill but you can use Web Pages with Razor syntax (.cshtml) out of MVC context, the project won't have any references to ASP.NET MVC at all. Take a look at the following projects for examples: github.com/kriasoft/angular-vs github.com/kriasoft/site-sdk –  Grief Coder Jun 16 '13 at 12:22
up vote 2 down vote

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

Instead of using the anonymous object for passing the HTML attributes, try using the Dictionary

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

Make sure is

Dictionary<string, object>

And not

Dictionary<string, string>

Otherwise the constructor will confuse it for 

object HtmlAttribute

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

Lastly, take in mind that if you include AngularJS after jQuery, then it will use jQuery for selectors.

share|improve this answer
up vote 1 down vote

Maybe using Angular for validation can be less painful than you think. Using a couple of custom directives, you could easily get something quite close to Razor with markup as simple as:

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

Check out my sample here and its inspiration here. It only implements required and number at the moment, but customizing it should be easy.

share|improve this answer
up vote 0 down vote

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

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.