You must Sign In to post a response.
  • Category: ASP.Net MVC

    Dispaly data and html using angularjs in MVC

    Hi,

    Iam new to MVC and AngularJs. I want to display data from database in table Format.

    I have created employee table and connected using Entity frameworks Database First method.following is my working code.

    problem is it display the table header first and display records later.there is some seconds gap.

    Employee Controller

    public class EmployeeController : Controller
    {
    ExerciseEntities1 Db = new ExerciseEntities1();

    // GET: /Employee/
    public ActionResult Index()
    {
    return View();

    }
    public JsonResult GetEmployee()
    {
    var emp = Db.Employees.ToList();
    return Json(emp, JsonRequestBehavior.AllowGet);
    }
    }

    Model Class

    public partial class Employee
    {
    public int Id { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Company { get; set; }
    }

    View

    <div ng-app="mvcapp" ng-controller="DemoController">
    <form name="myform">
    <table>
    <tr>
    <th>Id</th>

    <th>
    First Name
    </th>
    <th>
    LastName
    </th>
    <th>
    Company
    </th>

    </tr>
    <tr ng-repeat="empModel in employees">
    <td>{{empModel.Id}}</td>
    <td>{{empModel.FirstName }}</td>
    <td>{{empModel.LastName }}</td>
    <td>{{empModel.Company}}</td>


    </tr>
    </table>
    </form>


    </div>

    <style>
    input[type=button][disabled=disabled] {
    opacity: 0.65;
    cursor: not-allowed;
    }

    table tr th {
    padding: 10px 30px;
    }

    table tr td {
    padding: 10px 30px;
    }
    </style>

    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
    <script>
    var angular = angular.module('mvcapp', []);

    angular.controller('DemoController', function ($scope, $http) {

    GetAllData();
    $scope.isDisabledupdate = true;
    //Get All Employee
    function GetAllData() {
    $http.get('/Employee/GetEmployee').success(function (data) {

    $scope.employees = data;
    alert(data);
    });
    };




    });
    </script>

    My requirement is to display HTML and Data during page load using ng-init in angular js

    How to solve this

    Regards

    Baiju
  • #769245
    hi

    check your debugger window you can find error description

    Name : Dotnet Developer-2015
    Email Id : kumaraspcode2009@gmail.com

    'Not by might nor by power, but by my Spirit,' says the LORD Almighty.


Sign In to post your comments