Wednesday, May 25, 2016

Get data from database and display using AngularJs in asp.net MVC

In this article I am going to explain how to get the data from database using AngularJs in asp.net MVC.

Get data from database and display using AngularJs in asp.net MVC
Click here to Enlarge

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