ASP.NET MVC With AngularJS

Introduction:

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)

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

END

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;
con.Open();
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;
cmd.ExecuteNonQuery();
con.Close();
st = “success“;
return Json(st,JsonRequestBehavior.AllowGet) ;

}
else
{
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 () {
$http({
method: ‘post’,
url: ‘/Employee/AddEmployee1‘,
data:$scope.register
}).success(function (d) {
$scope.register = null;
alert(d);
}).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.

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

</tr>
<tr>
<td>Action</td>

</div>

Step 7 : Now run project And view the result

Register Employee

Name
City
Phone
Action

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

SEE MORE

codelerner

Header

Pages

Categories

ASP.NET MVC With AngularJS