In
this article I am going to explain how to get the data from database using
AngularJs in asp.net MVC.
Click here to Enlarge |
In
the previous article I have explained how to create a first application withAngularJs in asp.net MVC, Introduction of AngularJs and How to send SMS fromasp.net MVC application.
Description:
I
am using database first approach. I have created a table Tb_City
Id
|
Int, PK
|
CityName
|
varchar(100)
|
Implementation:
Model
(Tb_City.cs):
public partial class Tb_City
{
public int Id { get; set; }
public string CityName { get; set; }
}
Add
Controller
I
have added empty controller to project. Create a Json action to get the data.
Controller
(AngularController.cs) :
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC_Project.Models;
namespace MVC_Project.Controllers
{
public class AngularController : Controller
{
//
// GET: /Angular/
DemoEntities1 db = new DemoEntities1();
public ActionResult Index()
{
return
View();
}
public JsonResult Getcity()
{
var city =
db.Tb_City.ToList();
return
Json(city, JsonRequestBehavior.AllowGet);
}
}
}
Add view
Add
a view for Index action.
Add AngularJs
and Module & Controller
Add
the online AngularJs reference. After that add the module and controller.
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script>
var angular = angular.module('mvcapp', []);
angular.controller('AngularController',
function ($scope, CityService) {
GetAllCity();
function GetAllCity() {
var getAllcity =
CityService.Getcity();
getAllcity.then(function (city) {
$scope.cities = city.data;
}, function () {
alert('Records not found');
});
}
})
angular.service("CityService", function ($http) {
this.Getcity = function () {
return
$http.get("/Angular/Getcity");
};
});
</script>
Complete
code of View (Index.cshtml) :
@{
ViewBag.Title = "MVC-AngualatJs
Tutorial";
}
<h2>MVC-AngualatJs Tutorial </h2>
<div ng-app="mvcapp" ng-controller="AngularController" class="row">
<table>
<tr ng-repeat="city in
cities">
<td>{{$index + 1}}</td>
<td></td>
<td>{{city.CityName}}</td>
</tr>
</table>
</div>
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script>
var angular = angular.module('mvcapp', []);
angular.controller('AngularController',
function ($scope, CityService) {
GetAllCity();
function GetAllCity() {
var getAllcity =
CityService.Getcity();
getAllcity.then(function (city) {
$scope.cities = city.data;
}, function () {
alert('Records not found');
});
}
})
angular.service("CityService", function ($http) {
this.Getcity = function () {
return
$http.get("/Angular/Getcity");
};
});
</script>
No comments:
Post a Comment