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

Selenium's Chrome driver encountering a gray screen issue while trying to navigate Bet365 website

Encountered a grey screen issue while attempting to access the bet365 website using Chrome driver and Selenium. var driver = new ChromeDriver(); driver.Navigate().GoToUrl("https://www.bet365.it/"); https://i.sstatic.net/M71Eb.png ...

Does the size of a JavaScript heap, when it's big but not enough to cause a crash, have the potential to slow down a website, aside from just having an

Utilizing angular material dialog, I have incorporated a mat stepper with three tables (one per step), where one or two of them may contain an extensive amount of records. I have already integrated virtual scrolling to improve performance. However, when ...

Transforming an HTML5 game into a native mobile application

I'm currently working on creating a HTML5 game. While I find HTML5 to be the most user-friendly programming language, I am facing an issue. I want my game to run as a native application on desktops (Windows, Mac, and Linux) rather than in a web browse ...

Guide on transforming UTC time from the server to the local time of users during a GET request

I am currently facing a challenge where I need to verify if the date of the last time an element was clicked matches the current date. Due to my server generating the current date which is 5 hours ahead of my local time, there is a discrepancy causing the ...

Creating Angular components in *ngFor loop

I have set up multiple radio button groups by dynamically populating options using ngFor within a ngFor loop. categories:string[] = [category_1, ..., category_n]; options:string[] = [option_1, ..., option_n]; <fluent-radio-group *ngFor='let ca ...

Utilizing IISNode and/or nodemon for efficient node.js development on Windows platform

For my node.js application running on Windows, I currently utilize IISNode both locally during development and on production hosting. Would incorporating nodemon (or a comparable module that monitors file changes and restarts node.exe when necessary) pro ...

Long taps do not activate the context menu in the mobile interface, as noted in the Google Maps API

During the development of my project, I encountered an issue with the Google Maps API not functioning correctly on mobile devices. I am utilizing GMaps.js, but even that example does not properly support right-click (long tap event). Here is a snippet of ...

"Troubleshooting: Angular 1.x component not displaying templateUrl content in the DOM

This is how I have set up my component: // app/my-component/my-component.js app.component('myComponent', { bindings: { bindingA: '=', bindingB: '=' }, templateUrl: 'app/my-component/my-compone ...

Executing multiple server-side methods on an AJAX call in ASP.NET MVC: A comprehensive guide

I am facing a situation where I have a method that is called by jQuery, and its result is displayed on a popup. Sometimes, it takes some time to complete and a blank popup appears with processing message. When clicking on close, the popup disappears but th ...

What is the reason behind EF Core indicating that the specified member is not mapped?

I am trying to filter users by their names and create a new DTO using a projection query (with Select): var result = context.Users .Where(user => user.FullName == search) .Select(u => new UserPagingViewModel { Id = u.Id, I ...

What causes the jQuery mouseenter events to be activated in a random sequence?

I currently have a setup of 3 nested divs, resembling the concept of a Matryoshka doll. Each div has a mouseenter event function bound to it. When moving the mouse slowly from the bottom and entering layer three, the events occur in the following sequence ...

Is it possible to turn off security features for a Heroku Postgres database?

My project doesn't involve sensitive data, so I'm not concerned about security vulnerabilities. I believe the issue lies in the connection between the App/server and the DB. I've searched on Youtube and Google for solutions, but the informa ...

Show a dynamic Swiper carousel upon selecting a thumbnail in an image gallery

I am in the process of creating a thumbnail gallery that includes a slider feature using Swiper. The default setup has the slider hidden, and once an image is clicked, the slider should appear with the selected image. To close the slider and return to the ...

Using javascript, add text to the beginning of a form before it is submitted

I'm trying to modify a form so that "https://" is added to the beginning of the input when it's submitted, without actually showing it in the text box. Here's the script I have so far: <script> function formSubmit(){ var x ...

Uploading several files with Laravel and Vue JS in one go

Recently, I have been working on a project where I need to upload multiple image files using Vue JS in conjunction with Laravel on the server side. This is the snippet from my Vue template: <input type="file" id = "file" ref="f ...

When a function is passed as an argument in Javascript code, the setTimeout function may behave in unique ways

After running the code below, I noticed an interesting behavior: setTimeout(() => console.log('first'), 0) console.log('second'); As expected in JavaScript's asynchronous nature, the output was as follows: second first Howev ...

Having trouble with adding a listener or making @click work in VueJS?

Apologies for my limited experience with Vue. I am currently facing an issue where one of my click functions is not working as expected for multiple elements. The click event is properly triggered for the #app-icon element. However, the function is not be ...

Tips on effectively utilizing a value that has been modified by useEffect

Here is my current code: const issues = ['x','y','z']; let allIssueStatus; let selectedIssueStatus = ''; useEffect(() => { const fetchIssueStatus = async() => { const response = await fetch(&ap ...

Sending data from a partial view to a controller

Imagine I have two models: DailyTasks and Task. The initial view is strongly typed with the DailyTasks model, displaying a list of existing tasks for the day. Users can add more tasks to the list/table by clicking the add button. Upon clicking the add butt ...

Tips for Maintaining Table Headers in Place While Scrolling Through a Table

Check out my jsfiddle: http://jsfiddle.net/7vv9e/2/ In the fiddle, click on the "Add Question" button multiple times until a scroll bar appears next to the table. I am looking to keep the header fixed while scrolling. How can this be achieved? Below is ...