Call mvc url.action from angular controller

Question

I have this tabset:

<tabset justified="true" class="tabsetnowrap">
<tab ng-repeat="tab in tabshomepage track by $index" heading="{{tab.title}}" ng-click="homePageNavigate(tab.type)" active="tab.active" disabled="tab.disabled">
</tab>

It is created in a angular controller:

    $scope.tabshomepage = [];
    $scope.tabshomepage.push(
    { title: 'Hjem', type: 'HOM', order: 1, active: true, disabled: false, color: 'black' },
    { title: 'Dirty', type: 'DIR', order: 2, active: false, disabled: false, color: 'purple' },
    { title: 'Dating', type: 'DAT', order: 3, active: false, disabled: false, color: 'green' },
    { title: 'Bloggers', type: 'SOC', order: 4, active: false, disabled: false, color: 'lblue' },
    { title: 'Konto', type: 'ACO', order: 5, active: false, disabled: false, color: 'black' },
    { title: 'Om os', type: 'ABU', order: 6, active: false, disabled: false, color: 'black' },
    { title: 'Kontakt og FAQ', type: 'COF', order: 7, active: false, disabled: false, color: 'black' }
);

When a click is done on a tab, then the homePageNavigate function is performed.

$scope.homePageNavigate = function (type) {
    if(type == 'DIR'){
        //Perform a @Url.Action("Index", "Dirty", null)"
    }
    etc...
};

In that functin I want to call a mvc method: @Url.Action("Index", "Dirty", null)", and return a view("index")

What is best way to solve this problem? Any workarounds? Or a simple solution to this?

DrinkBird · Accepted Answer · 2016-04-21 11:46:51Z

4

I've done something similar before by performing a bit of configuration in angular, through razor, on page load:

<script>
    (function () {
        angular.module('App').value('paths', {
            home: '@Url.Action("Index", "Dirty", null)'
            // more paths here
        });
    })();
</script>

Then you can inject and use paths anywhere within your angular app. eg. Inside a controller called 'myCtrl`

angular.module('App').controller('myCtrl', ['paths', function(paths) {
    // you can use paths.home here
}]);

edited Apr 21, 2016 at 11:46

answered Apr 21, 2016 at 11:14

DrinkBird

8348 silver badges17 bronze badges

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

5 Comments

AHJ Over a year ago

In my case I need this in the controller. Is it possible to tweak your code to be used in the controller?

DrinkBird Over a year ago

Sure, it's just standard angular injection.

AHJ Over a year ago

Thanks. I will try this out. I just relate to instance like "paths.home" and nothing else?

AHJ Over a year ago

I hits the mvc controller, but it dosent return the view. Any solutions to part? If I do this from the cshtml page it works fine: <a href="@Url.Action("Index", "Dirty", null)"><span class="medium-menu-box br-purple"><b>DIRTY</b></span></a>

DrinkBird Over a year ago

I don't understand what you mean. The value of paths.home should hold the URL you need to navigate to. If you add a call to console.log(paths.home) within your controller, do you get the correct result printed in the console? If yes, then you need to write some code to navigate to that URL from within a controller. e.g. you can inject and use the $window service of angular like so: $window.location(paths.home)

Saurabh Kumar · Accepted Answer · 2017-12-01 20:34:01Z

0

It's quite simple to invoke ASP.Net MVC Controller action method using AngularJS as follows

In Javascript I wrote

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

angular.module('MyApp', [])

.controller('MyController', ['$scope', '$http', function ($scope, $http) {

$scope.search = function () {

$http({

method: "GET",

url: "/home/GetData"

}).then(function mySuccess(response) {

$scope.name = response.data;

}, function myError(response) {

$scope.name = response.statusText;

});

}

}]); In HTML part, I wrote

<button ng-click="search()">Get Data</button>

In Controller Action, I wrote return Json("You caught AngularJS", JsonRequestBehavior.AllowGet);

answered Dec 1, 2017 at 20:34

Saurabh Kumar

415 bronze badges

Collectives™ on Stack Overflow

Call mvc url.action from angular controller

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related