Angular MVC project - getting 404 with templateUrl

Question

I'm trying to access an edit partial from another folder (AddEditPersonModal.cshtml) in my mvc project, then load the contents in a ui bootstrap modal thru angular. When the index.cshtml page loads I get a 404 error on that very partial. Here's my code:

Angular:

 $scope.editPerson = function (person) {
    $scope.modalModel = person;
    //getModal(person);
    $uibModal.open({
        templateUrl: '/Modal/AddEditPersonModal.cshtml',
        controller: 'modalController',
        scope: $scope
    })
    resolve: {
            person: {
                return $scope.person;
            }
    }
}

Index.cshtml

<a href="" data-toggle="modal" data-target="#myModal" ng-model="editPersonModel" ng-click="editPerson(person)"><span class="fa fa-pencil-square-o"></span></a>

Error:

    angular.js:12011 GET http://localhost:58227/Modal/AddEditPersonModal.cshtml 404 (Not Found)(anonymous function) @ angular.js:12011n @ angular.js:11776(anonymous function) @ angular.js:11571(anonymous function) @ angular.js:16383$eval @ angular.js:17682$digest @ angular.js:17495scopePrototype.$digest @ hint.js:1364$apply @ angular.js:17790scopePrototype.$apply @ hint.js:1427(anonymous function) @ angular.js:25890dispatch @ jquery-1.12.4.min.js:3r.handle @ jquery-1.12.4.min.js:3
angular.js:13920 Error: [$compile:tpload] http://errors.angularjs.org/1.5.8/$compile/tpload?p0=%2FModal%2FAddEditPersonModal.cshtml&p1=404&p2=Not%20Found
    at angular.js:38
    at angular.js:19433
    at angular.js:16383
    at m.$eval (angular.js:17682)
    at m.$digest (angular.js:17495)
    at m.scopePrototype.$digest (hint.js:1364)
    at m.$apply (angular.js:17790)
    at m.scopePrototype.$apply (hint.js:1427)
    at l (angular.js:11831)
    at J (angular.js:12033)

ModalController:

 [HttpPost]
    public ActionResult AddEditPersonModal(DTOPerson model)
    {
        return View(model);
    }

~Views/Modal/AddEditPersonModal.cshtml when i run the debugger in vs2015 thats the path it takes me to for it... — tshoemake
– tshoemake, Commented Nov 26, 2016 at 5:45
The template-url should be relative to the application root path. for example, if your views in the root, then use. 'Views/Modal/AddEditPersonModal.cshtml', — Sravan
– Sravan, Commented Nov 26, 2016 at 5:47
You need a controller method named AddEditPersonModal() that returns the .cshtml file - public ActionResult AddEditPersonModal() { return View(); } — user3559349
– user3559349, Commented Nov 26, 2016 at 5:50

user3559349 · Accepted Answer · 2016-11-26 06:18:03Z

1

In MVC, you navigate to controller methods that return views, not to the view file itself. Change the script to

$uibModal.open({
    templateUrl: '/Modal/AddEditPersonModal', // amend
    controller: 'modalController',
    scope: $scope
})

and remove the [HttpPost] attribute from your AddEditPersonModal() method (it's making a GET request, not a POST)

answered Nov 26, 2016 at 6:18

user3559349

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

Collectives™ on Stack Overflow

Angular MVC project - getting 404 with templateUrl

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related