Wednesday, July 20, 2016

AngularJS And ASP.NET MVC Movie Library Application - Part Three

Posted on 7:30 AM by Sachin Kalia

AngularJS And ASP.NET MVC Movie Library Application - Part Three- EventBinding with UI Elements

I hope you have had a chance to look into my last tutorial. Here, I will talk about the Event binding with UI elements of Movie.html page within module and controller.

And this will the outcome after binding all control with controller’s function as depicted below:


Kindly find links here as shown below:

Moving ahead in this article, we’ll focus on how to bind UI controls events and link with the defined controller.
$scope plays a vital role whenever you bind the controller value with the specific view. Here, we are going to learn it. After using this, I believe that it would be a kind of ice-breaker and will ease all the further learnings. Let's get our hands dirty with AngularJS & ASP.NET MVC Movie Library Application Tutorials part three.
So far, we’ve designed the screen shot, given below:
screen shot
Hope, you will have also reached up to this level. Moving ahead, let's bind the fancy bootstrap glyphicon icon into an action.
Add the ng-click event, one by one, on each respective control.There are thee HTML button controls that exist. 
First – Add button with + symol
Second – Edit button with pencil symbol
Third - Cross with * Symbol.
Kindly paste the code segment, given below, into the movie.html page.
Code segment Movie.html

  1. <!DOCTYPE html>
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  5. <h2>Movie Rating Portal</h2>
  6. <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  9. <style>
  10.         .selected 
  11.         { 
  12.             background-color: lightyellow; 
  13.             color: red; 
  14.             font-weight: bold; 
  15.         } 
  16. </style>
  17. </head>
  19. <body ng-app="routingApp" class="jumbotron">
  20. <div ng-controller="MovieController" class="container">
  22. <div ng-show="success" class="alert-success">Record has been upddated for movie :  {{updatedMovie.title}}</div>
  23. <div ng-show="clear" class="alert-success">Record has been deleted for movie :  {{updatedMovie.title}}</div>
  24. <div class="row col-md-8">
  25. <table class="table table-striped ">
  27. <thead class="thead-inverse">
  28. <th style="background-color: Highlight">Title</th>
  29. <th style="background-color: Highlight">Year of Release</th>
  30. <th style="background-color: Highlight">Rating</th>
  31. <th style="background-color: Highlight">Plot</th>
  32. <th style="background-color: Highlight">Actions</th>
  33. </thead>
  34. <tr>
  35. <!-- <td>EmployeeID:</td>-->
  36. <td>
  37. <input type="text" ng-model="movie.title" class="form-control" />
  39. </td>
  40. <td>
  41. <input type="text" ng-model="movie.year" class="form-control" />
  42. </td>
  43. <td>
  44. <input type="text" ng-model="movie.rating" class="form-control" />
  45. </td>
  46. <td>
  47. <input type="text" ng-model="movie.plot" class="form-control" />
  48. </td>
  49. <td>
  50. <button type="button" ng-click="AddMovie(movie)" class="btn btn-primary">
  51. <span class="glyphicon glyphicon-plus"></span>
  52. </button>
  53. </td>
  54. </tr>
  55. <tbody>
  56. <tr ng-repeat="movie in movies" ng-class="{'selected':$index == selectedRow}">
  57. <td>{{movie.title}} 
  58. </td>
  59. <td>{{movie.year}} 
  60. </td>
  61. <td>{{movie.rating}} 
  62. </td>
  63. <td>{{movie.plot }} 
  64. </td>
  65. <td>
  66. <button type="button" ng-click="EditMovie(movie,$index)" class="btn btn-warning">
  67. <span class="glyphicon glyphicon-pencil"></span>
  68. </button>
  69. <button type="button" ng-click="DeleteMovie(movie,$index)" class="btn btn-danger">
  70. <span class="glyphicon glyphicon-remove"></span>
  71. </button>
  72. </td>
  73. </tr>
  74. </tbody>
  75. </table>
  76. </div>
  77. </div>
  78. </body>
  79. </html>

 

code
Now, we are almost done with the UI part and have created the required ng-click events on all the buttons existing on the page.
Now,  it'stime to design the controller and write the code so that  every button should work very effectively. Thus, please copy and paste the code, given below and replace it within routing.js file.

  1. /// <reference path="../Scripts/angular.js" />
  2. var routingApp = angular.module('routingApp', []); 
  4. routingApp.controller("MovieController", ['$scope', function ($scope) { 
  6.     $scope.edit = false; 
  7.     $scope.message = "Welcome to DotnetPiper.com to learn Angular"; 
  8.     $scope.error = false; 
  9.     $scope.clear = false; 
  10.     $scope.success = false; 
  11. // alert("Servcie Called");
  13. var movies = [ 
  14.                 { title: "Revenent", year: "2015", rating: "5Star", plot: " A revenger Journey" }, 
  15.                  { title: "Counjouring2", year: "2016", rating: "4Star", plot: " A Complete Hourror" }, 
  16.                  { title: "DDLJ", year: "1995", rating: "SuperStar", plot: "Romantic love story" }, 
  17.                  { title: "Sultan", year: "2016", rating: "5Star", plot: "A Warrior" }, 
  18.                  { title: "BajiRao Mastani", year: "2015", rating: "4.5 Star", plot: "Film of the Year" } 
  19.     ]; 
  21.     $scope.movies = movies; 
  23.     $scope.AddMovie = function (movie) { 
  25. if ($scope.edit == true) { 
  27. var index = $scope.movies.indexOf(movie); 
  28. // alert("edit Called");
  29.             $scope.movies[index] = movie; 
  30. //alert(movie.rating);
  31.             $scope.updatedMovie = movie; 
  32.             $scope.success = true; 
  33.             $scope.movie = {}; 
  34.         } 
  35. else { 
  36. var newMovie = { 
  37.                 title: $scope.movie.title, 
  38.                 year: $scope.movie.year, 
  39.                 rating: $scope.movie.rating, 
  40.                 plot: $scope.movie.plot 
  41.             }; 
  43.             movies.push(newMovie); 
  44. // alert("Add Called");
  45.         } 
  46.     } 
  48.     $scope.DeleteMovie = function (movie,index) { 
  50.         movies.splice(index, 1); 
  51. // $scope.movie = movie;
  52.         $scope.updatedMovie = movie; 
  53.         $scope.success = false; 
  54.         $scope.clear = true; 
  55.         $scope.movie = {}; 
  56.         console.log(index); 
  57.     } 
  58.     $scope.EditMovie = function (movie, index) { 
  60.         $scope.selectedRow = null;  // initialize our variable to null
  61.         $scope.selectedRow = index; 
  62.         $scope.movie = movie;         
  63.         $scope.edit = true; 
  64.     } 
  65. }]); 

Run your Application now and it should perform the actions. Once you run an Application, give the path of your desired page. It should look, as given below, in the screenshot. For now, the button will be working as anticipated.
output
Kindly open Movie.html page and find the given below line and understand its actual fact. Please refer below the screen, given below:
code
There are three major cases here as shown below:
First – Add button with + symbol
Second – Edit button with pencil symbol
Third - Cross with * Symbol.

Kindly find GIF image, given below, which performs all the actions. It will help you to understand the facts.

Hope this will help you some day. Enjoy coding.

Categories:

0 comments :

Post a Comment

Subscribe to: Post Comments ( Atom )