Creating CRUD Application with ASP.NET MVC 5, AngularJS, BootStrap 3, and HTML5 Part 2

Part 2 – Preparing the views of the Contact Page using HTML5, BootStrap 3, and AngularJS.

Complete Series:
Part 1 – Preparing the Skeleton
Part 2 – Preparing the views of the Contact Page using HTML5, BootStrap 3, and AngularJS
Part 3 : Creating the Back End Using ASP.NET MVC
Part 4 : Communicating with ASP.NET MVC
Part 5 – The Add, Update, and Delete modules

Let's Create the Front End Views:

1. Create the File Structure of the Contact
   
   Create the contact folder and under it, create controller and html folders. Follow the folder structure above.


2. Create the contactController.js under the controller folder.

   	contactApp.controller('contactController',
   	['$scope',
   	function categoryController($scope) {
   	$scope.contacts =[
   	{
   	firstName: 'John', lastName: 'Parson', email: 'parson@gmail.com', mobile: '233-900-2933'
   	},
   	{
   	firstName: 'Joe', lastName: 'Paris', email: 'paris@gmail.com', mobile: '233-900-2933'
   	},
   	{
   	firstName: 'Donna', lastName: 'Lim', email: 'lim@gmail.com', mobile: '552-221-2222'
   	}
   	];
   	$scope.contact = {};
   	}]);

   view raw contactController.js hosted with ❤ by GitHub
   As of now, we have scope of contacts that holds records of contacts. This is just to have something to display on the screen. Later on, we are going to pull records from the server.


3. Create the contactsList.html under the html folder.

   	<div class="panel panel-primary">
   	<div class="panel-heading">My Contacts</div>
   	<div class="panel-body">
   	<div class="col-md-6">
   	<a class="btn btn-primary" href="#/mycontacts/newcontact"><i class="glyphicon glyphicon-file"></i> New</a>
   	</div>
   	<div class="col-xs-10 col-lg-6 col-md-6">
   	<div class="input-group">
   	<input type="text" id="searchText" class="form-control pull-right" placeholder="Search for..." ng-model="search_txt">
   	<span class="input-group-btn">
   	<button class="btn btn-default" type="button">
   	<i class="text-muted glyphicon glyphicon-search"></i>
   	</button>
   	</span>
   	</div><!-- /input-group -->
   	</div><!-- /.col-lg-6 -->
   	<div class="table table-responsive">
   	<table class="table table-striped">
   	<thead>
   	<tr>
   	<td>Last Name</td>
   	<td>First Name</td>
   	<td>Email</td>
   	<td>Mobile</td>
   	</tr>
   	</thead>
   	<tbody>
   	<tr ng-repeat="contact in contacts | filter:search_txt ">
   	<td>{{contact.lastName}}</td>
   	<td>{{contact.firstName}}</td>
   	<td>{{contact.email}}</td>
   	<td>{{contact.mobile}}</td>
   	</tr>
   	</tbody>
   	</table>
   	</div>
   	</div>
   	</div>

   view raw contactsList.html hosted with ❤ by GitHub


4. Create the contactForm.html under the html folder.
   This will be the new contact view (The C of the CRUD)

   	<div class="panel panel-primary">
   	<div class="panel-heading">New Contact</div>
   	<div class="panel-body">
   	<form class="form-horizontal" role="form" id="contactForm" name="contactForm">
   	<div class="form-group">
   	<label for="firstName" class="col-sm-3 control-label">First Name</label>
   	<div class="col-sm-6">
   	<input type="text" id="firstName" name="firstName" class="form-control"
   	ng-model="contact.firstName" ng-required="true" placeholder="First Name" />
   	</div>
   	</div>
   	<div class="form-group">
   	<label for="lastName" class="col-sm-3 control-label">Last Name</label>
   	<div class="col-sm-6">
   	<input type="text" id="lastName" name="lastName" class="form-control"
   	ng-model="contact.lastName" ng-required="true" placeholder="Last name" />
   	</div>
   	</div>
   	<div class="form-group">
   	<label for="email" class="col-sm-3 control-label">Email</label>
   	<div class="col-sm-6">
   	<input type="email" id="email" name="email" class="form-control"
   	ng-model="contact.email" ng-required="true" placeholder="email" />
   	</div>
   	</div>
   	<div class="form-group">
   	<label for="mobile" class="col-sm-3 control-label">Mobile #</label>
   	<div class="col-sm-6">
   	<input type="text" id="mobile" name="mobile" class="form-control"
   	ng-model="contact.mobile" placeholder="Mobile #" />
   	</div>
   	</div>
   	<div class="form-group">
   	<div class="col-md-3 col-sm-3 col-sm-offset-3 col-md-offset-3">
   	<input type="button" id="cancelSave" name="cancelSave" value="Cancel"
   	class="btn btn-warning" />
   	<input type="submit" id="submitForm" name="submitForm" value="Save"
   	class="btn btn-primary" />
   	</div>
   	</div>
   	</form>
   	</div>
   	</div>

   view raw contactForm.html hosted with ❤ by GitHub


5. Update the routes.
   Open the _Layout.cshtml and insert the My Contacts link.

   	<div class="navbar-collapse collapse">
   	<ul class="nav navbar-nav">
   	<li><a href="#/">Home</a></li>
   	<li><a href="#/mycontacts">My Contacts</a></li>
   	<li><a href="#/about">about</a></li>
   	</ul>
   	</div>

   view raw _layout1.cshtml hosted with ❤ by GitHub
   Open the clientRoute.js. Insert the routes: /mycontacts and /mycontacts/newcontact. See the code snippet below.

   	contactApp.config(['$routeProvider', function ($routeProvider) {
   	$routeProvider.when('/', {
   	templateUrl: "/app/Home/home.html"
   	}),
   	$routeProvider.when('/about', {
   	templateUrl: "app/Home/about.html"
   	}),
   	$routeProvider.when('/mycontacts', {
   	templateUrl: "app/contact/html/contactsList.html",
   	controller: "contactController"
   	}),
   	$routeProvider.when('/mycontacts/newcontact', {
   	templateUrl: "app/contact/html/contactForm.html"
   	}),
   	$routeProvider.otherwise({
   	redirectTo: '/'
   	});
   	}]);

   view raw contactAppRoute.js hosted with ❤ by GitHub


6. Include the contactController.js in the BundleConfig.cs.
   Open the BundleConfig.cs. Add the ~/App/contact/controller/contactController.js in the ~/bundles/angularApp. See the code snippet below.

   	bundles.Add(new ScriptBundle("~/bundles/angularApp").Include(
   	"~/Scripts/Angular1.3.5/angular.js",
   	"~/Scripts/Angular1.3.5/angular-route.js",
   	"~/Scripts/Angular1.3.5/angular-resource.js",
   	"~/App/contactApp.js",
   	"~/App/clientRoute.js",
   	"~/App/contact/controller/contactController.js"
   	));

   view raw Scriptbundle.c# hosted with ❤ by GitHub
7. Compile the application. You should navigate at the My Contacts menu. The 2 buttons at the New Contact is not functioning as of now. We will handle that our next series.

Next: Part 3 : Creating the Back End Using ASP.NET MVC