AngularJs 路由与 Asp.Net Mvc答案

【问题标题】：AngularJs routing with Asp.Net MvcAngularJs 路由与 Asp.Net Mvc
【发布时间】：2015-07-06 09:05:38
【问题描述】：

我正在尝试使用 Asp.Net MVC 构建 SPA。为此，我正在使用 angularJs routing 。这是我的项目层次结构。

我的 Layout.cshtl 代码

<html lang="en" ng-app="ProjectTrackingModule">
 <head>
   <script src="~/Scripts/jquery-2.1.0.min.js"></script>
   <script src="~/Scripts/angular.min.js"></script>
   <script src="~/Scripts/angular-route.min.js"></script>
   <script src="~/Scripts/app.js"></script>
</head>
<body>
<a href="#Home">Home</a>
<a href="#Projects">Projects</a>
   <div ng‐view style="margin‐left: 10%; margin‐right: 10%;">
    </div>
//... footer
</body>
</html>

我的 app.Js 代码如下：

var app = angular.module('ProjectTrackingModule', ['ngRoute', 'ui.bootstrap']);
app.config(function ($routeProvider) {
    $routeProvider
        .when("/Home", {
        templateUrl: "/Views/Home/Home.cshtml",
        controller:"HomeController"
    })
    .when("/Projects", {
        templateUrl: "/Views/ProjectManagement/ProjectDetails.cshtml",
    controller: "ProjectsController"
    })
    .otherwise({redirectTo:"/Home"})
});

我想在 ng-view 中加载我的 Home.Cshtml 部分视图。但是当我运行我的应用程序时，它只显示主页部分视图。

当我点击 Project 时，它应该在 ng-view 中呈现 ProjectDetails.cshtml。

ProjectDetails.cshtml 中的代码

<div ng-controller="ProjectsController">
    <h2>ProjectDetails</h2>
</div>

【问题讨论】：

没有意义，不要比较角度路由和mvc路由:(
@RameshRajendran：如何在 mvc 中使用路由。我的意思是当我点击 Home anchor link 时，它应该显示 Home 部分视图。
@RameshRajendran：请查看更新后的问题。
:--) 我已经更新了我的答案

标签： asp.net-mvc angularjs asp.net-mvc-4 asp.net-mvc-routing angularjs-routing

【解决方案1】：

我认为您对 Angularjs 路由概念有一些误解。

MVC 路由：

ASP.NET 路由使您能够使用不必映射到网站中特定文件的 URL。由于 URL 不必映射到文件，因此您可以使用描述用户操作的 URL，因此用户更容易理解。

角度路由：

使用MVC框架的Angular.js路由不使用MVC路由。

可比较的部分是：

Model ===== ng-module 
controller ===== ng-controller
view ===== ng-view

所以你不能在 angularjs 路由配置中调用 MVC 控制器。这有意义吗？

另外请考虑cshtml 和html 之间的一些区别。

Angular 路由和 MVC 路由完全不同，因为：

Angular 路由使用客户端
MVC 路由用于服务器端

以上文字仅供您理解。

我认为这个讨论会对你有所帮助：

How to use ASP.NET MVC and AngularJS routing?

更新：

Anchor 标签中的href 错误。

它应该是href="#/Home"，而不是href="#Home"

所以请更改您的代码

 <a href="#/Home">Home</a>
    <a href="#/Projects">Projects</a>

【讨论】：

我更改了我的代码。但什么都没有发生。当我点击项目时，它没有加载ProjectDetails.cshtml

【解决方案2】：

让我们先了解角度的路由。假设你的网址说

www.example.com/Home/Index -- 这指向您的 MVC HomeController 和 Index ActionMethod。现在 mvc 做了什么，它只返回第一个视图。

假设你有一个锚加载新视图。单击此按钮将生成一个新的 Url www.example.com/Home/Index#/angular-route。这个 url 仍然会命中相同的 MVC HomeController 和 ActionMethod。但是你有一个额外的角度路线

`var app = angular.module('ProjectTrackingModule', ['ngRoute', 'ui.bootstrap']);
 app.config(function ($routeProvider) {
    $routeProvider
        .when("/angular-route", {
        templateUrl: "/Html/GetHtml?type=angular-route",
        controller:"AngularController"
    })   
    .otherwise({redirectTo:"/Home"})
});`

在代码部分 templateUrl: "/Html/GetHtml?type=angular-route",

Html 是 MVC 控制器，GetHtml 是 ActionMethod。这个 ActionMethod 根据 angular route 返回你想要的新视图，这就是为什么我们也发送一个参数 type 来帮助我们决定。

controller:"AngularController" 表示 Angular 将在页面从您的 mvc 控制器返回后调用其控制器。它是 Angular 的控制器，与你的 MVC 控制器无关。

你像这样声明角度控制器：

 app.controller('AngularController',function($scope){
        alert("my js controller is called");
    });

希望这可以帮助您找到解决方案。

【讨论】：

【解决方案3】：

有一个简单的例子可以应用到你的项目中。例如我们的 MVC 应用程序有四个页面，分别是 Home、Contact、About 和 User，我们想为每个页面创建一个 angularjs 模板，那么我们如何为它做路由呢？如何为它制作angularjs控制器？

基本代码如下：

路由：

    $routeProvider
    .when('/', { // For Home Page
        templateUrl: '/AngularTemplates/Home.html',
        controller: 'HomeController'
     })
    .when('/Home/Contact', { // For Contact page
        templateUrl: '/AngularTemplates/Contact.html',
        controller: 'ContactController'
    })
    .when('/Home/About', { // For About page
        templateUrl: '/AngularTemplates/About.html',
        controller: 'AboutController'
    })
    .when('/Home/User/:userid', { // For User page with userid parameter
       templateUrl: '/AngularTemplates/User.html',
       controller: 'UserController'
    })
    .otherwise({   // This is when any route not matched => error
       controller: 'ErrorController'
    })
}]);

控制器：

var app = angular.module('MyApp'); app.controller('UserController', ['$scope', '$routeParams', function ($scope, $routeParams) {
$scope.Message = "This is User  Page with query string id value = " + $routeParams.userid;}]); ...

全文及其下载代码Angularjs routing asp.net mvc example

【讨论】：

你没有创建.cshtml。但就我而言，我有 .cshtml page 。在这种情况下，AngularJs 路由将不起作用。
在我的示例中，视图为 .cshtml，视图模板为 html 文件。在 html 文件中，我通过 angularjs 实现。我使用 ng-view 将模板加载到 .cshtml。请在Github上下载源代码。
我看到你希望 templateUrl 必须是 .cshtml
您不能在 Angular 路由的模板 url 中使用 .cshtml 文件的路径。请参阅stackoverflow.com/questions/25785579/…
这个答案根本没有解决操作问题。 Op 明确表达了使用 cshtml 的愿望，这在这个例子中是做不到的。

【解决方案4】：

您不能直接指向 .cshtml 文件，但可以指向指向 MVC 路由的 templateUrl。

考虑到您使用的是默认的 MVC 路由 {controller}/{action}/{id?}，例如：

var app = angular.module('ProjectTrackingModule', ['ngRoute', 'ui.bootstrap']);
app.config(function ($routeProvider) {
    $routeProvider
        .when("/Home", {
        templateUrl: "/Home/Home", //points to an mvc route controller=Home, action=Home
        controller:"HomeController"
    })
    .otherwise({redirectTo:"/Home"})
});

但为了让它工作，MVC Action 也应该在控制器中。

public class HomeController : Controller
{
    [HttpGet]
    public ActionResult Home()
    {
        return View();
    }
}

你的锚标签也指向了一个不正确的href，它应该有井号（#）

<a href="/#/Home">Home</a>
<a href="/#/Projects">Projects</a>

【讨论】：

【解决方案5】：

简单的方法如下：

MyAngularApp.js

var myAngularApp = angular.module('MyAngularApp', ['ngRoute']);
myAngularApp.config(function ($routeProvider) {
    $routeProvider
        .when("/myprojects", {
            templateUrl: "MyAspMvcCtrl/GetTemplate?id=myprojects",  
            controller:"MyAngularController"
        })
       ...
    .otherwise({redirectTo:"/myprojects"})
});

myAngularApp.controller("MyAngularController", function ($scope) {
    ...
    // Do something
    $scope.mydata = {
        id = 1234,
        msg = "Hello"
    };
});

ASP.Net MVC 控制器

public class MyAspMvcCtrlController : Controller
{
    [HttpGet]
    public ActionResult GetTemplate(string id)
    {
       switch (id.ToLower())
       {
           case "myprojects":
               return PartialView("~/Views/ProjectManagement/ProjectDetails.cshtml");
           default:
               throw new Exception("Unknown template request");
       }
    }
}

Layout.cshtml

<html ng-app="myAngularApp">
...
<body>
    ...
    <div ...>
        ...
        <a href="#/myprojects">My Projects</a>
        ...
    </div>

    <div ng-view></div>
    ...
</body>
</html>

ProjectDetails.cshtml

<div ...>
    <h3>ID: {{mydata.id}}</h3>
    <p>Message: {{mydata.msg}}</p>
</div>

【讨论】：

【解决方案6】：

AngularJs 路由不适用于 cshtml 文件！！

如果您想将 angularjs 路由与 mvc 视图 (cshtml) 文件一起使用，请同时使用两种路由：角度路由 + mvc 路由

你的路由代码应该是这样的：

.when("/Home", {
        templateUrl: "/Home/Home",
        controller:"HomeController"
});

First Home 是控制器名称 Second Home 在 Mvc 控制器上是 The Action Name。

【讨论】：