8

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

我有一个简单的 MVC4 项目，其中包含 1 个控制器和 1 个视图（即：home.cshtml）。现在，我已将 HTML 文件（即：search.html）添加到名为“Templates”的文件夹中，该文件夹位于项目的主目录中（位于视图文件夹之外）。我想要的是用 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 () {

});

希望这对你来说清楚。任何帮助，将不胜感激！谢谢..

4

2 回答 2

25

我花了一段时间才弄清楚如何让 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: '/' });
});

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

在我的 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 并且应用程序的所有其他部分都很好地包含在通过该模板操作加载的部分视图中。希望这可以帮助。

于 2013-06-23T00:32:22.220 回答
5

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

听起来你想让'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
    });
});
于 2015-07-31T08:46:33.287 回答