Monday, June 22, 2015

Tag Helpers replaced HTML helpers...


Tag Helpers are an alternative to HTML helpers for generating HTML. MVC6 introduces a new feature called Tag Helpers. 

Tag helpers can be used to improve the readability of your Razor views that generate HTML forms. Tag Helpers provide a cleaner syntax that more closely matches the HTML that will be generated.

Enable Tag Helpers

Tag Helpers are located in the Microsoft.AspNet.Mvc.TagHelpers package, So add a reference to that in the project.json file. Then can enable tag helpers by adding this @addTagHelper "*, Microsoft.AspNet.Mvc.TagHelpers" into _GlobalImports.cshtml.

HTML helper vs Tag helper

It might look like Tag Helpers are just a syntax change with no obvious benefits. The difference however, can make your Razor forms much more readable


As you can see, the HTML helper approach becomes very hard to understand while the tag helper approach is very clear and concise.  

Most Common Tag Helpers
  • Tag helper automatically get the value from the Display attribute
  • HTML attributes that added to the textarea element will be merged with the generated attributes.
  • All the functionality provided by the select tag helper provides a clean syntax for generating select elements based on the values in the model
  • Any HTML attributes you add to the form element will be included in the generated HTML
  • validation message tag helper directly after the input tag helper for the same property. This allows for the validation message to be displayed in close proximity to the input that it applies to

Wednesday, June 17, 2015

Why AngularJS awesome...?


AngularJS is a structural framework for dynamic web apps. It lets you use HTML as your template language and lets you extend HTML's syntax to express your application's components clearly and succinctly. Angular's data binding and dependency injection eliminate much of the code.

Angular is client-side MVC framework, it extends HTML with new attributes. it's perfect for Single Page Applications (SPAs).

Basics of AngularJS: 


ng-app : defines AngularJS application

ng-init : initialize AngularJS application variables

ng-model : binds the value of HTML controls to application data
ng-bind : binds application data to the HTML view
ng-controller : defines the controller
ng-repeat : clones HTML elements once for each item in a collection

*** We can use data-ng-, instead of ng-, if you want to make your page HTML valid

ex: