It’s a common scenario that we have to maintain sites built on WebForms. For many developers this is a bit of a nightmare and I even know developers who have switched jobs or refused jobs to be able to work in MVC.
WebForms is a 14 year old abstraction which was a great way to make Visual Basic programmers feel at home in the web world. While it was great then, we’ve come a lot further today.
Lately Microsoft has been talking about One Asp.Net. This is a development platform where WebForms, MVC, WebApi and more can run together. This is great news for everyone working in WebForms! There is only one problem. You have to use one of the latest .net versions to take advantage of this. So what do we do in the meantime?
What if we could build components that are reusable on both WebForms and MVC? With Angularjs we can!
Please not that the purpose of this post is to show an example of what we can benefit from using Anugularjs, not to teach Angularjs from scratch.
Angularjs is a javascript framework with features like mvvm-binding, modules, dependency injection and directives, just to mention a few. This blog post will focus on directives, since directives is a way to build components with Angularjs.
This is an example of how a directive may look like:
module.directive('cake', function cake() {
var directive = {
restrict: 'E',
templateUrl: '/JsApp/views/cakeView.html',
scope: {
product: '=ngModel'
},
controller: function ($scope) {
$scope.clicked = function () {
alert('Clicked');
};
}
};
return directive;
});
The restrict property says that the directive is used as an element. Example down below. The templateUrl specifies a file which holds a html template which will be rendered where the directive is specified. The scope defines the data and parameters. In this case, just the product. The controller contains the logic for the directive.
The referenced file cakeView.html looks like this:
<div>
<a href="/order.aspx?prod={{product.Id}}" title="Order {{product.Name}}" >
<div>
<h3>{{product.Name}}</h3>
<img ng-src="/Images/Products/Thumbnails/{{product.ImageName}}" alt="Image of {{product.Name}}" class="img-responsive" />
<p class="description">{{product.Description}}</p>
</div>
</a>
<div>
<p class="price">{{product.Price}} kr</p>
<a class="btn btn-primary" title="Order {{product.Name}}" ng-click="clicked()">Order Now</a>
</div>
</div>
I have chosen to write the directive with the javascript in one file and the html in another, since I don’t get syntax highlighting if I put the html as a string in the javascript file.
As can bee seen above, the html in the template is fairly clean. The double braces, {{}}, are use for data binding. The expression in the braces is the same as specified in the scope above. The attributes starting with “ng-“ are angular specific. Like ng-click, which captures the click event and binds it to a scope function defined in the controller.
And now for the absolutely best part! How do we use it? Like this:
<cake ng-model="product" ></cake>
That short and simple! “cake” is an element, just as we specified in the restrict part of the directive. Ng-model is where we provide the directive with data. In this case product is defined outside the directive. That’s it! Now this cake code can be used in both WebForms and MVC without any modification.
Angularjs is a great framework regardless if we work in WebForms or MVC. It makes WebForms great to work with again, and is a great migration path to MVC.
Some details, like how to set up Angularjs etc, is deliberately left out in order to put focus on directives.
Want to read more about Angularjs, or have questions? Drop me a comment!
