JsonResult method not calling through angular call

Question

JsonResult method not calling through $http call,

I am working on a project that uses ASP.NET MVC, AngularJS I am calling a mvc controller from AngularJS. I am getting an jsonresult as in the call to a MVC controller from AngularJS .

this is the result

[
 {
"Branch_ID": 1,
"Branch_Name": "sdsds",
"Branch_Address": "sfsdfsdf",
"Branch_email": "sdfsdfsdf",
"Branch_Notes": "sfsffsfd",
"Branch_Manager": null,
"Branch_Phone": null,
"Branch_TimeFrom": "/Date(-2208996000000)/",
"Branch_TimeTo": "/Date(-2208996000000)/",
"saturday": false,
"sunday": false,
"monday": false,
"tuesday": false,
"wednesday": false,
"thursday": false,
"friday": false,
"Departments": null
 }
]

branches controller

public class BranchesController : Controller
{

private IRepositoryBase<Branches> BrancheRepository;

public BranchesController(IRepositoryBase<Branches> brancheRepository)
{
    this.BrancheRepository = brancheRepository;
}
// GET: Branches
public JsonResult Index()
{

    var branches =   BrancheRepository.GetAll();

    //if (!String.IsNullOrEmpty(searchString))
    //{
    //    branches = branches.Where(s => s.Branch_Name.ToUpper().Contains(searchString.ToUpper()));
    //}

    return Json(branches, JsonRequestBehavior.AllowGet);
   } 
 }

Index.cshtml

<div class="container" ng-controller="branch-controller">
<div class="panel panel-info">
    <div class="panel-heading">
        Branch Details - Grid CRUD operations
    </div>
    <table class="table table-bordered">
        <thead style="background-color:lightblue;">
            <tr>
                <th> Branch Address</th>
                <th> Branch Email</th>
                <th>Branch Name</th>
                <th>Branch Notes</th>
                <th> Actions</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="branche in Branches">
                  <td>{{branche.Branch_ID}}</td>
                <td>{{branche.Branch_Address}}</td>
                <td>{{branche.Branch_email}}</td>
                <td>{{branche.Branch_Name}}</td>
                <td>{{branche.Branch_Notes}}</td>

                <td style="width:200px;">
                    <a href="#" class="btn btn-info">Update</a>
                    <a href="#" class="btn btn-danger">Delete</a>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Module.js

var myapp;
(function () {

     myapp = angular.module('my-branches', []);
 })();

Controller.js

myapp.controller('branch-controller', function ($scope, branchService) {

  //Loads all branch records when page loads
     loadBranches();

   function loadBranches() {
   var BrancheRecords = branchService.getAllBranches();

   BrancheRecords.then(function (data) {
    //success

    $scope.Branches = data;
},
function (error) {
    console.log(error);
    alert("Error occured while fetching branche list...");
  });
 }
});

Service.js

myapp.service('branchService', function ($http) {

this.getAllBranches = function () {

    return $http.get("/Branches/Index").then(function (response) {

        return response.data;
    });
  };
});

Can you verify that you are getting a result using Fiddler or Postman? Using either one to call your MVC Controller to verify something, anything, is being returned and its the correct format. Once you can verify your Controller is returning the correct result, then work on the $http.get part. — Esaith
– Esaith, Commented Dec 27, 2019 at 21:11
@Esaith how can my Controller is returning the correct result — hashim
– hashim, Commented Dec 29, 2019 at 9:04
I'm sorry. Im not sure if you are asking a question "How can my controller return the correct result", or a statement "My controller is returning the correct result". I'm guessing the later. — Esaith
– Esaith, Commented Dec 30, 2019 at 15:35
Open up your Dev Tools and put a break point on return response.data. Hover over the 'response' variable to verify the response is what you expect it to be. Otherwise, you're code looks good. Can you verify for us that you can get to $scope.Branches = data; ? is data null? — Esaith
– Esaith, Commented Dec 30, 2019 at 15:46
@Esaith i opened Dev Tools and put a break point on return response.data but the debugger can not debug , gives me json result , can you see the issue in teamviewer if u don't mind please — hashim
– hashim, Commented Dec 31, 2019 at 11:16

hashim · Accepted Answer · 2019-12-31 14:27:15Z

I have changed my code to this code to solve the issue

FetchData.js

var app = angular.module('mybranches', []);

app.service("myService", function ($http) {

    //get All Branches
    this.getAllBranches = function () {
        return $http.get("Branches/GetAllBranches");
    };
});


app.controller("branchcontroller", function ($scope, myService) {
    getAllBranches();
    function getAllBranches() {
        var getData = myService.getAllBranches();
        getData.then(function (response) {
            $scope.Branches = response.data;
        }, function (error) {
                console.log(error);
            alert('Error in getting records');
        });
    }
});

public class BranchesController : Controller
{

private IRepositoryBase<Branches> BrancheRepository;

public BranchesController()
{
    this.BrancheRepository = new BranchesRepository(new HrmDBContext());
}
public BranchesController(IRepositoryBase<Branches> brancheRepository)
{
    this.BrancheRepository = brancheRepository;
}

// GET: Branches
[HttpGet]
public ActionResult Index()
{

   // var branches = BrancheRepository.GetAll();




    //if (!String.IsNullOrEmpty(searchString))
    //{
    //    branches = branches.Where(s => s.Branch_Name.ToUpper().Contains(searchString.ToUpper()));
    //}

     return View();
}

[HttpGet]
public JsonResult GetAllBranches()
{

    var branches = BrancheRepository.GetAll();




    //if (!String.IsNullOrEmpty(searchString))
    //{
    //    branches = branches.Where(s => s.Branch_Name.ToUpper().Contains(searchString.ToUpper()));
    //}
    //return new JsonResult { Data = branches, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
     return Json(branches, JsonRequestBehavior.AllowGet);
  //  return new JsonResult{Data = branches, JsonRequestBehavior = JsonRequestBehavior.AllowGet};
   }

 }

Index.cshtml

<div>
    <div class="container" ng-controller="branchcontroller">
        <div class="panel panel-info">
            <div class="panel-heading">
                Branch Details - Grid CRUD operations
            </div>
            <table class="table table-bordered">
                <thead style="background-color:lightblue;">
                    <tr>
                        <th> Branch Address</th>
                        <th> Branch Email</th>
                        <th>Branch Name</th>
                        <th>Branch Notes</th>
                        <th> Actions</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-repeat="branche in Branches track by $index">
                        <td>{{branche.Branch_ID}}</td>
                        <td>{{branche.Branch_Address}}</td>
                        <td>{{branche.Branch_email}}</td>
                        <td>{{branche.Branch_Name}}</td>
                        <td>{{branche.Branch_Notes}}</td>
                        <td style="width:200px;">
                            <a href="#" class="btn btn-info">Update</a>
                            <a href="#" class="btn btn-danger">Delete</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>

Collectives™ on Stack Overflow

JsonResult method not calling through angular call

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related