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

Question

显然，我对 angularJS 和 asp.net MVC4 很陌生。这是场景:

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

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

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

我花了一段时间才弄清楚如何让 angularjs 与 asp.net mvc 一起工作——这不是你做事的 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: '/' });
});

好的，请注意我正在调用 Templates/Account/List。

在我的 RouteConfig.cs 中

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

现在在每个 Controller 中，我都有相应的操作将调用定向到适当的局部 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");
        }
    }

不过，这一切都始于 Controller 中的 Index() 操作。

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

放在一起，我的目录结构如下所示。

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

我有偏见，因为这是我的方法，但我认为它使事情变得 super 简单并且组织得很好。 Index.cshtml 包含 ng-view，应用程序的所有其他部分都很好地包含在通过该模板操作加载的部分 View 中。希望这会有所帮助。