CODEWITHSUNDEEP
javascriptc#asp.net-mvcangularjs
Daybreaker
Daybreaker

Reputation: 1047

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

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;
        }
    }

Upvotes: 0

Views: 819

Answers (1)

Daybreaker
Daybreaker

Reputation: 1047

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.

Upvotes: 0

Related Questions