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

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

本文关键字：视图 文件夹 加载 MVC AngularJS 何使用 asp net      更新时间：2023-09-26

显然，我对angularJS和asp.net MVC4非常陌生。这是一个场景：

我有一个简单的MVC4项目，它包含1个控制器和1个视图（即：home.cs.HTML）。现在我已经将HTML文件（即：search.HTML）添加到一个名为"Templates"的文件夹中，该文件夹位于项目的主目录中（视图文件夹外）。我想要的是用angularJS加载"search.html"，这样我就可以把它包含在"home.cs.html"中。我该怎么做？到目前为止，我得到的是：

角度模块：（位于脚本文件夹中）

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

希望你明白这一点。任何帮助都将不胜感激！谢谢

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

现在，在每个控制器中，我都有相应的操作，将调用引导到适当的部分视图：

    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.chtml包含ng视图，应用程序的所有其他部分都很好地包含在通过Template操作加载的部分视图中。希望这能有所帮助。

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

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

要达到这个目的，只需将ng视图标记添加到Home.cshtml中！AngularJS路由将适用于您。

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

这是一个例子。

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

有三个动作的家庭控制器。

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

在您的angular代码（app.js）中，只需将ng视图的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
    });
});
相关文章：