How to load templates from views folder with AngularJS and asp.net MVC 4

Question

Apparently, I'm very new to angularJS and asp.net MVC4. here's the scenario:

I have a simple MVC4 project which contains 1 controller and 1 view (i.e: home.cshtml). Now I have added HTML file (i.e: search.html) to a folder called "Templates" which is located in the main directory of the project (outside of views folder). What I want is to load "search.html" with angularJS so I can include it to the "home.cshtml" how can I do that? here is what I've got so far:

angular Module: (Located in Scripts Folder)

var bfapp = angular.module("blogfinder", []).config(function ($routeProvider) {
    $routeProvider.when('/search', {
        templateURL: '/Templates/search.html',
        controller: 'SearchController'
    });

    $routeProvider.otherwise({ redirectTo: '/search' });

});

bfapp.controller('SearchController', function () {

});

hope this clear for you. any help would be appreciated! Thanks..

apexdodge · Accepted Answer · 2013-06-23 00:32:22Z

25

It took me a while to figure out how to get angularjs working with asp.net mvc -- this isn't 100% the way you did things, but you might want to reconsider to this approach (it's not that much different anyway)

var AccountApp = angular.module("AccountApp", ['$strap.directives', 'ngResource', 'ngGrid', 'filePickers']).
config(function ($routeProvider) {
    $routeProvider.
        when('/', { controller: ListCtrl, templateUrl: 'Templates/Account/List' }).
        when('/', { controller: EditCtrl, templateUrl: 'Templates/Account/Edit' }).
        otherwise({ redirectTo: '/' });
});

Ok, notice I am calling Templates/Account/List.

In my RouteConfig.cs

        routes.MapRoute(
            name: "Templates",
            url: "Templates/{controller}/{template}",
            defaults: new { action = "Template" }
        );

Now in each controller, I have this corresponding action that directs the call to the appropriate partial view:

    public ActionResult Template(string template)
    {
        switch (template.ToLower())
        {
            case "list":
                return PartialView("~/Views/Account/Partials/List.cshtml");
            case "create":
                return PartialView("~/Views/Account/Partials/Create.cshtml");
            case "edit":
                return PartialView("~/Views/Account/Partials/Edit.cshtml");
            case "detail":
                return PartialView("~/Views/Account/Partials/Detail.cshtml");
            default:
                throw new Exception("template not known");
        }
    }

It all starts off with the Index() action in the controller though.

    public ActionResult Index()
    {
        return View();
    }

Putting it all together, my directory structure looks like this.

/Views
    /Account
        /Partials
             List.cshtml
             Create.cshtml
             Edit.cshtml
             Detail.cshtml
        Index.cshtml

I'm biased, since this is my approach, but I think it makes things super simple and organized nicely. Index.cshtml contains the ng-view and all of the other parts of the application are nicely contained in partial views that are loaded through that Template action. Hope this helps.

answered Jun 23, 2013 at 0:32

apexdodge

7,0574 gold badges29 silver badges34 bronze badges

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

2 Comments

Tom Fobear Over a year ago

I think I'll be doing something similar but with return new PartialView("~/Views/Account/Partials/" + template + ".cshtml"); Or even try to map the path and check if the file exists first and try alternate folders.

Alisson Reinaldo Silva Over a year ago

The solution given by 葛厚德 is the better, I'm also using that solution. Instead of messing with router, just create actions for your partial views, and let MVC do its work.

葛厚德 · Accepted Answer · 2016-07-12 09:50:33Z

5

I'm facing the same problem,and I got the solution.

Sounds like you wanna let the 'Home.cshtml' to be the base and load in the 'search.html' by the AngularJS's routing,right? (Just like the MVC-way a little be:The '_Layout.cshtml' is the base,let us can load in different views we navigate.)

To reach that,just add the ng-view tag into the Home.cshtml!The AngularJS routing will work for you.

MAKE SURE the views loaded do not put in the Views folder!(Or you must access the views by firing requests to the controllers to obtain them.)

Here is the example.

We have a Server Side (ASP.NET MVC) Controller :

HomeController with three actions.

public class HomeController : Controller
{
    // GET: Home
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult GetPartial1()
    {
        return View();
    }

    public ActionResult GetPartial2()
    {
        return View();
    }
}

And in your angular code(app.js) just set the URL of the ng-view to these action to obtain the views.

angular.module('myApp', [
    'myApp.controllers',
    'ngRoute'
]);

angular.module('myApp').config(function ($routeProvider, $locationProvider) {
    $routeProvider.when('/view1', {
        controller: 'HomeController',
        templateUrl:'Home/GetPartial1'
    }).when('/view2', {
        controller: 'HomeController',
        templateUrl:'Home/GetPartial2'
    }).otherwise({redirectTo:'/view1'});
    $locationProvider.html5Mode({
        enabled: true,
        requireBase: false
    });
});

edited Jul 12, 2016 at 9:50

answered Jul 31, 2015 at 8:46

葛厚德

1553 silver badges9 bronze badges

1 Comment

Carlos Jimenez Bermudez Over a year ago

Could you give an example in code of how to do this? I've been trying to do it this way for a while, but ng-View does not bind. Thanks.

Collectives™ on Stack Overflow

How to load templates from views folder with AngularJS and asp.net MVC 4

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related