Updated March 31, 2023
Introduction to ASP.NET MVC AngularJS
ASP.NET MVC AngularJS is the Frontend JavaScript and it is the structural MVC Framework that is used to build dynamic web applications. The MVC Framework makes you use the HTML for the template language and allows enlarge the HTML Syntax to communicate the application component in a clear manner. AngularJS offers developers to code Client-Side Applications in an MVC manner.
What is ASP.NET MVC with AngularJS?
AngularJS is the Structural Framework that defines the dynamic Web Application. By using AngularJS we can build Single Page Application. It also offers the data binding features in HTML Page, the code of AngularJS is the unit testable. By using AngularJS data binding and dependency injection we can eliminate the excess coding.
How to Use ASP.NET MVC with AngularJS?
To make use of ASP.NET MVC and AngularJS are compatible with the pattern of MVC by together there are so many projects it works better because your MVC Server-Side code provides the JSON results for Angular Client-Side Call. In addition, we can make use of an MVC controller to HTML Razor Views for the application. It gives many features like authorization, error handling, re-directing, and so on.
Set Up ASP.NET MVC with AngularJS
To set up ASP.NET MVC with AngularJS which includes Angular in the Project through the packages of NuGet, we can download it from Angular Website. To install AngularJS Package to the project applications, do the following steps,
To open the Package Manager Console from the
ViewOther Windows Package Manager Console and then install AngularJS Package by using the code given below,
PM> Install-Package AngularJSIn AngularJS we have to install an individual package for AngularJS route, it will not come along with the AngularJS we have to install it separately. Install AngularJS Package using the command below,
PM> Install – Package AngularJS.Route
Create ASP.NET MVC application
To create the new MVC project select FileNewProject in that selects MVC Web Application and gives the suitable name for the project.
To choose the basic ASP.NET Project Template,
Step 1: Creating Model in MVC Application
In the MVC project we have Model for DB record so will create the Model by using the Entity Framework, let’s create Employee Table with schemas,
Then to include the new Entity Data Model by using the EF in Models Folder structure, to select the created database name from the dropdown. Once creating it we have the Model Class for Employee.
Step 2: To Create the Controller in MVC
To add a new controller and name it as HomeController,
In the HomeController to add the Methods like
- GetAll() – this method used to return the entire employees use the JSON Method
- getEmployeeBy_No() – this method is used to return particular employee details based on their ID number
- AddEmployee() – this method is used to add new employee details to the database.
- DeleteEmployee() – this method is used to delete the existing employee details
- UpdataEmployee() – this method updates the existing employee details.
Then to add the View for Controller,
In the Index() just right-click on it and click and View, so the index. cshtml will be created,
In AngularJS there will be the following Directives,
- ng-click – it allows to denotes the custom behavior when the element is clicked.
- ng-controller – it attaches the controller class to the view
- ng-Repeat – it instantiates template per item from the collection. Each and every template instance gets its scope like the given loop variable sets to current collection and $index set to item index or key.
- ng-model – their duty is to bind the view into the model where other directives like textarea, input, or selecting requirement.
Code Explanation
Now design a table to accept inputs from user in CRUD page. Add below HTML to index.cshtml
Let’s see the code explanations, initially just look at the design table for accepting input from user in CRUD then include the below code as follows,
Index.cshtml
<div ng-controller="myCntrl">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<h1> Employee Details</h1>
<br />
<input type="button" class="btnAdd" value=" Add Employee" ng-click="AddEmployeeDiv()" />
<div class="divList">
<p class="divHead">Employee List</p>
<table cellpadding="12" class="table table-bordered table-hover">
<tr>
<td><b>ID</b></td>
<td><b>Name</b></td>
<td><b>Email</b></td>
<td><b>Age</b></td>
<td><b>Actions</b></td>
</tr>
<tr ng-repeat="employee in employees">
<td>
{{employee.Id}}
</td>
<td>
{{employee.name}}
</td>
<td>
{{employee.email}}
</td>
<td>
{{employee.Age}}
</td>
<td>
<span ng-click="editEmployee(employee)" class="btnAdd">Edit</span>
<span ng-click="deleteEmployee(employee)" class="btnRed">Delete</span>
</td>
</tr>
</table>
</div>
<div ng-show="divEmployee">
<p class="divHead">{{Action}} Employee</p>
<table>
<tr>
<td><b>Id</b></td>
<td>
<input type="text" disabled="disabled" ng-model="employeeId" />
</td>
</tr>
<tr>
<td><b>Name</b></td>
<td>
<input type="text" ng-model="employeeName" />
</td>
</tr>
<tr>
<td><b>Email</b></td>
<td>
<input type="text" ng-model="employeeEmail" />
</td>
</tr>
<tr>
<td><b>Age</b></td>
<td>
<input type="text" ng-model="employeeAge" />
</td>
</tr>
<tr>
<td colspan="2">
<input type="button" class="btnAdd" value="Save" ng-click="AddUpdateEmployee()" />
</td>
</tr>
</table>
</div>
</div>Then to code for AngularJS MVC Coding
So ready with Model View and Controller to code AngularJS and just create the JavaScript Files as given below,
• Service.js
• Controller.js
-
Modeule.js
In angular. the module which is used to configure the $injector. Module is the container for various parts of the application,
Service.js
The file Service.js used to call the server-side code by using the $http. This Service.js file just we created the AngularJS service known as myservice. To call HomeController to insert, delete and update function same we created three functions in Service.js. To create the following methods in service to call the server side code,
• getEmployees()
• AddEmp
• updateEmp
• DeleteEmp
app.service("myService", function ($http) {
//to gets the entire Employee details
this.getEmployees = function () {
debugger;
return $http.get("Home/GetAll");
};
// to get the Employee detail by using employee Id
this.getEmployee = function (employeeID) {
var response = $http({
method: "post",
url: "Home/getEmployeeByNo",
params: {
id: JSON.stringify(employeeID)
}
});
return response;
}
// to Update Employee details
this.updateEmp = function (employee) {
var response = $http({
method: "post",
url: "Home/UpdateEmployee",
data: JSON.stringify(employee),
dataType: "json"
});
return response;
}
// to Add Employee details
this.AddEmp = function (employee) {
var response = $http({
method: "post",
url: "Home/AddEmployee",
data: JSON.stringify(employee),
dataType: "json"
});
return response;
}
//to Delete Employee details
this.DeleteEmp = function (employeeId) {
var response = $http({
method: "post",
url: "Home/DeleteEmployee",
params: {
employeeId: JSON.stringify(employeeId)
}
});
return response;
}Controller.js
In this, we created the new controller and named as myCntrl which used to call the method of myservice in controller.js
app.controller("myCntrl", function ($scope, myService) {
$scope.divEmployee = false;
GetAllEmployee();
//getting all the records
function GetAllEmployee() {
debugger;
var getData = myService.getEmployees();
debugger;
getData.then(function (emp) {
$scope.employees = emp.data;
},function () {
alert('Error in getting records');
});
}
$scope.editEmployee = function (employee) {
debugger;
var getData = myService.getEmployee(employee.Id);
getData.then(function (emp) {
$scope.employee = emp.data;
$scope.employeeId = employee.Id;
$scope.employeeName = employee.name;
$scope.employeeEmail = employee.email;
$scope.employeeAge = employee.Age;
$scope.Action = "Update";
$scope.divEmployee = true;
},
function () {
alert('Error in getting records');
});
}
$scope.AddUpdateEmployee = function ()
{
debugger;
var Employee = {
Name: $scope.employeeName,
Email: $scope.employeeEmail,
Age: $scope.employeeAge
};
var getAction = $scope.Action;
if (getAction == "Update") {
Employee.Id = $scope.employeeId;
var getData = myService.updateEmp(Employee);
getData.then(function (msg) {
GetAllEmployee();
alert(msg.data);
$scope.divEmployee = false;
}, function () {
alert('Error in updating record');
});
} else {
var getData = myService.AddEmp(Employee);
getData.then(function (msg) {
GetAllEmployee();
alert(msg.data);
$scope.divEmployee = false;
}, function () {
alert('Error in adding record');
});
}
}
$scope.AddEmployeeDiv=function()
{
ClearFields();
$scope.Action = "Add";
$scope.divEmployee = true;
}
$scope.deleteEmployee = function (employee)
{
var getData = myService.DeleteEmp(employee.Id);
getData.then(function (msg) {
GetAllEmployee();
alert('Employee Deleted');
},function(){
alert('Error in Deleting Record');
});
}
function ClearFields() {
$scope.employeeId = "";
$scope.employeeName = "";
$scope.employeeEmail = "";
$scope.employeeAge = "";
}
});Calling AngularJS
Finally we have to make a call on AngularJS, so we calling AngularJS in Layout.cshtml page
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
<script src="~/Scripts/angular.min.js"></script>
<script src="~/Content/Angular/Module.js"></script>
<script src="~/Content/Angular/Service.js"></script>
<script src="~/Content/Angular/Controller.js"></script>
@Styles.Render("~/Content/css")
<style>
</style>
</head>
<body>
@RenderBody()
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>Once coding all by adding the details of employee the data will be inserted and be shown here as follows,
Conclusion
In this article, we learned about the creation of MVC application with AngularJS. Hope the article helps you to understand.
Recommended Articles
We hope that this EDUCBA information on “ASP.NET MVC AngularJS” was beneficial to you. You can view EDUCBA’s recommended articles for more information.
