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

显然，我对angularJS和asp.NETMVC4非常陌生。以下是场景：

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

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

---

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

我花了一段时间才弄明白如何让angularjs与asp.net mvc一起工作——这不是你做事情的100%方式，但你可能想重新考虑这种方法（反正也没什么不同）

好的，请注意，我正在调用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

---

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

我也面临同样的问题，我找到了解决办法

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

要做到这一点，只需将ng view标记添加到Home.cshtml中！AngularJS路由将适用于您

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

---

这是一个例子

我们有一个服务器端（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();
    }
}

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

---

我想我会做一些类似的事情，但是使用

returnnewpartialview（“~/Views/Account/Partials/”+template+”.cshtml”）

或甚至尝试映射路径，首先检查文件是否存在，然后尝试替换文件夹。解决方案由葛厚德 是更好的，我也在使用这个解决方案。不要搞乱路由器，只需为局部视图创建操作，并让MVC完成它的工作。您能给出一个如何实现这一点的代码示例吗？我已经尝试这样做了一段时间，但ng视图不受约束。谢谢

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

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

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

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