CODEWITHSUNDEEP
angularjsasp.net-mvc
krishna_v
krishna_v

Reputation: 1511

Trying to populate data in ASP.Net controller and fetch it view using angularjs

I am trying to populate data through controller and display it in view using angular js. I am using a function to return JSON data and use the data in the view.However i am not getting the data due to some error.

Controller

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>

I am getting the following error: Error: [$parse:ueoe] http://errors.angularjs.org/1.6.1/$parse/ueoe?p0=courses%20%3D%20%5B%7B

Why the data binding not happening?

The error is :

I am not sure why ="" after "instructor":"ram"}] is being added in the end in @Html.Raw(Model). i believe because of this it fails and agular cannot parse. enter image description here

Upvotes: 0

Views: 29

Answers (1)

Tiago &#193;vila
Tiago &#193;vila

Reputation: 2867

I would do on this way:

Create an action just to return the json content:

// 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)
}

Then create an Angular controller:

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
            });
    }
}]);

After that insert the controller in the view:

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

I hope this can help you.

Upvotes: 1

Related Questions