Hur man hämtar data från databas genom en AngularJS – ASP.NET MVC-applikation

Inledning

[Källa]

[GitHub repo]

I den här laborationen ska vi hämta data från databas till vår AngularJS – ASP.NET MVC-applikation. I exemplet kommer vi att använda angulars $http-service för att hämta data från servern.

Steg

  1. Lägg till en databas

    Gå till Solution Explorer > Högerklicka på App_Data-mappen > Add > New Item > Välj ”SQL Server Database” under ”Data” > Ange ett databasnamn > Add

  2. Skapa tabeller i databasen

    Öppna databasen > Högerklicka på Table > Add New Table > Add Columns > Save > Ange tabellnamn [här har namnet Contacts använts] > Ok.

    CREATE TABLE [dbo].[Contacts]
    (
        [ContactId] INT NOT NULL PRIMARY KEY, 
        [FirstName] VARCHAR(100) NULL, 
        [LastName] VARCHAR(100) NULL, 
        [ContactNo1] VARCHAR(20) NULL, 
        [ContactNo2] VARCHAR(20) NULL, 
        [EmailID] VARCHAR(200) NULL, 
        [Address] VARCHAR(300) NULL
    )
  3. Lägg till en Entity Data Model

    Gå till Solution Explorer > Högerklicka på projektet (projektnamnet) > Add > New Item > ADO.NET Entity Data Model > Ange namn på datamodellen [här ContactsModel] > Add.
    Ett popupfönster visas (Entity Data Model Wizard) > Välj Generate from database > Next > Välj Data Connection > Välj aktuell databas > Next > Välj Tables > Ange namespace för Model > Finish.

  4. Skapa en Controller

    Gå till Solution Explorer > Högerklicka på mappen Controllers > Add > Controller > Ange nanm för Controller > Välj följande Template: ”Web API 2 Controller – Empty” > Add.

    I exemplet tilldelar vi Controller namnet DataController.

  5. Lägg till en ny Action till Controller för att hämta data från databasen och returnera det som JsonResult.

  6. Lägg till en ny .js-fil (med en AngularJS Controller och en Factory)

    Gå till Solution Explorer > Högerklicka på mappen där AngularJS-filen ska sparas [i exemplet nedan har vi skapat mappen AngularController under Scripts för ändamålet] > Add > Välj JavaScript file > Tilldela filen ett namn [här Part2Controller.js] > Add.

    //här separerar vi varje Controller i separata filer för att göra det hanterbart
    angular.module('MyApp') //utökning från modulen som skapade i föregående laboration
    .controller('Part2Controller', function ($scope, ContactService) { //injekta ContactService
        $scope.Contact = null;
        ContactService.GetLastContact().then(function (d) {
            $scope.Contact = d.data; // Success
        }, function () {
            alert('Failed'); // Failed
        });
    })
    .factory('ContactService', function ($http) { // här har vi skapat en Factory = ett populärt och vedertaget sätt att skapa Services
        var fac = {};
        fac.GetLastContact = function () {
            return $http.get('/Data/GetLastContact');
        }
        return fac;
    });
    
    ../Scripts/AngularController/Part2Controller.js {Part2Controller} {ContactsService}

    Den ovanstående koden är en Controller som vi har tilldelat namnet ”Part2Controller” samt en Factory med namnet ”ContactService” där vi även har injektat en $http-service

    Factory Vi kan använda Factory för att organisera och dela kod i vår applikation. Factory kan jämföras med servicelagret i en ASP.NET-applikation där vi skriver kod som kan återanvändas i hela vår applikation.

    $http $http är en AngularJS-service som är behjälplig när vi ska utbyta data med servrar remote. Vi kan göra requests fram och tillbaka och det är viktigt eftersom applikationer som vår behöver kunna hämta från och spara till databas. $http är centralt i AngulaJS och hanterar kommunikationen med HTTP-servrar via XMLHttpRequest-objektet (eller JSONP).

  7. Lägg till en ny Action i vår backend-Controller som gör att vi kan visa data från databas.

    I exemplet använder vi nedanstående kod:

    public ActionResult Part2() // Hämta och visa databasdata
    {
        return View();
    }
    Ovanstående kod har lagts till i filen Controllers\HomeController
  8. Lägg till Action-vyn

    Högerklicka på Action-metoden > Add View > Ange filnamnet > Add

    @{
        ViewBag.Title = "Part2";
    }
    <h2>Part2</h2>
    
    Contact Details
    <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{ http://~/Scripts/AngularController/Part2Controller.js }
    \Views\Home\Part2.cshtml
  9. Kör!

Annonser