Hur hämtar och visar man tabelldata i en AngularJS – ASP.NET-applikation

Inledning

[Källa]

[GitHub repo]

I den här laborationen ska vi se hur man tar emot och hanterar tabelldata.

I laborationen kommer vi att använda oss av AngularJS direktiv ng-repeat. ng-repeat har som uppgift att repetera html-element och är ett av de vanligaste direktiven i som används när man loopar igenom collections.

Steg

  1. Skapa tabeller i databasen

    Öppna databasen > Högerklicka på Tables > Add New Table > Add Columns > Save > Ange ett namn på tabellen [i exemplet används Employees] > Ok


    Name Data Type Allow Nulls Default
    EmployeeID int
    FirstName varchar(50)
    LastName varchar(50)
    HireDate datetime
    Address varchar(200)
    City varchar(30)
    Postal Code varchar(10)
  2. Uppdatera dataentitetsmodellen

    Gå till Solution Explorer > Öppna dataentitetsmodellen [här ContactsModel.edmx] > Högerklicka på en tom yta i den för att få fram context-menyn > Update Model From Database… > Nu får vi fram ett pop-up-fönster (Entity Data Model Wizard) > Välj Tables > Finish.

  3. Lägg till en backend Action (i DataController), hämta data från databasen och returnera resultatet som JsonResult.

    public JsonResult GetEmployeeList()
                {
                    List>Employee< Employee = new List>Employee<();
                    using (MyDatabaseEntities dc = new MyDatabaseEntities())
                    {
                        Employee = dc.Employees.OrderBy(a => a.FirstName).ToList();
                    }
     
                    return new JsonResult { Data = Employee, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
                }
  4. Lägg till en ny .js-fil med en AngularJS Controller och ett Factory

    Gå till Solution Explorer > Högerklicka på foldern där AngularJS-javascriptfilerna ska sparas [här /Scripts/AngularController/] > Add > Välj JavaScript File > Ange ett namn [här Part4Controller.js]

    angular.module('MyApp')
    .controller('Part4Controller', function ($scope, EmployeeService) {
        $scope.Employees = null;
        EmployeeService.GetEmployeeList().then(function (response) {
            $scope.Employees = response.data;
        }, function (error) {
            alert('Error!');
        });
    })
    .factory('EmployeeService', function ($http) {
     
        var fac = {};
        fac.GetEmployeeList = function () {
            return $http.get('/Data/GetEmployeeList');
        }
        return fac;
    });
  5. Lägg till en Action i vår backend Controller [här HomeController] som kommunicerar med den View som vi ska skapa i nästa steg

    public ActionResult Part4() // Hämta och visa tabelldata
    {
        return View();
    }
  6. Lägg till en View som visar hämtad tabelldata

    @{
        ViewBag.Title = "Part4";
    }
    @* Här har vi lagt till lite CSS för att det hela ska se bra ut *@
    <style>
        .tableData {
            border-left: solid 1px #D8C3C3;
            border-top: solid 1px #D8C3C3;
        }
            .tableData tr {
            }
            .tableData td, .tableData th {
                border-right: solid 1px #D8C3C3;
                border-bottom: solid 1px #D8C3C3;
                text-align: left;
                padding: 5px;
            }
            .tableData td {
            }
            .tableData th {
                background-color: #FAFAFA;
                padding: 7px 5px;
                border-bottom-color: #9C9C9C;
            }
        .odd {
            background-color: #f3f3f3;
        }
        .even {
            background-color: #ffffff;
        }
    </style>
    <h2>Part4</h2>
    
    Employee ID Employee Name Hire Date Address City Postal Code
    {{e.EmployeeID}} {{e.FirstName}} {{e.LastName}} {{e.HireDate.slice(6, -2) | date: 'dd-MM-yyyy'}} {{e.Address}} {{e.City}} {{e.PostalCode}}
    @section scripts{ http://~/Scripts/AngularController/Part4Controller.js }
  7. Kör projektet

Annonser