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

Question

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.

I think the ReturnView doesn't have 3 parameters, try: return View(GetCourses()); — Tiago Ávila, CommentedApr 28, 2017 at 19:26
@TiagoÁvila i tried, but not working. getting the same error. — krishna_v, CommentedApr 28, 2017 at 19:32

Tiago Ávila · Accepted Answer · 2017-04-28 19:54:15Z

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.

Collectives™ on Stack Overflow

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

1 Answer 1

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Related