Get data from database and display using AngularJs in asp.net MVC - Free Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server,WCF,Entity framework snippets and tutorial

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>


What do you think about this article?

If you found this article useful, please share and follow on Facebook, Twitter, Google Plus and other social media websites. To get free updates subscribe to newsletter. Please put your thoughts and feedback in comments section.

Share this

Share on FacebookTweet on TwitterPlus on Google+


EmoticonEmoticon