Asp.net mvc angularjs strange delay

Question

Why when i am clicking first time on Get Data nothing happens, only when I click second time on button, it's get data?Why this delay happening?

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>

MyScripts.js

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

app.controller("calendarDemo", function ($scope, $http) {
$scope.id = '5';
$scope.Employees = [];
$scope.getData = function () {
    $scope.getData = function (id) {
        $http({ method: 'GET', url: '/Home/GetData/', params: { id: $scope.id} }).
            success(function (data, status, headers, config) {
                $.each(data, function (id, data) {
                    $scope.Employees.push({name: data.Name});
                })
                debugger;
            }).
            error(function (data, status, headers, config) {
                alert('error');
            });
    };
}
});

HomeController:

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

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

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

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
    @Scripts.Render("~/bundles/angularjs")
</head>
<body ng-app="myApp" ng-controller="calendarDemo">
    @RenderBody()

    @Scripts.Render("~/bundles/jquery")

    @RenderSection("scripts", required: false)
</body>
</html>

You have the function defined twice...

cnorthfield
– cnorthfield

2016-04-20 21:19:29 +00:00
Commented Apr 20, 2016 at 21:19 — cnorthfield
– cnorthfield, Commented Apr 20, 2016 at 21:19
Remove the outer $scope.getData = function () {}

cnorthfield
– cnorthfield

2016-04-20 21:20:36 +00:00
Commented Apr 20, 2016 at 21:20 — cnorthfield
– cnorthfield, Commented Apr 20, 2016 at 21:20

cnorthfield · Accepted Answer · 2016-04-20 21:21:58Z

1

The function is defined twice, the one is nested inside the other. Remove the outer $scope.getData = function () {} and you should have no issues.

answered Apr 20, 2016 at 21:21

cnorthfield

3,51119 silver badges25 bronze badges

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

Collectives™ on Stack Overflow

Asp.net mvc angularjs strange delay

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