ASP.NET MVC With AngularJS

ASP.NET MVC With AngularJS


In this Tutorial we have learn ASP.NET MVC With AngularJS, AngularJS is a framework for creating dynamic web application. Using AngularJS we can create single page dynamic web application. AngularJS provides feature for data binding in HTML page. AngularJS code is unit testable. AngularJS provides developers options to write client side application in a MVC way.

The following is directives which is used in AngulerJs :

  • ng-app:   It is entry point of AngularJS to the page. It shows that the application is AngularJS app.
  • ng-controller:   It attaches to view to defines which controller is used.
  • ng-repeat:   It creates loop in view like foreach loop.
  • module:   It is use retrieve all angular module.
  • $http:   It is HttpRequest object for requesting external data.
  • $http.get:   It reads json data. It takes parameter url.

Here we are learn how insert operation can be perform using Angularjs with mvc using sql server database with store procedure

Step 1 : Create mvc web aplication

Step 2 : Create database like following tbEmployee table

ASP.NET MVC With AngularJS

Step 3 :Now Create Store procedure for insert Employee data

ALTER PROCEDURE [dbo].[SP_InsertEmployee]
@EmpID int,
@Name nvarchar(20),
@City nvarchar(20),
@Phone nvarchar(20)

insert into tbEmployee(Name,City,Phone)values(@Name,@City,@Phone);


Step 4: Now Create controller and create JsonResult  Method to insert data to database

public ActionResult AddEmployee()
return View();

public JsonResult AddEmployee1(BAL.Employee emp)
if (emp != null)
string st = string.Empty;
SqlCommand cmd = new SqlCommand(“SP_InsertEmployee“, con);
cmd.CommandType = CommandType.StoredProcedure;
cmd.Parameters.Add(“@EmpID“, SqlDbType.Int);
cmd.Parameters.Add(“@Name”, SqlDbType.NVarChar);
cmd.Parameters.Add(“@City”, SqlDbType.NVarChar);
cmd.Parameters.Add(“@Phone“, SqlDbType.NVarChar);

cmd.Parameters[“@EmpID“].Value = 0;
cmd.Parameters[“@Name“].Value = emp.Name;
cmd.Parameters[“@City“].Value = emp.City;
cmd.Parameters[“@Phone“].Value = emp.Phone;
st = “success“;
return Json(st,JsonRequestBehavior.AllowGet) ;

return Json(“fail“, JsonRequestBehavior.AllowGet);

Step 5 : Now Create Modul.js file and add following code to call the controller,using this service data can be transfer between controller to view and database.

var app = angular.module(“HomeApp“,[]);

app.controller(“EmployeeController“, function ($scope, $http) {
$scope.btntext = “Save”;
$scope.Savedata = function () {
method: ‘post’,
url: ‘/Employee/AddEmployee1‘,
}).success(function (d) {
$scope.register = null;
}).error(function () { alert(‘Failed‘);})



Step 6 : Now add Employee.cshtml view and add AngularJs Plugin for calling the Angular services at Head tag of html as following.

<script src=”“></script>

<script src=”/AngularScript/Module.js“></script>

<div ng-app=”HomeApp” ng-controller=”EmployeeController“>
<div class=”divList“>
<p><b><i>Register Employee</i></b></p>
<table class=”table“>
<input type=”text” ng-model=”register.Name” />
<input type=”text” ng-model=”register.City” />
<input type=”text” ng-model=”register.Phone” />


<input type=”button” class=”btn btn-default” value=”Submit” ng-click=”Savedata()” />


Step 7 : Now run project And view the result

Register Employee


Hi, if you have any query reguarding, ASP.NET MVC With AngularJS,then feel free to comment on comment section