Strongly-Typed View vs Dynamically-Typed View in ASP.NET MVC

In this article, we will find and learn the difference between Strongly Typed View vs Dynamically Typed View in ASP.NET MVC. In the previous ASP.NET MVC tutorials, we saw:

• Creating First Application In ASP.NET MVC
• Pass Parameter Or Query String In Action Method In ASP.NET MVC
• Passing Data From Controller To View In ASP.NET MVC

Let's Begin:
Create a new ASP.NET Web Application.

Select Empty MVC Template and click on OK.

Right click on Models folder and Add Employee Entity class in Model.

Employee.cs Code:

public class Employee {     public int ID { get; set; }     public string Name { get; set; }     public string Designation { get; set; } }

Right Click on controller and Add New empty controller and give it a name.

Create an object of Employee model and initialize its property with some data and pass the employee object to the view.

Now add a view for Index Action method of DynamicController. Select Empty Template(without model) as we are going to create Dynamic Typed View.

By default, the model property available within the views is dynamic, which means that we can access the value of Model without knowing its exact type. We can also create a dynamic-typed view by declaring @model dynamic (page as dynamic typed). As we are using dynamic view, Artificial Intelligence doesn't help us and dynamic expression resolved at runtime. If we type or use property that is not present/related to model then an exception is thrown during runtime.

Build and Run the application.
Preview:

Strongly Typed View:
Let's add another controller and named it as StronglyTypedController and add the same code in Index action method of StronglyTypedController.

public class StronglyTypedController : Controller {         public ActionResult Index()         {             Employee employee = new Employee()             {                 ID = 101,                 Name = "Anoop Kumar Sharma",                 Designation = "Software Engineer"             };             //Passing the Employee obj to View             return View(employee);         } }

This time we will select Empty Template. In above example we have seleteted Empty Template without model class.

Select Employee Model class from the drop-down in order to create a strongly-typed view. Make sure to compile the project before selecting a model class from the dropdown because the list i.e. Model class list in add view dialog populated with the help of reflection.

Add View for Index action method of StronglyTypedController.

@model DynamicVsStronglyTypedView.Models.Employee specifies the datatype for the model. @Model and @model look similar but they are different in reality. @Model is a property of the view that refers to the model that was passed to the view from the controller. Inside strongly-typed view, we get Intelligence and compile time error checking support.

Build and Run the application.
Preview:

Hope you like it. Thanks.

[Download Source Code via Google Drive]

Read More

Directives in AngularJS

In this Article, we will learn about Directives in AngularJS Application. Before starting, I suggest you to read my previous articles in this series.

• Getting Started With AngularJS
• Modules And Controllers In AngularJS
• Two Way Data Binding In AngularJS

Directives are one of the core feature of AngularJS. Directives allow us to extend HTML with new attributes, elements and classes. Directives are used for DOM Manipulation, Data Binding, Loading View, Events firing etc. We can define Directives in multiple ways:

Some of the directives like ng-view etc. can be used as custom element.

In this Article, we will see some built in AngularJS Directive. In this series, we have already seen some of the Directives like ng-app, ng-model, ng-controller, ng-bind etc. so, I am not going to cover them again.

1. ng-init: ng-init is used to initialize special properties for ng-repeat directive and for injecting data via server side scripting language in AngularJS application. It is recommended to use controller for initializing a property/model in AngularJS application.

Example:

<!DOCTYPE html> <html> <head>     <title></title>     <script src="Script/angular.js"></script> </head> <body ng-app>     <!--Here we initialize Name property using ng-init Directive-->     <div ng-init="Name='Anoop'">         <h3>ng-init Example</h3>         Name: <input type="text" ng-model="Name"/>     </div> </body> </html>

Preview:

2. ng-repeat: ng-repeat directive repeats html elements for each item in a collection. It is much similar to foreach loop in C# or other programming language.
Example:

<!DOCTYPE html> <html> <head>     <title>Directive Demo</title>     <script src="Script/angular.js"></script> </head> <body ng-app>     <!--Here we initialize Names property using ng-init Directive-->     <div ng-init="Names=['Anoop','Akshay','Ajay','Abhishek','Arjun']">         <h3>ng-repeat Example</h3>         <ul>             <!--ng-repeat directive repeats html elements for each item in a collection.-->             <li ng-repeat="name in Names">{{name}}</li>         </ul>     </div> </body> </html>

Preview:

Example: Fetch data from Array of Objects using ng-repeat.

<!DOCTYPE html> <html> <head>     <title>Directive Demo</title>     <script src="Script/angular.js"></script> </head> <body ng-app>     <!--Here we initialize Employees property using ng-init Directive-->     <div ng-init="Employees=[         { Name: 'Anoop', City: 'New Delhi' },         { Name: 'Akshay', City: 'Mumbai' },         { Name: 'Ajay', City: 'Punjab' },         { Name: 'Arjun', City: 'Haryana' }     ]">         <h3>ng-repeat Example</h3>         <table border="1" style="border-collapse:collapse">             <tr><th>Name</th><th>City</th></tr>             <!--ng-repeat directive repeats html elements for each item in a collection.-->             <tr ng-repeat="Employee in Employees"><td>{{Employee.Name}}</td><td>{{Employee.City}}</td></tr>         </table>     </div> </body> </html>

Preview:

3. ng-show/ng-hide Directive: ng-show/ng-hide directive allow us to show or hide different HTML Element based on the expression passed to that directive.
Example of ng-show directive:

<!DOCTYPE html> <html> <head>     <title>ngshow Demo</title>     <script src="Script/angular.js"></script> </head> <body ng-app>     <h3>ng-show Example</h3>     <!--Binding checkbox value with isVisible property using ng-model directive-->     <input type="checkbox" ng-model="isVisible" /> Show Div     <!--Here we pass isVisible expression to ng-show Directive-->     <div ng-show="isVisible">         Name: <input type="text" />     </div> </body> </html>

Preview:

Example of ng-hide directive:

<!DOCTYPE html> <html> <head>     <title>ng-hide Demo</title>     <script src="Script/angular.js"></script> </head> <body ng-app>     <h3>ng-hide Example</h3>     <!--Binding checkbox value with isHidden property using ng-model directive-->     <input type="checkbox" ng-model="isHidden" /> Hide Div     <!--Here we pass isHidden expression to ng-hide Directive-->     <div ng-hide="isHidden">         Name: <input type="text" />     </div> </body> </html>

Preview:

4. ng-Click: ng-click directive updates the model/property of AngularJS application when an element is clicked.

<!DOCTYPE html> <html> <head>     <title>ngClick Demo</title>     <script src="Script/angular.js"></script> </head> <body ng-app>     <!--Here we initialize count property using ng-init Directive-->     <div ng-init="count=0">         <h3>ng-click Example</h3>         <!--Increasing and Decreasing the value of count expression using ng-click directive-->         <button ng-click="count=count+1">Increase Value by 1</button> <button ng-click="count=count-1">Decrease Value by 1</button>         <p>Count={{count}}</p>     </div> </body> </html>

Preview:

Please visit https://docs.angularjs.org/api/ng/directive for reading more about various built in directive.
Hope you liked it. Thanks!

[Download Source Code via Google Drive]

Read More