如何使用AngularJS和asp.net MVC 4从views文件夹加载模板

Question

显然,我是angularJS和asp.net MVC4的新手.这是场景:

我有一个简单的MVC4项目,其中包含1个控制器和1个视图(即:home.cshtml).现在我已将HTML文件(即:search.html)添加到名为"Templates"的文件夹中,该文件夹位于项目的主目录中(在views文件夹之外).我想要的是用angularJS加载"search.html"所以我可以将它包含在"home.cshtml"中我该怎么做？这是我到目前为止所得到的:

角度模块:(位于脚本文件夹中)

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 () {

});

希望这对你来说很清楚.任何帮助,将不胜感激!谢谢..

Answer 1

我花了一段时间才弄清楚如何使用asp.net mvc工作的angularjs - 这不是你做事的方式的100%,但你可能想重新考虑这种方法(反正它并没有那么多不同)

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: '/' });
});

好的,请注意我正在调用模板/帐户/列表.

在我的RouteConfig.cs中

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

现在在每个控制器中,我都有相应的操作,将调用定向到适当的局部视图:

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

这一切都始于控制器中的Index()动作.

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

总而言之,我的目录结构如下所示.

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

我有偏见,因为这是我的方法,但我认为它使事情变得非常简单和组织得很好.Index.cshtml包含ng-view,应用程序的所有其他部分都很好地包含在通过该Template操作加载的部分视图中.希望这可以帮助.

Answer 2

我面临同样的问题，我得到了解决方案。

听起来你想让'Home.cshtml'成为基础并通过AngularJS的路由加载到'search.html'中，对吗？（有点像 MVC 的方式：'_Layout.cshtml' 是基础，让我们可以在我们导航的不同视图中加载。）

为此，只需将 ng-view 标记添加到 Home.cshtml 中！AngularJS 路由将为您工作。

确保加载的视图没有放在 Views 文件夹中！（或者您必须通过向控制器发出请求来访问视图以获取它们。）

这是示例。

我们有一个服务器端（ASP.NET MVC）控制器：

具有三个动作的 HomeController。

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

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

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

在您的角度代码（app.js）中，只需将 ng-view 的 URL 设置为这些操作即可获取视图。

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