Introduction
In this post, I would like to explain Part 2 - How to fetch data from the database using angularjs in MVC4 application.This is our second Post about AngularJS. Here I have explained a little about AngularJS and What we will learn in this section part by part. In Part1 of this post we configured AngularJS in MVC4 application. In this part (Part 2) I am going to explain how to fetch data from the database using angularjs in MVC4 application.
Here In this example I will use AngularJS $http service. $http is an AngularJS service for reading data from remote servers.
Steps :
Step-1: Add a Database.
Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.Step-2: Create table into the database.
Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.Step-3: Add Entity Data Model.
Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.
Step-4: Create a Controller.
Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add.Here I have created a controller "DataController"
Step-5: Add new action into your controller for fetch data from Database and return as JsonResult.
Here I have added "GetLastContact" Action into "DataController". Please write this following codeusing System.Linq; using System.Web.Mvc; namespace MVCWithAngularJs.Controllers { public class DataController : Controller { // // GET: /Data/ //For fetch Last Contact public JsonResult GetLastContact() { Contact c = null; //here MyDatabaseEntities our DBContext using (MyDatabaseEntities dc = new MyDatabaseEntities()) { c = dc.Contacts.OrderByDescending(a => a.ContactID).Take(1).FirstOrDefault(); } return new JsonResult { Data = c, JsonRequestBehavior = JsonRequestBehavior.AllowGet }; } } }
Step-6: Add a new js File for add a new AngularJS controller and a Factory
Go to Solution Explorer > Right Click on folder (where you want to saved your AngularJS controller files, here I have created a folder named "AngularController" under Scripts Folder) > Add > Select Javascript file > Enter name > Add.Write following code in this file.
//here I am separating each angular controller to separate file for make it manageable angular.module('MyApp') //extending from previously created angular module in the previous part .controller('Part2Controller', function ($scope, ContactService) { //inject ContactService $scope.Contact = null; ContactService.GetLastContact().then(function (d) { $scope.Contact = d.data; // Success }, function () { alert('Failed'); // Failed }); }) .factory('ContactService', function ($http) { // here I have created a factory which is a populer way to create and configure services var fac = {}; fac.GetLastContact = function () { return $http.get('/Data/GetLastContact'); } return fac; });
Step-7: Add new action into your controller for Get the View for show data from database.
Here I have added "Part2" Action into "Home" Controller. Please write this following codepublic ActionResult Part2() // Fetch & Show Database Data { return View(); }
Step-8: Add view for the Action & design.
Right Click on Action Method (here right click on form action) > Add View... > Enter View Name > Select View Engine (Razor) > Add.Complete View
@{ ViewBag.Title = "Part2"; } <h2>Part2</h2> <div ng-controller="Part2Controller"> <div style="font-weight:bold"> Contact Details </div> <table> <tr> <td>First Name :</td> <td>{{Contact.FirstName}}</td> </tr> <tr> <td>Last Name : </td> <td>{{Contact.LastName}}</td> </tr> <tr> <td>Contact No1:</td> <td>{{Contact.ContactNo1}}</td> </tr> <tr> <td>Contact No2:</td> <td>{{Contact.ContactNo2}}</td> </tr> <tr> <td>Email ID:</td> <td>{{Contact.EmailID}}</td> </tr> <tr> <td>Address</td> <td>{{Contact.Address}}</td> </tr> </table> </div> @section scripts{ <script src="~/Scripts/AngularController/Part2Controller.js"></script> }