Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

MVC Show Data using AngularJS and Web Api

Article:
Viewed:  31 
Posted On:  11/7/2017 8:56:10 PM 
How w can show data in a MVC application using AngularJS and Web Api 

In this article I am going to show how we can show data in a MVC application by using AngularJS and Web API.

Below is my data base table from which I will show data.

1.png

Image 1.

Script of my table is:

CREATE TABLE [dbo].[Employee](
          [EMP_ID] [int] IDENTITY(1,1) NOT NULL,
          [Name] [varchar](100) NULL,
          [Email] [varchar](100) NULL,
          [City] [varchar](50) NULL,
          [Mobile] [varchar](50) NULL,
 CONSTRAINT [PK_Employee] PRIMARY KEY CLUSTERED
(
          [EMP_ID] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF,
IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]

) ON [PRIMARY]
 

GO

 

Now open Visual Studio => File => New => Project

2.png

Image 2.

3.png

Image 3.

Now Right Click on Model Folder => Add  => ADO.NET Entity Data Model

4.png

Image 4.

5.png

Image 5.

6.png

Image 6.

7.png

Image 7.

8.png

Image 8.

9.png

Image 9.

10.png

Image 10.

11.png

Image 11.

Now Add a New Web API controller =>

Right click on Controller => Add Controller => Select Web API 2 Controller

12.png

Image 12.

13.png

Image 13.

EmployeeServiceController will be look like below:

 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Net.Http;
using System.Web.Http;
using MVC_AngularJS_WebAPI_ShowData.Models;

 

namespace MVC_AngularJS_WebAPI_ShowData.Controllers
{
    public class EmployeeServiceController : ApiController
    {
        public List<Employee> GetAllEmployee()
        {
            Entities entities = new Entities();
            return (from c in entities.Employee
                    select c).ToList();

        }
    }
}

 

14.png

Image 14.

After adding Web API controller make a entry in Global.asax file to make available WEB API all across application:

protected void Application_Start()
{
       AreaRegistration.RegisterAllAreas();
       System.Web.Http.GlobalConfiguration.Configure(WebApiConfig.Register);
       FilterConfig.RegisterGlobalFilters(GlobalFilters.Filters);
       RouteConfig.RegisterRoutes(RouteTable.Routes);
       BundleConfig.RegisterBundles(BundleTable.Bundles);
}

15.png

Image 15.

Now Right click on Controllers Folder => Add  Controller => MVC 5 Controller – Empty

ManageEmployeeController

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

 

namespace MVC_AngularJS_WebAPI_ShowData.Controllers

{
    public class ManageEmployeeController : Controller
    {
        // GET: ManageEmployee

        public ActionResult Index()
        {
            return View();
        }
    }
}

 

Now Open => Views => ManageEmployee => Index.cshtml

@{

    Layout = null;

}

<!DOCTYPE html> 

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Showing Data in MVC Application using AngularJS & WEB API</title>
</head>
<body>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
    <script type="text/javascript">

        var app = angular.module('MyApp', [])
        app.controller('MyController', function ($scope, $http, $window) {

            $scope.IsVisible = false;
            $scope.Search = function () {

                var post = $http({
                    method: "GET",
                    url: "/api/EmployeeService/GetAllEmployee",
                    headers: { "Content-Type": "application/json" }

                });
 

                post.success(function (data, status) {
                    $scope.Employees = data;
                    $scope.IsVisible = true;

                });
 

                post.error(function (data, status) {
                    $window.alert(data.Message);

                });
            }
        });

    </script>

    <div ng-app="MyApp" ng-controller="MyController">
 

        <div  style="border:solid 14px blue; width:95%; text-align:center;color:lightseagreen;
  font-weight:bold; font-size:18pt;">Showing Data in MVC Application using AngularJS & WEB API</div>

       <br /> <input type="button" value="Get Records" ng-click="Search()" />
 

        <hr />

        <table cellpadding="5" cellspacing="5" ng-show="IsVisible" style="border:solid 14px yellow; width:100%;">

            <tr style="border:solid 1px red; background-color:cadetblue; color:blue; font-weight:bold; font-size:18pt;">

                <th>EMP_ID</th>

                <th>Name</th>

                <th>City</th>

                <th>Email</th>

                <th>Mobile</th>

            </tr>

            <tbody cellpadding="5" cellspacing="5" ng-repeat="m in Employees"
         style="background-color:cornflowerblue; border:1px dotted white;color:white; font-weight:bold; font-size:14pt;">

                <tr>
                    <td>{{m.EMP_ID}}</td>
                    <td>{{m.Name}}</td>
                    <td>{{m.City}}</td>
                    <td>{{m.Email}}</td>
                    <td>{{m.Mobile}}</td>

                </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

Now Run your Application:

 16.png

Image 16.

 

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us