Angular JS With MVC

Unknown
In this section, we will show you CRUD operation using Angular js in MVC. Follow the below steps:

Step-1:

First, create an MVC solution then add Angular.js from the nugget package.

Step-2:

Then add a controller in the controller folder. And create a view. And also create a table for your solution.

Step-3:

Then add a reference in your view for angular js.
<script src="~/Scripts/angular.min.js"></script>

Step-4:

Now add a JavaScript file in your solution. Named it “Angular_code.js”. Add this file reference in your index view page.

<script src="~/Angular_code.js"></script>

Step-5:

 First, we try to insert records in the database. Write this below code in your view page,

@{
    ViewBag.Title = "Index";
}
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Scripts/jquery-3.1.1.js"></script>
<script src="~/Angular_code.js"></script>
<script src="~/Scripts/jquery-3.1.1.min.js"></script>
<script src="~/Scripts/bootstrap.js"></script>
<style>
    .btn-space {
        background-color: cornflowerblue;
        font-size: large;
    }
</style>
<h2>Index</h2>
<div ng-app="myApp">
    <div ng-controller="myCtrl" ng-init="GetAllData()" class="divList">
        <p class="divHead">List of Employee</p>
        <table cellpadding="12" class="table table-bordered table-hover">
            <tr>
                <td>
                    <b>Name</b>
                </td>
                <td>
                    <b>User Name</b>
                </td>
                <td>
<b>Password</b>
                </td>
                <td>
                    <b>DOB</b>
                </td>
                <td>
                    <b>Actions</b>
                </td>
            </tr>
            <tr ng-repeat="Emp in employees">
<td>{{Emp.User_FullName}}</td>
                <td>{{Emp.User_Name}}</td>
                <td>{{Emp.User_Password}}</td>
                <td>{{Emp.User_DOB}}</td>
                <td>
<input type="button" class="btn btn-warning" value="Update" ng-click="UpdateEmp(Emp)" />
<input type="button" class="btn btn-danger" value="Delete" ng-click="DeleteEmp(Emp)" />
</td>
</tr>
</table>
<div class="form-horizontal" role="form">
<div class="container">
<div class="row">
<h2>
                        <span id="spn">Add New Employee</span>
                    </h2>
                </div>
                <div class="row">
                    <div class="col-sm-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-md-4 control-label">FullName:</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="inputEmail" placeholder="FullName" ng-model="User_FullName">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-md-4 control-label">Name:</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="inputPassword" placeholder="Name" ng-model="User_Name">
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-6 col-lg-4">
                        <div class="form-group">
                            <label class="col-md-4 control-label">Password:</label>
                            <div class="col-md-8">
                                <input type="text" class="form-control" id="inputLabel3" placeholder="Password" ng-model="User_Password">
                            </div>
</div>
                    </div>
<div class="col-sm-6 col-lg-4">
<div class="form-group">
<label class="col-md-4 control-label">DOB:</label>
<div class="col-md-8">
<input type="text" class="form-control" id="inputLabel3" placeholder="DOB" ng-model="User_DOB">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-lg-4">
<input type="button" id="btnSave" class="form-control btn-space" value="Submit" ng-click="InsertData()" />
</div>
                </div>
            </div>
</div>
    </div>
    @Html.Hidden("User_Id")
</div>

For insert data this below code in your Controller Page,

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Testmvcapp.Models;
namespace Testmvcapp.Controllers
{
    public class HomeController : Controller
    {
        // GET: Home
        Database2Entities ob = new Database2Entities();
        public ActionResult Index() { 
                       return View(); 
                   } 
               public JsonResult Get_AllEmployee() { 
                           List < TblUser > Emp = ob.TblUsers.ToList(); 
                           return Json(Emp, JsonRequestBehavior.AllowGet); 
                   }  
        public JsonResult Get_EmployeeById(string Id) {  
int EmpId = int.Parse(Id);  
return Json(ob.TblUsers.Find(EmpId), JsonRequestBehavior.AllowGet);  
}  
public string Insert_Employee(TblUser Employe) {  
if (Employe != null) {  
ob.TblUsers.Add(Employe);  
ob.SaveChanges();  
return "Employee Added Successfully";  
} else {  
return "Employee Not Inserted! Try Again";  
}  
}  
public string Delete_Employee(TblUser Emp)
{  
if (Emp != null) {  
var Emp_ = ob.Entry(Emp);
if (Emp_.State == System.Data.Entity.EntityState.Detached)
{
ob.TblUsers.Attach(Emp);
ob.TblUsers.Remove(Emp);
                            }
                               ob.SaveChanges(); 
                               return "Employee Deleted Successfully";  
} else {  
return "Employee Not Deleted! Try Again";  
}  
}  
               public string Update_Employee(TblUser Emp) { 
                   if (Emp != null) { 
                           var Emp_ = ob.Entry(Emp);
                        TblUser EmpObj = ob.TblUsers.Where(x => x.User_Id == Emp.User_Id).FirstOrDefault();  
EmpObj.User_Name = Emp.User_Name;  
EmpObj.User_Password = Emp.User_Password;  
EmpObj.User_FullName = Emp.User_FullName;
EmpObj.User_DOB = Emp.User_DOB;
EmpObj.User_Code = Emp.User_Code;  
ob.SaveChanges();  
return "Employee Updated Successfully";  
} else {  
return "Employee Not Updated! Try Again";  
}
               }
   }
}
And finally, write below code in your “Angular_code.js” page,

var app = angular.module("myApp", []);  
app.controller("myCtrl", function($scope, $http) {  
debugger; 
$scope.InsertData = function() {  
var Action = document.getElementById("btnSave").getAttribute("value");  
if (Action == "Submit") {  
$scope.Employe = {};  
$scope.Employe.User_FullName = $scope.User_FullName;
$scope.Employe.User_Name = $scope.User_Name;
$scope.Employe.User_Password = $scope.User_Password;
$scope.Employe.User_DOB = $scope.User_DOB;
//     $scope.Employe.Emp_Age = $scope.EmpAge;  
$http({  
method: "post",  
url: "http://localhost:59957/Home/Insert_Employee",
datatype: "json",  
data: JSON.stringify($scope.Employe)  
}).then(function(response) {  
alert(response.data);  
$scope.GetAllData();  
$scope.User_FullName = "";
$scope.User_Name = "";
$scope.User_Password = "";
$scope.User_DOB = "";
})  
} else {  
$scope.Employe = {};  
$scope.Employe.User_FullName = $scope.User_FullName;
$scope.Employe.User_Name = $scope.User_Name;
$cope.Employe.User_Password = $scope.User_Password;
                          $scope.Employe.User_DOB = $scope.User_DOB;
                          $scope.Employe.User_Id = document.getElementById("User_Id").value;
                          $http({ 
                                     method: "post", 
                                     url: "http://localhost:59957/Home/Update_Employee",
                               datatype: "json", 
                                     data: JSON.stringify($scope.Employe) 
                      }).then(function(response) { 
                                     alert(response.data); 
                                     $scope.GetAllData(); 
                                     $scope.User_FullName = "";
                                     $scope.User_Name = "";
                                     $scope.User_Password = "";
                                     $scope.User_DOB = "";
                                     document.getElementById("btnSave").setAttribute("value", "Submit"); 
                                     document.getElementById("btnSave").style.backgroundColor = "cornflowerblue"; 
                               document.getElementById("spn").innerHTML = "Add New Employee"; 
                                 }) 
        } 
           } 
           $scope.GetAllData = function() { 
               $http({ 
                   method: "get", 
                   url: "http://localhost:59957/Home/Get_AllEmployee"
               }).then(function(response) {  
$scope.employees = response.data;  
}, function() {  
alert("Error Occur");  
})  
};  
$scope.DeleteEmp = function(Emp) {  
$http({  
method: "post",  
url: "http://localhost:59957/Home/Delete_Employee",
datatype: "json",  
data: JSON.stringify(Emp)  
}).then(function(response) {  
alert(response.data);  
$scope.GetAllData();  
})  
};  
$scope.UpdateEmp = function(Emp) {  
document.getElementById("User_Id").value = Emp.User_Id;
$scope.User_FullName = Emp.User_FullName;
$scope.User_Name = Emp.User_Name;
$scope.User_Password = Emp.User_Password;
$scope.Employe.User_DOB = $scope.User_DOB;
document.getElementById("btnSave").setAttribute("value", "Update");  
document.getElementById("btnSave").style.backgroundColor = "Yellow";  
document.getElementById("spn").innerHTML = "Update Employee Information";  
}  
})

AngularJS directives are used to extend HTML. These are special attributes starting with ng- prefix. We're going to discuss following directives −
  1. ng-app − This directive starts an AngularJS Application.
  2. ng-init − This directive initializes application data.
  3. ng-model − This directive binds the values of AngularJS application data to HTML input controls.
  4. ng-repeat − This directive repeats html elements for each item in a collection.


ng-app directive starts an AngularJS Application. It defines the root element. It automatically initializes or bootstraps the application when a web page containing AngularJS Application is loaded. It is also used to load various AngularJS modules in AngularJS Application.

ng-init directive initializes an AngularJS Application data. It is used to put values to the variables to be used in the application.

ng-model This directive binds the values of AngularJS application data to HTML input controls.

ng-repeat directive repeats html elements for each item in a collection.

Example:

<html>
   <head>
      <title>AngularJS Directives</title>
   </head>
   <body>
      <h1>Sample Application</h1>
      <div ng-app = "" ng-init = "countries = [{locale:'en-US',name:'United States'}, {locale:'en-GB',name:'United Kingdom'}, {locale:'en-FR',name:'France'}]"> 
         <p>Enter your Name: <input type = "text" ng-model = "name"></p>
         <p>Hello <span ng-bind = "name"></span>!</p>
         <p>List of Countries with locale:</p>
         <ol>
            <li ng-repeat = "country in countries">
               {{ 'Country: ' + country.name + ', Locale: ' + country.locale }}
            </li>
         </ol>
      </div>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
   </body>
</html>




Tags
Reactions

Post a Comment

0 Comments