尝试在ASP.Net控制器中填充数据并使用angularjs获取它的视图_Angularjs_Asp.net Mvc

尝试在ASP.Net控制器中填充数据并使用angularjs获取它的视图

angularjs asp.net-mvc

尝试在ASP.Net控制器中填充数据并使用angularjs获取它的视图,angularjs,asp.net-mvc,Angularjs,Asp.net Mvc,我试图通过控制器填充数据，并使用AngularJS在视图中显示它。我正在使用一个函数返回JSON数据并在视图中使用数据。但是由于一些错误，我无法获取数据控制器 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using Newtonsoft.Json; using Newtonsoft.Json.Serialization; n

我试图通过控制器填充数据，并使用AngularJS在视图中显示它。我正在使用一个函数返回JSON数据并在视图中使用数据。但是由于一些错误，我无法获取数据

控制器

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using Newtonsoft.Json;
using Newtonsoft.Json.Serialization;

namespace Angular4DotnetMvc.Controllers
{
    public class CourseController : Controller
    {
        // GET: Course
        public ActionResult Index()
        {
            return View("Index","",GetCourses());
        }



        private object GetCourses()
        {
            var courses = new []{
            new CourseVm {Number = "1", Name = "Science", Instructor= "Sai"},
            new CourseVm {Number = "2", Name = "Geography", Instructor= "Ram"}
            };
            var settings = new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver()};
            return JsonConvert.SerializeObject(courses, Formatting.None, settings);
        }
    }

    public class CourseVm
    {
        public string Number { get; set; }
        public string Name { get; set; }
        public string Instructor { get; set; }
    }
}

Index.cshtml

@model string
@{

    Layout = "~/Views/Shared/_Layout.cshtml";
}


<div class="container" ng-app>
    <div class="row">
        <table class="table table-condensed table-hover">

            <tr ng-init="courses = @Html.Raw(Model)">
                <th>Course</th>
                <th>Course Name</th>
                <th>Instructors</th>
            </tr>

            <tr ng-repeat="course in courses">

                <td>{{course.Number}}</td>
                <td>{{course.Name}}</td>
                <td>{{course.Instructor}}</td>

            </tr>

        </table>
    </div>

</div>

<html>
<head>
    <title>Angular4DotNet</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <script src="~/Scripts/jQuery/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/bootstrap/bootstrap.js"></script>
    <link href="~/Scripts/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Scripts/bootstrap/bootstrap.css" rel="stylesheet" />
    @RenderSection("JavaScriptInHeader",required:false)
</head>
<body ng-app>
   @RenderBody()
</body>
</html>

@模型字符串
@{
Layout=“~/Views/Shared/_Layout.cshtml”；
}
课程
课程名称
教官
{{course.Number}
{{course.Name}
{{课程.讲师}

Layout.cshtml

@model string
@{

    Layout = "~/Views/Shared/_Layout.cshtml";
}


<div class="container" ng-app>
    <div class="row">
        <table class="table table-condensed table-hover">

            <tr ng-init="courses = @Html.Raw(Model)">
                <th>Course</th>
                <th>Course Name</th>
                <th>Instructors</th>
            </tr>

            <tr ng-repeat="course in courses">

                <td>{{course.Number}}</td>
                <td>{{course.Name}}</td>
                <td>{{course.Instructor}}</td>

            </tr>

        </table>
    </div>

</div>

<html>
<head>
    <title>Angular4DotNet</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>
    <script src="~/Scripts/jQuery/jquery-3.1.1.min.js"></script>
    <script src="~/Scripts/bootstrap/bootstrap.js"></script>
    <link href="~/Scripts/bootstrap/bootstrap.min.css" rel="stylesheet" />
    <link href="~/Scripts/bootstrap/bootstrap.css" rel="stylesheet" />
    @RenderSection("JavaScriptInHeader",required:false)
</head>
<body ng-app>
   @RenderBody()
</body>
</html>


角网
@RenderSection（“JavaScriptInHeader”，必需：false）
@RenderBody（）

我得到以下错误：错误：[$parse:ueoe]$parse/ueoe？p0=courses%20%3D%20%5B%7B

为什么数据绑定没有发生

错误是：

我不知道为什么在“讲师”之后加上“=”：“ram”}]在@Html.Raw（Model）的末尾。我相信正因为如此，它失败了，agular无法解析。

我会这样做：

创建一个仅返回json内容的操作：

// GET: Course
public ActionResult Index()
{
    return View();
}

public ActionResult GetCourses()
{
    var courses = new []{
    new CourseVm {Number = "1", Name = "Science", Instructor= "Sai"},
    new CourseVm {Number = "2", Name = "Geography", Instructor= "Ram"}
    };

    return Json(courses, JsonRequestBehavior.AllowGet)
}

然后创建一个角度控制器：

angular.module('yourApp').controller('CoursesCtrl',  ['$scope',function($scope)
{
    $scope.courses = [];

    $scope.loadCourses = function () {
        $http.get('/Course/GetCourses').then(function (response) {
                $scope.courses = response.data;
            }, function (data) {
                //error
            });
    }
}]);

之后，在视图中插入控制器：

    <div class="container" ng-app="yourApp">
        <div ng-controller="CoursesCtrl">
            <div class="row">
                <table class="table table-condensed table-hover" data-ng-init="loadCourses();">

                    <tr>
                        <th>Course</th>
                        <th>Course Name</th>
                        <th>Instructors</th>
                    </tr>

                    <tr ng-repeat="course in courses">

                        <td>{{course.Number}}</td>
                        <td>{{course.Name}}</td>
                        <td>{{course.Instructor}}</td>

                    </tr>

                 </table>
         </div>
    </div>
</div>


课程
课程名称
教官
{{course.Number}
{{course.Name}
{{课程.讲师}

我希望这可以帮助您。

我认为ReturnView没有3个参数，请尝试：ReturnView（GetCourses（））@TiagoÁvila我试过了，但没用。得到相同的错误。