Question

我试图通过控制器填充数据并使用角度js在视图中显示它。我正在使用一个函数来返回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>

Layout.cshtml

<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>

我收到以下错误：错误：[$ parse：ueoe] http://errors.angularjs.org/1.6.1/ $ parse / ueoe？p0 =课程％20％3D％20％5B％7B

为什么没有发生数据绑定？

错误是：

我不确定为什么=＆＃34;＆＃34;之后＆＃34;讲师＆＃34;：＆＃34; ram＆＃34;}]最后被添加到@ Html.Raw（Model）中。我相信因为它失败了，agular无法解析。

Answer 1

我会这样做：

创建一个动作只是为了返回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控制器：

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>

我希望这可以帮到你。

尝试在ASP.Net控制器中填充数据并使用angularjs

1 个答案: