How to send URL parameter from angularJS to MVC action

Question

I am using the state provider for mapping the urls , and the following is my AngularJS code.

 .state('uimenucategories', {
        url: "/MenuCategory.html",
        templateUrl: "/AppMenuMaker/MenuCategory",
        data: {pageTitle: 'Menu Category'},
        controller: "MenuCategoryController",
        resolve: {
            deps: ['$ocLazyLoad', function($ocLazyLoad) {
                return $ocLazyLoad.load([{
                    name: 'MetronicApp',
                    files: [
                           'js/controllers/MenuCategoryController.js',


                    ]
                }]);
            }] 
        }
    })

I want to take parameters from the URL to pass them to the action before rendering the view

    public ActionResult MenuCategory(int? CategoryID){}

any help for how I can send them from URL like this Dashboard/Index#/ViewMenuCategories.html?ID=1 ?

I am in iphone i will try to help you: templateUrl: function(stateParams){ return '/AppMenuMaker/MenuCategory?categoryId=' + stateParams.id; }. I dont remember exact name is service is stateParams. — Fabio Silva Lima
– Fabio Silva Lima, Commented Nov 6, 2016 at 13:32
@fabiosilvalima I am getting this error 'Unknown provider: $stateParams' — Hana
– Hana, Commented Nov 6, 2016 at 15:30
like i said if stateParams is right name. I will chek thia today at night — Fabio Silva Lima
– Fabio Silva Lima, Commented Nov 6, 2016 at 15:48
It worked with me like that , with no need to inject a service , thanks a lot! — Hana
– Hana, Commented Nov 13, 2016 at 12:08

Fabio Silva Lima · Accepted Answer · 2016-11-07 08:55:56Z

0

If you hit url 'Dashboard/Index#/ViewMenuCategories.html?ID=1' on browser, angular will search for a template on '/AppMenuMaker/MenuCategory?CategoryID=1'.

I think the code would be:

.state('uimenucategories', {
    url: "/MenuCategory.html",
    templateUrl: ['$location', function($location){
        return '/AppMenuMaker/MenuCategory?CategoryID=' + $location.search().ID || '';
        }
    }],
    data: {pageTitle: 'Menu Category'},
    controller: "MenuCategoryController",
    resolve: {
        deps: ['$ocLazyLoad', function($ocLazyLoad) {
            return $ocLazyLoad.load([{
                name: 'MetronicApp',
                files: [
                       'js/controllers/MenuCategoryController.js',


                ]
            }]);
        }] 
    }
})

Controller / Action:

public ActionResult MenuCategory(int? CategoryID)
{
    return View('');
}

You will need to reference Angular Route in your app to use $location service.

answered Nov 7, 2016 at 8:55

Fabio Silva Lima

7246 silver badges14 bronze badges

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

6 Comments

Hana Over a year ago

Thanks alot !! but I get error 'Unknown provider: $location'

Fabio Silva Lima Over a year ago

Did you referenced the angular route .js file? could share the file name?

Hana Over a year ago

I have those services injected : MetronicApp.config(['$stateProvider', '$urlRouterProvider', '$location', function ($stateProvider, $urlRouterProvider,$location) { // Redirect any unmatched url

Fabio Silva Lima Over a year ago

@Hana download angular route library and put together other angular libraries angular-route.js

Fabio Silva Lima Over a year ago

@Hana inject the $location inside templateUrl function and not in .config() function. Your config function must ge that: MetronicApp.config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) {}

|

Collectives™ on Stack Overflow

How to send URL parameter from angularJS to MVC action

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related