Angularjs http get from ASP.NET

Question

I want to get List of employees, after clicking on button Get Data. But JS script does not invoke public JsonResult GetData.

Why js do not invoke public JsonResult GetData where is mistake?
How to pass argument in 'public JsonResult GetData(int id)'?

HomeController:

namespace AngularJS.Controllers
{
public class HomeController : Controller
{
    //
    // GET: /Home/

    public ActionResult Index()
    {
        return View();
    }

    [HttpGet]
    public JsonResult GetData(int id)
    {
        List<Employee> employees = new List<Employee>();
        employees.Add(new Employee{Name="Jhon"});
        employees.Add(new Employee{Name="Rick"});
        return Json(employees, JsonRequestBehavior.AllowGet);
    }
}
public class Employee
{
    public string Name { get; set; }
}
}

MyScript.js

var app = angular.module("myApp", []);

app.controller("calendarDemo", function($scope) {
$scope.count = 0;
$scope.getData = function () {

    $http({ method: 'GET', url: '/Home/GetData' }).
success(function (data, status, headers, config) {
    //$scope.Employees = [{ name: 'Jhon' }, { name: 'Rick' }];
}).
error(function (data, status, headers, config) {
    alert('error');
});

}
});

Index.cshtml:

@{
ViewBag.Title = "Index";
}

<h2>Index</h2>
<script src="~/Scripts/CustomScripts/MyScript.js"></script>
<script src="~/Scripts/moment.js"></script>

<link rel="stylesheet/less" type="text/css" href="~/Scripts/CustomScripts/style.less">
<script src="~/Scripts/less-1.5.1.js" type="text/javascript"></script>
    <li ng-repeat="employee in Employees">
        {{employee.name}}
    </li>
<button ng-click="getData()">Get Data</button>

Have you tried calling the URL directly from the browser's address bar? Does it work? If you set a breakpoint at the mvc action, does it get hit? — DrinkBird
– DrinkBird, Commented Apr 20, 2016 at 14:29
@fikkatra this is a Controller, not an ApiController. It would be the regular routing, not the web api routing. — David L
– David L, Commented Apr 20, 2016 at 14:30
Remove the parameter from webmethod and then use same $http call, if it invokes the webmethod it means you need to pass the parameter too. to pass parameter use third parameter of $http object. — Zaki
– Zaki, Commented Apr 20, 2016 at 14:30

fikkatra · Accepted Answer · 2016-04-20 14:33:35Z

4

Assuming you kept the default routing config in MVC, try this:

$scope.getData = function (id) {
    $http({ method: 'GET', url: '/Home/GetData/' + id }).
        success(function (data, status, headers, config) {
            //$scope.Employees = [{ name: 'Jhon' }, { name: 'Rick' }];
        }).
        error(function (data, status, headers, config) {
            alert('error');
        });
};

and pass the id to the getData function from the view.

answered Apr 20, 2016 at 14:33

fikkatra

5,9024 gold badges45 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Pankaj Parkar · Accepted Answer · 2016-04-20 14:35:29Z

1

You should be pass it as parameter in $http get call

$http({ method: 'GET', url: '/Home/GetData', params: { id: id } })

answered Apr 20, 2016 at 14:35

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

4 Comments

fikkatra Over a year ago

This will attach the id as a query parameter. This will work, because MVC will try to find the id in the query string if it can't be found within the url. However, this will result in a different url: /Home/GetData?id=123 instead of /Home/GetData/123 . Depending on which url is preferred, use params or attach the id directly to the url

Pankaj Parkar Over a year ago

@fikkatra I know.. if default route is set correctly like you said it should be like you are suggesting.. but in that case above will obviously work..

fikkatra Over a year ago

Exactly. I was just trying to help the OP make a sensible choice between our solutions.

Pankaj Parkar Over a year ago

@fikkatra If you ask me perticularly, then I would rather use the format you suggested in WebAPI +1 yours..

Collectives™ on Stack Overflow

Angularjs http get from ASP.NET

2 Answers 2

Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related