The .NET controller does not receive traffic for the GET method

Having some trouble populating a table with JSON data using angular ng-repeat. No errors are showing up in the console, and my breakpoint in the .NET Controller isn't being triggered.

Here's the code for the App Controller:

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

app.controller('listdata', function ($scope, $http) {

    $scope.contacts = []; 
    $http({ method: 'GET', url: '/Contacts/GetContacts/' }).success(function (response) {
        $scope.contacts = response; 
    });

});

.NET Controller Code:

[HttpGet]
    public JsonResult GetContacts()
    {
        var data = db.Contacts.Include(x => x.Cities).Include(a => a.Groups);

        return Json(data);
    }

HTML setup:

<div ng-app ="angularTable">
 <table class="table table-hover" ng-controller="listdata">
        <thead>
            <tr>

                <th>Name</th>
                <th>Phone</a></th>
                <th>Group</th>
                <th>City</th>
                <th>Actions</th>
            </tr>

        </thead>
        <tbody>
            <tr ng-repeat="item in contacts">
                <td>{{item.name}}</td>
                <td>{{item.area}} {{item.phone}}</td>
                <td>{{item.group.description}}</td>
                <td>{{item.city.name}}</td>
                <td>
                    <a asp-route-id="{{item.id_Contact}}">Send Message | </a>
                    <a asp-route-id="{{item.id_Contact}}">Edit | </a>
                    <a asp-route-id="{{item.id_Contact}}" asp-action="Delete">Delete</a>
                </td>
            </tr>

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

Using this AngularJS CDN link:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>

Answer №1

To start off, like @ThiagoCustodio suggested, make sure to input the URL into your browser and verify if you are receiving the expected JSON response.

Next, you can adjust the code snippet below to permit HTTP GET requests from the client:

public JsonResult FetchContacts()
{
    var info = db.Contacts.Include(x => x.Cities).Include(a => a.Groups);

    return Json(info, JsonRequestBehavior.AllowGet);
}

Additionally, if your AngularJS application is operating separately, ensure that you have enabled/configured CORS for specific origins within your backend (service) application.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Images in CSS not copied to the output directory when using Webpack

Using Webpack to bundle various javascript and css files on a website includes bundling bootstrap.css and chosen.css as part of the bundles. To achieve this, there is a main.js file serving as an entry point for importing all necessary files. The process i ...

The functionality of AngularJs routing does not seem to be operating as anticipated

Please check out my demo example on Plunker. I have been experimenting with integrating the AdminLTE template with AngularJs Routing. I have defined the routing rules in my app.js file as follows: app.config(function ($routeProvider, $locationProvider) { ...

Uploading multiple images using AngularJS and Spring framework

I'm encountering an issue with uploading multiple images using AngularJS and Spring MVC. While I can successfully retrieve all the files in AngularJS, when I attempt to upload them, no error is displayed, and the process does not reach the Spring cont ...

Error: Unable to access the 'name' property of an undefined value. Despite my efforts, I am unable to determine the root cause of this issue. My technology stack includes mysql for the database, nodejs for the backend,

Can someone help me with a TypeError: Cannot read property 'name' of undefined error I'm encountering while trying to add new users to a MySql database using Node.js and EJS as the view engine? I've been unable to identify the cause of ...

Retrieving information from an Express.js API using React.js. Postman requests are successfully communicating with the API

Hey there, I'm facing a little issue and could use some help. I have an Express application that is working perfectly with requests from Postman (adding, deleting, etc.). Now, I want to connect my client side (React.js) with the existing API using the ...

What is preventing the MenuItem component from functioning as a Link in React Material-UI?

Hey there! I've been trying to implement a popover menu that changes the URL and component after clicking on an item, but unfortunately it's not working as expected. I created a setup in this sandbox: https://codesandbox.io/s/romantic-surf-40p19? ...

What is the best way to create an animation where every letter in a word transitions to a different

Is there a way to animate a word so that each letter changes color within a range of 7 colors, with all letters displaying different colors simultaneously in an infinite loop? <div class="box"> <h1 class="logo animate__animated an ...

Changing the CSS property from "display: none" to "display: block" using JavaScript causes all the div elements to overlap

My issue involves several radio inputs where clicking one should reveal a hidden div containing information. However, when this div appears, it overlaps with the footer instead of staying positioned between the footer and radio input as intended. I am str ...

Switching the children image source by hovering over the parent element

I have a React component that functions as a card containing a title and an image. I want the image to change upon hovering over the entire card, rather than just the img element itself. While CSS and the background property could achieve this, I prefer k ...

The Laravel function is not returning as expected on the server

I'm facing an issue with my Laravel project. When the validator fails, the return back function works fine on localhost but on the server it redirects to the root URL. Can anyone help me resolve this problem? Here is my controller code: public functi ...

React and Redux encounter an issue where selecting a Select option only works on the second attempt, not the first

I am currently working on a React/Redux CRUD form that can be found here. ISSUE RESOLVED: I have encountered an issue where the state should be updated by Redux after making an API call instead of using this.setState. The concept is simple: when a user s ...

"There is an issue with the payload size: request entity is too large. What is the solution for handling this in Nest

I am facing an issue where I need to send a request containing a large base64 string, approximately around 2 MB. However, the server keeps throwing an error message. How can I prevent this error from occurring: [Nest] 1666 - 11/01/2021, 1:50:58 PM ERRO ...

How can you use jQuery.ajax to solely fetch the status code without downloading the entire document?

My application relies on the use of jQuery.ajax to check if a particular resource exists by constantly polling it. Once the resource is no longer returning a 404 status code, the app redirects to view that resource. However, I am concerned about downloadin ...

Encountering problem with rendering the header in the footer within a customized package built on react

I am currently working on creating a node package that consists of simple HTML elements. The package is named fmg_test_header. These are the files included in the package: header.jsx index.js package.json header.js function Header() { return "< ...

How to make Sails.js package accessible across all modules

Recently, I have been using Sails frequently and came across a common practice question. Whenever I need to use a specific NPM package multiple times in a project, I typically include it in my config/bootstrap.js file like this: module.exports.bootstrap = ...

What is the best way to create a JavaScript "input" field that only accepts vowel letters?

Is there a way to create an "input" field that only accepts vowel letters? Additionally, I want to ensure that copying and dragging text into the input field will also be filtered out. <div class="field"> <input class="fie ...

Show items in the sequence of clicking

Is there a way to display elements in the order they're clicked, rather than their order in the HTML using jQuery? For example: CSS code: .sq{ display:none; } HTML Code: <a href="#" id="1">A</a> <a href="#" id="2">B</a> ...

What do you call a JavaScript function when it has a name

This code is confusing to me. It's not the usual JavaScript syntax for a function that I know of. Is this a specific function? Or perhaps it's a callback for when an update event occurs? Apologies for these beginner questions, as I am quite new t ...

Formatting Canadian French currency using a personalized filter

I have developed a custom filter that utilizes angular's currency filter to show a monetary value based on the locale setting of en_CA or fr_CA. Depending on the locale, the display will be either $123,456,789.99 or 123.456.789,99$. My concern is how ...

Tips for concealing an input IP Address in React

Looking for suggestions on an IP Address mask input solution. The format might vary between 999.99.999.99 and 99.9.99.9, but react-input-mask does not support varying lengths. Any recommendations? ...