AngularJS with ASP.NET MVC
I have already shared post on
AngularJS with asp.net CRUD operations but in this post I am going to share Basic
example that retrieves data from database and display it using
AngularJS,Asp.net MVC and Entity framework.
AngularJS
AngularJS is a JavaScript framework
open-source client-side web application framework mainly maintained by Google
and by a community of individuals and corporations to address many of the
challenges encountered in developing single-page applications.
Following are some angular directives
I used in this example
ng-app
Declares the root element of an
AngularJS application, under which directives can be used to declare bindings
and define behavior.
ng-controller
Specifies a JavaScript controller
class that evaluates HTML expressions.
ng-repeat
Instantiate an element once per item
from a collection.
AngularJS with ASP.NET MVC Example
In layout section I added reference to
angularJS controller,service code.
Layout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>@ViewBag.Title</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="~/Content/js/AngApp.js"></script>
<script src="~/Content/js/Employee.js"></script>
<script src="~/Content/js/Service.js"></script>
</head>
<body>
@RenderBody()
@Scripts.Render("~/bundles/jquery")
@RenderSection("scripts", required: false)
</body>
</html>
Asp.net MVC View and AngularJS
View
@{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<div ng-app="EmpApp" ng-controller="EmpCntrlr">
<table border="1" cellpadding="10" align="center" class="table table-bordered
table-striped">
<tr>
<th>
Employee Id
</th>
<th>
Employee Name
</th>
<th>
Address
</th>
<th>
Email Id
</th>
</tr>
<tr ng-repeat="emp in employees|orderBy
:'Name'">
<td>
{{emp.Id}}
</td>
<td>
{{emp.Name}}
</td>
<td>
{{emp.Address}}
</td>
<td>
{{emp.EmailId}}
</td>
</tr>
</table>
</div>
Asp.net Entity
framework and Model
using System;
using System.Collections.Generic;
using System.Data.Entity;
using System.Linq;
using System.Web;
namespace AngularMvcApp.Models
{
public class EmolyeeDbContext : DbContext
{
public EmolyeeDbContext(): base("DefaultConnection")
{ }
protected override void OnModelCreating(DbModelBuilder modelBuilder)
{
Database.SetInitializer<EmolyeeDbContext>(null);
}
public DbSet<EmployeeData> EmployeeData { get; set; }
}
}
Asp.net
Employee Model
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.ComponentModel.DataAnnotations;
namespace AngularMvcApp.Models
{
public class EmployeeData
{
[Key]
public int Id { get; set; }
public string Name { get; set; }
public string Email { get; set; }
public string Address { get; set; }
}
}
Asp.net MVC
Controller
using AngularMvcApp.Models;
using System;
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace AngularMvcApp.Controllers
{
public class HomeController : Controller
{
//
// GET: /Home/
public ActionResult Index()
{
return View();
}
// GET: All Employees
public JsonResult GetAllEmployees()
{
using (EmolyeeDbContext contextObj = new EmolyeeDbContext())
{
var EmployeeList =
contextObj.EmployeeData.ToList();
return Json(EmployeeList, JsonRequestBehavior.AllowGet);
}
}
}
}
AngularJS Model
var app = angular.module("EmpApp", []);AngularJS Controller
app.controller("EmpCntrlr", function ($scope, EmployeeService) {
GetAllEmployee();
function GetAllEmployee() {
debugger;
var getAllEmployee =
EmployeeService.getEmployee();
getAllEmployee.then(function (empls) {
$scope.employees = empls.data;
}, function () {
alert('Employee data not found');
});
}
});
AngularJS Service
app.service("EmployeeService", function ($http) {
this.getEmployee = function () {
debugger;
return $http.get("/Home/GetAllEmployees");
};
});
धन्यवाद !!!