Ansicht zeigt keine Ergebnisse. Angularjs MVC

-2

Ich versuche, Datensätze aus der Datenbank mit asp.mvc mit eckigen js zu holen, aber ich bin nicht in der Lage, Datensätze zu bekommen.Ansicht zeigt keine Ergebnisse. Angularjs MVC

Ich habe Mitarbeiter Tabelle

Mitarbeiter-Controller

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

namespace SelectData.Controllers 
{ 
    public class EmployeeController : Controller 
    { 
     // GET: Employee 
     public ActionResult Index() 
     { 
      return View(); 
     } 

     public ActionResult getAll() 
     { 
      using (EmployeeDBEntities dbContext = new EmployeeDBEntities()) 
      { 
       var employeeList = dbContext.Employees.ToList(); 
       return View(employeeList); 
      } 
     } 
    } 
}

Angular JS Modul

var app = angular.module("AngularApp", []);

Angular JS-Service

app.service("EmployeeService", function ($http) { 
    this.getEmployee = function() { 
     debugger; 
     return $http.get("/employee/getAll"); 
    }; 
});

Angular JS-Controller

app.controller("EmpCtrl", function ($scope, EmployeeService) { 
    GetAllEmployee(); 

    function GetAllEmployee() { 
     debugger; 
     var getAllEmployee = EmployeeService.getEmployee(); 
     getAllEmployee.then(function (emp) { 
      $scope.employees = emp.data; 
     }, function() { 
      alert('Data not found'); 
     }); 
    } 
});

Ansicht

@{ 
    ViewBag.Title = "getAll"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<div ng-controller="EmpCtrl"> 
    <div> 
     <h2 align="center">Angular JS Basic Example</h2> 
     <h5 align="center">Employee List</h5> 
     <table border="1" cellpadding="10" align="center"> 
      <tr> 
       <td> 
        Employee Id 
       </td> 
       <td> 
        First Name 
       </td> 
       <td> 
        Address 
       </td> 
      </tr> 
      <tr ng-repeat="emp in employees"> 
       <td> 
        {{emp.EmpId}} 
       </td> 
       <td> 
        {{emp.FirstName}} 
       </td> 
       <td> 
        {{emp.LastName}} 
       </td> 
      </tr> 
     </table> 
    </div> 
</div>

_Layout.cshtml

<!DOCTYPE html> 
<html ng-app="AngularApp"> 

<head> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width" /> 
    <title>@ViewBag.Title</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script> 
    <script src="~/Content/angular/Module.js"></script> 
    <script src="~/Content/angular/Service.js"></script> 
    <script src="~/Content/angular/Controller.js"></script> @Styles.Render("~/Content/css") 
</head> 

<body> 
    @RenderBody() @Scripts.Render("~/bundles/jquery") @RenderSection("scripts", required: false) 
</body> 

</html>

Daten werden nicht im Browser angezeigt, aber es zeigt, wie JSON-Format auf Browser. Bitte legen nahe,

Quelle

2016-08-29 user1030181

Überprüfen Sie Ihre Browser-Konsole für js Fehler? Macht es den http-Aufruf? Überprüfen Sie die Netzwerkregisterkarte. Dein Code sieht gut aus. Gibt es ein Array von Elementen mit diesen Eigenschaften zurück ('EmpId')? – Shyju

ja es macht http Anruf – user1030181

Was wird von der API zurückgegeben? –

Ihre getAll Aktionsmethode eine Ansicht Ergebnis zurückgibt, die im Grunde HTML-Markup ist (ein String). Sie sollten ein JSON-Array zurückgeben, das Ihre Daten darstellt. Jedes Element im Array sollte EmpId, FirstName und LastName Eigenschaften haben ..

public ActionResult getAll() 
{ 
    using (var db = new EmployeeDBEntities()) 
    { 
     var employeeList = db.Employees.Select(f=>new { EmpId =f.EmpId , 
                 FirstName = f.FirstName, 
                 LastName = f.LastName } 
              ).ToList(); 
     return Json(employeeList,JsonRequestBehavior.AllowGet); 
    } 
}

Hier bin ich Projizieren der Mitarbeiter von Elementen zu einem annonymous Objekt. Das Ergebnis von getAll wird also ein JSON-Array sein.

[ 
    { 
     "EmpId": 1, 
     "FirstName": "Shyju", 
     "FirstName": "K" 
    } 
]

Welche Ihre Winkel Code in der Lage sein wird, für die BTW ng-repeat

zu verwenden, Ihr Markup-Code in einer anderen Ansicht (außer getAll.cshtml) sein sollte, und Sie sollten diese Aktion Methode in Ihrem Browser zuzugreifen versuchen, (Kann die Indexansicht sein?)

Quelle

2016-08-29 19:25:33 Shyju

Es lädt die JSON-Datei, aber zeigt keine Daten in der Ansicht – user1030181

was Sie meinen, laden Sie die Datei? Öffnen Sie die Browser-Registerkarte Netzwerk und sehen Sie die Antwort von dieser Ajax-Ruf. Ist es kein Array? – Shyju

Es lädt die Datei getAll.json mit den folgenden Daten: '{{" EmpId ": 1," Vorname ":" Andy "," Nachname ":" Toe "}, {" EmpId ": 2," Vorname ":" Jessie "," Nachname ":" Ed "}, {" EmpId ": 3," Vorname ":" John "," Nachname ":" Heslop "}, {" EmpId ": 4," Vorname ":" Lucy ", "LastName": "Stall"}] ' – user1030181

Ansicht zeigt keine Ergebnisse. Angularjs MVC

Antwort

Verwandte Themen