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 aps.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;
}
}
POST /RoutesDemo/addMe– Jasen May 18 at 20:45