AngularJS $http.post not working with asp.net mvc inside ng-view

Question

I have a problem when combining angularjs with asp.net mvc. I am rendering html partial views inside ng-view directive using angular routing. And here i am omitting the angularjs default #(hash) navigation behavior using angular $locationProvider. Everything works fine, i can navigate to each partial view properly and every $scope objects also working fine. But there is a problem. $http.post method does not call to ASP.NET controller action. It does nothing. The debugging point does not hit. But $http.get works perfectly and it can retrieve data as json objects. But $http.post working well outside the ng-view. What i am missing here. Please help.

asp.net RouteConfig

public static void RegisterRoutes(RouteCollection routes)
        {
            routes.IgnoreRoute("{resource}.axd/{*pathInfo}");

            routes.MapRoute(
                name: "RoutesDemo",
                url: "{*catchall}",
                defaults: new { controller = "Home", action = "Index" });

            routes.MapMvcAttributeRoutes();

            routes.MapRoute(
                name: "Default",
                url: "{controller}/{action}/{id}",
                defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
            );
        }

Home/index.chtml

<html ng-app="MyApp" ng-controller="MyController">
<head>
    <meta charset="utf-8">
    <base href="/">
</head>
<body>
    <h1>{{heading}}</h1>

    <ul>
        <li><a href="/routeOne">Route One</a></li>
        <li><a href="/routeTwo">Route Two</a></li>
        <li><a href="/routeThree">Route Three</a></li>
    </ul>

    <div ng-view></div>

    <script src="~/Scripts/angular.js"></script>
    <script src="~/Scripts/angular-route.js"></script>
    <script src="~/Scripts/app.js"></script>
</body>
</html>

one.html

<h3>One</h3>

<br />

<input type="text" ng-model="item" />
<input type="button" ng-click="postitem()" value="Send"/>

two.html

<h3>Two</h3>

three.html

<h3>Three</h3>

app.js

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

app.config(function ($routeProvider,$locationProvider) {

        $routeProvider
            .when('/routeOne', {
                templateUrl: 'partials/one.html',
                controller: 'MyController'
            })
            .when('/routeTwo', {
                templateUrl: 'partials/two.html',
                controller: 'MyController'
            })
            .when('/routeThree', {
                templateUrl: 'partials/three.html',
                controller: 'MyController'
            });

        $locationProvider.html5Mode(true);
    });

app.controller('MyController', function ($scope,$http) {
    $scope.heading = "Page Heading";
    $scope.item = "Mango";

    $scope.postitem = function () {
        $http.post('/RoutesDemo/addMe', { foo : 'bar' }).success(function (response) {
        });
    }
})

RoutesDemoController

    public class RoutesDemoController : Controller
    {
        [HttpPost]
        public void addMe(string foo)
        {
            string fruit = foo;
        }
    }

What does the browser show for the network response on POST /RoutesDemo/addMe — Jasen
– Jasen, Commented May 18, 2015 at 20:45

Daybreaker · Accepted Answer · 2015-05-18 21:10:39Z

0

I found where the problem is but it does not solved my problem fully instead it made a new problem. I made below changes to my code.

removed these lines form asp.net RouteConfig.cs

routes.MapRoute(
                name: "RoutesDemo",
                url: "{*catchall}",
                defaults: new { controller = "Home", action = "Index" });

            routes.MapMvcAttributeRoutes();

and changed navigation link in index.cshml

<li><a href="/#/routeOne">Route One</a></li>
<li><a href="/#/routeTwo">Route Two</a></li>
<li><a href="/#/routeThree">Route Three</a></li>

and also removed $locationProvider dependency.

app.config(function ($routeProvider) {

        $routeProvider
            .when('/routeOne', {
                templateUrl: 'partials/one.html',
                controller: 'MyController'
            })
            .when('/routeTwo', {
                templateUrl: 'partials/two.html',
                controller: 'MyController'
            })
            .when('/routeThree', {
                templateUrl: 'partials/three.html',
                controller: 'MyController'
            });
    });

Though it works fine. It recreated that #(hash) navigation problem. How to avoid that. I have to use /# in the url to havigate pages.

answered May 18, 2015 at 21:10

Daybreaker

1,0476 gold badges22 silver badges43 bronze badges

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

2 Comments

Daybreaker Over a year ago

@Ric previous method i used html5mode and it worked well. but then $http.post method didn't work. I think the problem is the asp.net routeconfig. any idea how to change it for my need.??

Ric Over a year ago

It may not have been working as you have a catch all route. What was happening in the post? You say returning index.html??

Collectives™ on Stack Overflow

AngularJS $http.post not working with asp.net mvc inside ng-view

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related