Visa data i tabeller med expandera fält för detaljer.

Inledning

[Källa]

[GitHub repo]

I den här laborationen ska vi titta på hur man kan hämta och visa data samt simultant hämta ytterligare detaljer om dessa data i en AngularJS / ASP.NET MVC-applikation.

Att visa tabelldata är en mycket vanlig uppgift för utvecklare. Ibland är det emellertid olämpligt att visa all data på en gång och då kan man tänka sig en lösning där detaljer hämtas och visas separat. Kanske klickar man på ett namn på en person i en tabell > en extrarad fälls ut > data hämtas > detaljer visas.

Steg

  1. Skapa tabeller i databas

    Öppna databas > Högerklicka på Table > Add New Table > Add Columns > Save > Ange tabellnamn [i denna laboration har vi valt Customers och Orders]

    CREATE TABLE [dbo].[Customers]
    (
        [CustomerId] INT NOT NULL PRIMARY KEY, 
        [ContactName] VARCHAR(100) NOT NULL, 
        [Address] VARCHAR(400) NULL, 
        [City] VARCHAR(50) NULL, 
        [PostalCode] VARCHAR(10) NULL, 
        [Phone] VARCHAR(50) NULL
    )
    Table Customers
    CREATE TABLE [dbo].[Orders]
    (
        [OrderId] INT NOT NULL PRIMARY KEY, 
        [CustomerId] INT NOT NULL, 
        [OrderDate] DATETIME NOT NULL, 
        [ShippedDate] DATETIME NOT NULL, 
        [ShipName] VARCHAR(100) NULL, 
        [ShipAddress] VARCHAR(300) NULL, 
        [ShipPostalCode] VARCHAR(10) NULL
    )
    Table Orders
  2. Uppdatera dataentitetsmodellen

    Gå till Solution Explorer > Öppna dataentitetsmodellen [här ContactsModel.edmx] > Högerklicka på en tom yta för kontextmenyn > Update Model From Database… > Ett popupfönster visas (Entity Data Model Wizard) > Välj Tables > Finish

    Kontextmenyn
    Entity Data Model Wizard
  3. Skapa en View-Model

    I laborationen har vi skapat en View-Model i mappen Models\ViewModels [i laborationen CustomerOrders.cs]

    public class CustomerOrders
    {
        public Customer Customer { get; set; }
        public List<Order> Orders { get; set; }
    }

    Domain-Model En View-Model hanterar den data som du vill ha på din View (sida). Detta gäller oavsett om det gäller statisk text eller editerbar input-data.

    View-Model En View-Model hanterar den data som finns i domänens datamodell (vanligtvis den data som finns i databasen).

    public class Employee : IEntity
    {
         public int Id { get; set; }
         public string FirstName { get; set; }
         public string LastName { get; set; }
         public DateTime DateCreated { get; set; }
    }
    Employee
    public class CreateEmployeeViewModel
    {
         public string FirstName { get; set; }
         public string LastName { get; set; }
    }
    CreateEmployeeViewModel

    Som synes återfinns blott två properties i View-Model. Varför? Exempelvis kan Id inte sättas från View, det kanske har skapats automatiskt från Employee table, DateCreated kan kanske komma från en lagrad procedur eller har blivit genererad i applikationens servicelager. Av de anledningarna (eller andra liknande) finns inte nämnda properties med i View-Model.

    MVVM ViewModel vs MVC ViewModel

    MVC ViewModel

    I MVC finns all nödvändig View-data i ViewModel. Datainnehållet har ursprung i domänens data-Model. Aktuell View läser data från ViewModel och renderar output. Input från View skickas till Controller som manipulerar Model, konstruerar lämplig ViewModel och återigen dumpar över innehållet till View för rendering.

    MVVM ViewModel

    I MVVM tjänar ViewModel samma syfte som i MVC men den ersätter också delar av MVC Controller genom att tillhandahålla kommandon som View kan använda för att manipulera Model direkt med. Databinding i WPF hanterar uppdatering av View i enlighet med förändringar i ViewModel.

  4. Lägg till en ny action i din controller [här DataController.cs] som hämtar data från databasen och returnerar den som ett JSON-result

    [HttpGet]
    public JsonResult CustomerOrders()
    {
        List<CustomerOrders> CO = new List<CustomerOrders>();
        using (MyDatabaseEntities dc = new MyDatabaseEntities())
        {
            var cust = dc.Customers.OrderBy(a => a.ContactName).ToList();
            foreach (var i in cust)
            {
                var orders = dc.Orders.Where(a => a.CustomerID.Equals(i.CustomerID)).OrderBy(a=>a.OrderDate).ToList();
                CO.Add(new CustomerOrders
                {
                        Customer = i,
                        Orders = orders
                });
            }         
        }
        return new JsonResult { Data = CO, JsonRequestBehavior = JsonRequestBehavior.AllowGet};
    }
  5. Lägg till en ny .js-fil med AngularJS Controller + Factory. Uppgiften är att hämta kundordrar.

    Gå till Solution Explorer > Högerklicka på mappen där Controller till AngularJS ska finnsas > Add > Välj JavaScript-fil > Välj namn > Add.

    angular.module('MyApp')  //utöka modulen från laboration 1
    .controller('Part7Controller', function ($scope, OrderService) { //explained about controller in Part2
        $scope.Orders = [];
     
        OrderService.GetOrders().then(function (d) {
            $scope.Orders = d.data;
        });
    })
    .factory('OrderService', function ($http) {
        var fac = {};
        fac.GetOrders = function () {
            return $http.get('/Data/CustomerOrders');
        }
        return fac;
    });
  6. Lägg til en ny backend Action som renderar den View som ska visas

    
    
  7. Lägg till en View som visar data [eg. Kund-Ordrar]

    Högerklicka på den aktuella Action-metoden > Add View… > Tilldela View ett namn > Add.

    @{
        ViewBag.Title = "Part7";
    }
     
    <style>
        /*Lite CSS för att snygga till det hela*/
        .tabContainer {
            max-height:400px;
            overflow:auto;
            width:80%;
        }
        .tableData {
            border-left:solid 1px #D8C3C3;
            border-top:solid 1px #D8C3C3;
            width:100%;
        }
            .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;
        }
        
        tr.sub {
            display:none;
        }
        .CX {
            width:35px;
        }
        .CX span {
            font-family: fantasy;
            font-size: 15px;
            display: block;
            width: 100%;
            cursor: pointer;
            text-align: center;
        }
    </style>
     
    <h2>Nästlade tabelldata med AngularJS</h2>
    
    Contact Name Phone Address City Postal Code
    + {{O.Customers.ContactName}} {{O.Customers.Phone}} {{O.Customers.Address}} {{O.Customers.City}} {{O.Customers.PostalCode}}
    Order ID Order Date Shipped Date Ship Name Address Postal Code
    {{a.OrderID}} {{a.OrderDate.slice(6,-2) | date:'dd-MM-yyyy'}} {{a.ShippedDate.slice(6,-2) | date:'dd-MM-yyyy'}} {{a.ShipName}} {{a.ShipAddress}} {{a.ShipPostalCode}}
    @section Scripts{ http://~/Scripts/AngularController/Part7Controller.js }
  8. Lägg till jQuery-kod som hanterar visning av detaljer

    Lägg till följande kodsnutt i View (.cshtml-filen);

            $(function () {
                $('body').on('click', '.CX span', function () {
                    //When Click On + sign
                    if ($(this).text() == '+') {
                        $(this).text('-');
                    }
                    else {
                        $(this).text('+');
                    }
                    $(this).closest('tr') // rad med +-tecken
                    .next('tr') // nästa rad med +-tecken
                    .toggle(); // dölj/visa rader
     
                });
            });
        
  9. Kör projektet

    Skapa lite exempeldata manuellt i databasen och kör igång projektet!

Annonser