Question

所以我一直在浏览其他帖子，但是我发现的修复都没有解决我的问题。我希望这里有一些经验更丰富的编码员能够帮助我，mods我很抱歉，如果事实证明我在这里是愚蠢的。

因此，我在Angular中为asp.net Web应用程序构建了一个应用程序，角度模块应该显示来自实体模型的数据并将其显示在div中。

现在代码无效，我没有错误。从我所看到的，我怀疑它是预订控制器，但我无法理解错误。

这是我的代码

_Layout.cshtml

` <!DOCTYPE html>
 <html>
 <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>@ViewBag.Title - Web App</title>
    @Styles.Render("~/Content/css")
    @Styles.Render("~/Content/js")
    @Scripts.Render("~/bundles/angular")
    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/bootstrap")


</head>
<body ng-app="BookingsApp">

//a bunch of navbar stuff and other content



    @RenderSection("scripts", required: false)
</body>
</html>

` HomeController.cs

`using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;

namespace WebApp.Controllers
 {

    public class HomeController : Controller
    {

  //More navigation stuff

  public JsonResult GetAll()
    {
        List<Booking_form> Booking = new List<Booking_form>();
        using (BookingEntities1 ed = new BookingEntities1())
        {
            Booking = ed.Booking_forms.ToList();
            return new JsonResult { Data = Booking, JsonRequestBehavior = JsonRequestBehavior.AllowGet };

            }

         }



    }
}

我希望预订显示的页面

    @section scripts{
    <script src="~/Content/Angular/BookingModule.js"></script>
    <script src="~/Content/Angular/BookingController.js"></script>
    <script src="~/Content/Angular/BookingService.js"></script>
    <link href="~/Content/TableStyle.css" rel="stylesheet" />
    }


    <div ng-controller="BookingController">


        <table>
            <tr>
                <th>Id</th>
                <th>Class</th>
                <th>Day</th>
            </tr>
            <tr></tr>
            <tr ng-repeat="e in BookingList">
                <td>{{e.BookingId}}</td>
                <td>{{e.ClassName}}</td>
                <td>
                    {{e.Day}}
                </td>
            </tr>
        </table>

    </div>

角度模块 var app = angular.module('BookingsApp',[]);

Angular Service

    app.service('BookingService', function ($http) {
    this.getBookings=function () {
    return $http.get('/HomeController/GetAll');
      }
    });

角度控制器

    `app.controller('BookingController',function($scope,BookingService) {
     function getBookingList() {
     BookingService.getBookings().then(function (emp) {

            $scope.BookingList = emp.data;
            }, function (error) {
                alert('Failed to fetch data');
             });
        }
    });

` 我更喜欢在页面上显示一个div，显示信息与ng-app =＆＃34; BookingApp＆＃34;但是这会导致BookingController引用导致错误。

非常感谢任何帮助。

编辑：

通过浏览器控制台再次查看此消息将显示所有3个角度脚本：

`Resource interpreted as Stylesheet but transferred with MIME type application/javascript: "http://localhost:49532/Content/Angular/BookingModule.js".

解决了，不得不做一个完整的重建并利用服务工厂。对于遇到此问题的其他人，请参阅提供的教程链接。

http://www.infragistics.com/community/blogs/dhananjay_kumar/archive/2015/05/13/how-to-use-angularjs-in-asp-net-mvc-and-entity-framework-4.aspx

请注意，如果解决方案使用多个具有外键依赖关系的表，则此解决方案将无效。

AngularJS控制器未定义

0 个答案: