Ajax call showing error when call ActionResult in MVC.NET

Question

I am using Angularjs with asp.net MVC. I want to save data using ajax hit but it is showing Error message And in browser it is showing "Failed to load resource: the server responded with a status of 500 (Internal Server Error)". I want to call Action result once for test with a static id but it is not working. My View page is:

@{
    ViewBag.Title = "SaveOwn";
}
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script>
    (function (angular) {
        'use strict';
        angular.module('SaveOwnData', [])
          .controller('SaveOwnDataController', [
        '$scope', function ($scope) {
            $scope.saveData = {
                id: '',
                name: '',
                designation: '',
                mobile: ''
            }
            $scope.save = function () {
                $.ajax({
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    data: { "id": "1" },
                    url: "/Home/SaveData",
                    success: function () {
                        alert("Success");
                    },
                    error: function () {
                        alert("error");
                    }
                });
            };
        }]);
    })(window.angular);

</script>

<div ng-app="SaveOwnData" ng-controller="SaveOwnDataController as saveData" ng-init="id=0; name=0;designation=0; mobile=0 ">
    <input type="text" ng-model="saveData.id" />
    <input type="text" ng-model="saveData.name" />
    <input type="text" ng-model="saveData.designation" />
    <input type="text" ng-model="saveData.mobile" />
    <input type="button" data-ng-click="save()" value="Save" />
    {{saveData.total()}}
    {{saveData.mobile}}
</div>

ActionResult code is:

public ActionResult SaveData(string id)
        {
            return View();
        }

i want to call SaveData method once as demo with ajax then i will use all parameters. Please help.

Thanks in advance.

Would it help to remove quotes from the id parameter in data? — Martin Staufcik
– Martin Staufcik, Commented Oct 11, 2015 at 18:50

Eric Kelly · Accepted Answer · 2015-10-11 19:40:22Z

1

You need to return a Json ActionResult in this case, i assume there is no View called "SavedData" (e.g. a Savedata.cshtml). You should check chrome network tab and view what the error was but most likely this is why. it would be returned there.

Try it like so:

[HttpPost]
public ActionResult SaveData(string id)
{
    return Json(new{status: "success"}); //return json status...
}

Can read the result like:

  $scope.save = function () {
                $.ajax({
                    type: 'POST',
                    contentType: 'application/json; charset=utf-8',
                    data: { "id": "1" },
                    url: "/Home/SaveData",
                    success: function (data) {
                        alert(data.status);
                    },
                    error: function () {
                        alert("error");
                    }
                });
            };
        }]);

answered Oct 11, 2015 at 19:40

Eric Kelly

4523 silver badges8 bronze badges

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

5 Comments

Amandeep Singh Over a year ago

i am facing same problem after all changes , There is same errors in chrome Network tab as: " POST localhost:1362/Home/SaveData 500 (Internal Server Error)send @ jquery.min.js:4f.extend.ajax @ jquery.min.js:4$scope.save @ (index):17(anonymous function) @ angular.js:12345f @ angular.js:21438l.$eval @ angular.js:14401l.$apply @ angular.js:14500(anonymous function) @ angular.js:21443c @ angular.js:3014"

Amandeep Singh Over a year ago

It is also showing "GET localhost:1362/favicon.ico 404 (Not Found)" before 500 error

Eric Kelly Over a year ago

hello, ok... so the network tab, if you click on it (under name), there should be a split window on the right show up, with "headers", "preview", "response" tabs. if you click preview, you should get the actual .net error... this way we can see exactly what it's complaining about. There could be routing issues or some other factors, if you put a breakpoint in the SaveData does it ever land there?

Eric Kelly Over a year ago

Also, don't worry about the 404 not found, that's for the browser icon (favicon) that you don't have.

Amandeep Singh Over a year ago

Thanks sir i have resolved the problem.... And post the full code in answers..Thank you to help me...

Amandeep Singh · Accepted Answer · 2015-10-12 07:48:08Z

1

Thanks to all for help me but there was another problem. The problem is resolved after using JSON.stringify in my code i have successfully called to action as :

$scope.save = function () {
            $.ajax({
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                data: JSON.stringify({ "id": "1" }),
                url: "/Home/SaveData",
                success: function (data) {
                    alert(data.status);
                },
                error: function () {
                    alert("error");
                }
            });
        };

    }]);

answered Oct 12, 2015 at 7:48

Amandeep Singh

3707 silver badges20 bronze badges

Comments

Nate Barbettini · Accepted Answer · 2015-10-11 18:58:01Z

0

Modify AJAX call parameter to use a URL starting with ~ like so: ~/Home/SaveData.

Also, verify you have placed the [HttpPost] attribute as below:

[HttpPost]
public ActionResult SaveData(string id)
{
    return View();
}

edited Oct 11, 2015 at 18:58

Nate Barbettini

54.1k28 gold badges136 silver badges153 bronze badges

answered Oct 11, 2015 at 18:49

Thinakaran.k

112 bronze badges

2 Comments

Amandeep Singh Over a year ago

I have edited as you give but having same problem error in message and in browser console message is "Failed to load resource: the server responded with a status of 500 (Internal Server Error)"

Amandeep Singh Over a year ago

Some time it showing "POST localhost:58051/Home/SaveData 500 (Internal Server Error)" in browser console...

Collectives™ on Stack Overflow

Ajax call showing error when call ActionResult in MVC.NET

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related