Post
Ask Question

Angular, Bootstrap And ASP.NET MVC - Part Two

In this tutorial series, we are learning AngularJS as Client side, Bootstrap for layout styling, and ASP.NET MVC as Server side.

Here is the first part of the series.

Required files/folders for this project

For this project, we require a module to wrap everything like Controllers, Services, Directives. Let’s name it StudentFormsApp.js. Within this module, let’s create Controllers, Services, Directives, and Views.

  • Controller - Handles the data.
  • Service - Gets and posts data from API, database, etc.
  • Directive - Helps to get the form on the screen.
  • View - Holds our forms, controls.

Step 1

Create a folder named “app” and inside it, let's create a JavaScript file "StudentFormsApp.js" which holds the module app.

Also, create another folder inside the app folder and name it "StudentForm". Inside this folder, let's create the following JavaScript and HTML files.

  • sfController.js (Controller)
  • sfService.js (Service)
  • sfDirective.js (Directive)
  • sfTemplate.html (View)

Folder structure will look like the following.

ASP.NET
Now, add all the above JavaScript files in the head of index.html.

ASP.NET

Step 2

Now, in the StudentFormsApp.js, create a global variable studentFormsApp that will be the only global variable we use in the application, which will be our app as module called ‘studentFormsApp’. For now, we will not specify any other dependencies so let’s put empty array ‘[]’.

In the StudentFormsApp.js, put the following code.

  1. var studentFormsApp = angular.module('studentFormsApp', []);  

Step 3

In the Controller, we take the global variable ‘studentFormsApp’ and call the ‘controller’ method which enables to create an angular controller. Let’s name is sfController. Next, lets create function sfController() controller with $socpe as variable and sfService as service reference. We get the data from sfService and set it to $scope.student variable.

In sfController.js put the following code,

  1. studentFormsApp.controller('sfController',  
  2.     function sfController($scope, sfService) {  
  3.         $scope.student = sfService.student;  
  4.     });  

Step 4

In the service (sfService), we take the global variable ‘studentFormsApp’ and call the ‘factory’ method which creates the service (sfService) and pass a function that returns data. For now, I am using sample data.

In sfService.js following is the code snippet,

  1. studentFormsApp.factory('sfService',  
  2.     function () {  
  3.         return {  
  4.             student: {  
  5.                 fullName: "Kishor Bikram Oli",  
  6.                 objective: "To become a great software engineer",  
  7.                 level: "Undergraduate",  
  8.                 isAvailable: true,  
  9.                 isOnline: true,  
  10.                 status: "none"  
  11.             }  
  12.         }  
  13.     });  

Here, the  data is returned as object with key value. So ‘student’ is pulled as sfService.student in controller like,

  1. $scope.student = sfService.student;  

Step 5

Now, in index.html, let's add an attribute ‘ng-app’ named “studentFormsApp” in the html tag. Add the ng-controller = “sfController” in the body tag.

To show our form, let's create a “student-form” directive. We can directly call this <student-form/> tag from our directive.

In index.html, paste the following code snippet.

  1. <!DOCTYPE html>  
  2. <html ng-app="studentFormsApp">  
  3. <head>  
  4.     <title></title>  
  5.     <meta charset="utf-8" />  
  6.     <link href="Content/bootstrap.min.css" rel="stylesheet" />  
  7.     <script src="Scripts/angular.min.js"></script>  
  8.     <script src="app/StudentFormsApp.js"></script>  
  9.     <script src="app/StudentForm/sfController.js"></script>  
  10.     <script src="app/StudentForm/sfDirective.js"></script>  
  11.     <script src="app/StudentForm/sfService.js"></script>  
  12. </head>  
  13. <body ng-controller="sfController" class="container">  
  14.     <br/>   
  15.     <student-form/>  
  16. </body>  
  17. </html>  

Step 6

In the sfDirective.js, we take our global app object “studentFormsApp” and call directive method to create a directive.

We are passing the “studentForm” as the name of directive. Here “studentForm” is in camel case (starting with lower case and next word begins with upper case).

This will be translated into snake-case that is “student-form”. Notice that, this is same in index.html as <student-form/>

We are also passing a function which returns an object with two items: restrict and templateUrl for our html file.

In sfDirective.js, following is the code snippet.

  1. studentFormsApp.directive('studentForm',  
  2.     function () {  
  3.         return {  
  4.             restrict: 'E',  
  5.             templateUrl: 'app/StudentForm/sfTemplate.html'  
  6.         }  
  7.     });  

Step 7

Now, in sfTemplate.html, we add a form with different controls that is required for a student form. We are styling this with bootstrap controls.

  1. Input field
  2. Labels
  3. Check Box
  4. Select Box
  5. Radio Button
  6. Submit Button

Here, we have used bootstrap to style our forms. So following classes are used for controls:

  • container - adds margin and center page content (We have used this class in body of index.html).
  • form-group - groups a label and input field.
  • form-control - placed on input elements.

These bootstrap classes help to provide responsiveness for different device resolutions.

Complete code snippet for sfTemplate.html is,

  1. <form role="form">  
  2.     <div class="form-group">  
  3.         <label for="fullName">Name</label>  
  4.         <input type="text" id="fullName" class="form-control" />  
  5.     </div>  
  6.     <div class="form-group">  
  7.         <label for="objective">Objective</label>  
  8.         <textarea name="objective" id="objective" class="form-control" rows="5" cols="40"></textarea>  
  9.     </div>  
  10.   
  11.     <div class="form-group">  
  12.         <label for="department">Department</label>  
  13.         <select name="department" id="department" class="form-control">  
  14.             <option>Math</option>  
  15.             <option>Physics</option>  
  16.             <option>Chemistry</option>  
  17.             <option>English</option>  
  18.         </select>  
  19.     </div>  
  20.     <br />  
  21.   
  22.     <span><b>Hobbies</b></span><br />  
  23.     <div class="checkbox">  
  24.         <label><input type="checkbox" value="hobbiesTravel" />Travelling</label>  
  25.     </div>  
  26.     <div class="checkbox">  
  27.         <label><input type="checkbox" value="hobbiesPhotography" />Photography</label>  
  28.     </div>  
  29.     <div class="checkbox">  
  30.         <label><input type="checkbox" value="hobbiesGaming" />Gaming</label>  
  31.     </div>  
  32.     <br />  
  33.   
  34.     <span><b>Gender</b></span><br />  
  35.     <div class="radio">  
  36.         <label><input type="radio" name="gender" value="male" /> Male</label><br />  
  37.     </div>  
  38.     <div class="radio">  
  39.         <label><input type="radio" name="gender" value="female" /> Female</label><br />  
  40.     </div>  
  41.     <br />  
  42.   
  43.     <input type="submit" class="btn btn-primary" value="Submit" />  
  44. </form>  

Step 8

Run the application. The following output will be displayed.

ASP.NET

Step 9 More Bootstrapping

  • form-horizontal - places labels to the left of the controls.
  • control-label - groups a label.
  • col-sm-3 col-sm-9 use the 12-column grid.

Let’s add a class ‘form-horizontal’ in the form tag. Add class ‘col-sm-3 control-label’ in label controls. Add class ‘form-control’ in input fields.

Wrap input field with div. Include this class ‘col-sm-9’ that makes 12 column grids. Here ‘sm’ stands for small.

So, it will look like,

  1. <div class="form-group">  
  2.     <label for="fullName" class="col-sm-3 control-label">Name</label>  
  3.     <div class="col-sm-9">  
  4.         <input type="text" id="fullName" class="form-control" />  
  5.     </div>  
  6. </div>  

This will help us to make horizontal responsiveness even in smaller devices.

Complete code snippet of the new sfTemplate.html,

  1. <form role="form" class="form-horizontal">  
  2.     <div class="form-group">  
  3.         <label for="fullName" class="col-sm-3 control-label">Name</label>  
  4.         <div class="col-sm-9">  
  5.             <input type="text" id="fullName" class="form-control" />  
  6.         </div>  
  7.     </div>  
  8.     <div class="form-group">  
  9.         <label for="objective" class="col-sm-3 control-label">Objective</label>  
  10.         <div class="col-sm-9">  
  11.             <textarea name="objective" id="objective" class="form-control" rows="5" cols="40"></textarea>  
  12.         </div>  
  13.     </div>  
  14.   
  15.     <div class="form-group">  
  16.         <label for="department" class="col-sm-3 control-label">Department</label>  
  17.         <div class="col-sm-9">  
  18.             <select name="department" id="department" class="form-control">  
  19.                 <option>Math</option>  
  20.                 <option>Physics</option>  
  21.                 <option>Chemistry</option>  
  22.                 <option>English</option>  
  23.             </select>  
  24.         </div>  
  25.     </div>  
  26.     <br />  
  27.     <div class="form-group">  
  28.         <div class="col-sm-3">  
  29.   
  30.         </div>  
  31.         <div class="col-sm-9">  
  32.             <span><b>Hobbies</b></span><br />  
  33.             <div class="checkbox">  
  34.                 <label><input type="checkbox" value="hobbiesTravel" />Travelling</label>  
  35.             </div>  
  36.             <div class="checkbox">  
  37.                 <label><input type="checkbox" value="hobbiesPhotography" />Photography</label>  
  38.             </div>  
  39.             <div class="checkbox">  
  40.                 <label><input type="checkbox" value="hobbiesGaming" />Gaming</label>  
  41.             </div>  
  42.             <br />  
  43.         </div>  
  44.     </div>  
  45.       
  46.     <div class="form-group">  
  47.         <div class="col-sm-3"></div>  
  48.         <div class="col-sm-9">  
  49.             <span><b>Gender</b></span><br />  
  50.             <div class="radio">  
  51.                 <label><input type="radio" name="gender" value="male" /> Male</label><br />  
  52.             </div>  
  53.             <div class="radio">  
  54.                 <label><input type="radio" name="gender" value="female" /> Female</label><br />  
  55.             </div>  
  56.             <br />  
  57.   
  58.             <input type="submit" class="btn btn-primary" value="Submit" />  
  59.         </div>  
  60.     </div>  
  61. </form>  

Run the app, form will be displayed as below,

ASP.NET

Step 10 Working with fieldsets

fieldsets helps grouping of controls together. It has legend tag that gives name to fieldset.

Let’s add fieldsets to group our controls along with legend to give them a name. So, updated html will look like:

Updated code for sfTemplate that includes fieldsets

  1. <form role="form" class="form-horizontal">  
  2.     <fieldset>  
  3.         <legend>Basic Information</legend>  
  4.         <div class="form-group">  
  5.             <label for="fullName" class="col-sm-3 control-label">Name</label>  
  6.             <div class="col-sm-9">  
  7.                 <input type="text" id="fullName" class="form-control" />  
  8.             </div>  
  9.         </div>  
  10.         <div class="form-group">  
  11.             <label for="objective" class="col-sm-3 control-label">Objective</label>  
  12.             <div class="col-sm-9">  
  13.                 <textarea name="objective" id="objective" class="form-control" rows="5" cols="40"></textarea>  
  14.             </div>  
  15.         </div>  
  16.   
  17.         <div class="form-group">  
  18.             <label for="department" class="col-sm-3 control-label">Department</label>  
  19.             <div class="col-sm-9">  
  20.                 <select name="department" id="department" class="form-control">  
  21.                     <option>Math</option>  
  22.                     <option>Physics</option>  
  23.                     <option>Chemistry</option>  
  24.                     <option>English</option>  
  25.                 </select>  
  26.             </div>  
  27.         </div>  
  28.     </fieldset>  
  29.     <br />  
  30.   
  31.     <fieldset>  
  32.         <legend>Hobbies</legend>  
  33.         <div class="form-group">  
  34.             <div class="col-sm-3">  
  35.   
  36.             </div>  
  37.             <div class="col-sm-9">  
  38.                 <div class="checkbox">  
  39.                     <label><input type="checkbox" value="hobbiesTravel" />Travelling</label>  
  40.                 </div>  
  41.                 <div class="checkbox">  
  42.                     <label><input type="checkbox" value="hobbiesPhotography" />Photography</label>  
  43.                 </div>  
  44.                 <div class="checkbox">  
  45.                     <label><input type="checkbox" value="hobbiesGaming" />Gaming</label>  
  46.                 </div>  
  47.                 <br />  
  48.             </div>  
  49.         </div>  
  50.     </fieldset>  
  51.   
  52.     <fieldset>  
  53.         <legend>Gender</legend>  
  54.         <div class="form-group">  
  55.             <div class="col-sm-3"></div>  
  56.             <div class="col-sm-9">  
  57.                 <div class="radio">  
  58.                     <label><input type="radio" name="gender" value="male" /> Male</label><br />  
  59.                 </div>  
  60.                 <div class="radio">  
  61.                     <label><input type="radio" name="gender" value="female" /> Female</label><br />  
  62.                 </div>  
  63.                 <br />  
  64.             </div>  
  65.         </div>  
  66.     </fieldset>  
  67.     <input type="submit" class="btn btn-primary col-sm-offset-3" value="Submit" />  
  68. </form>  

Step 11

Run the application, you will see the following UI with groupings and headings,

ASP.NET

In this article, we have learned about Angular structure, routing, bootstrap styling. We will learn more about AngularJS, bootstrap, and, of course, ASP.NET-MVC in the next articles.

Get the project from GitHub.


Similar Articles