Angular 路由模板 url 是否支持 ASP.Net MVC 5 项目中的 *.cshtml 文件？

Question

我正在开发一个 MVC 5 项目。当我在视图中使用 html 页面时，它会加载该页面，但是当我使用 .cshtml 页面时，它不会加载视图。出现空白页。

$urlRouterProvider
    .otherwise('/app/dashboard');

$stateProvider            
    .state('app', {
        abstract: true,
        url: '/app',
        templateUrl: 'tpl/app.html'
    })
    .state('app.dashboard', {
        url: '/dashboard',
        templateUrl: 'tpl/app_dashboard.html'
    })

请指导我如何使用cshtml文件或最好的方法。

Answer 1

是的，你可以。

向Yasser's 添加类似的答案，但使用 ngRoute：

1) 您需要将控制器/操作引用到您的 ASP.NET MVC 应用程序，而不是引用您的部分 HTML。

.when('/order', {
    templateUrl: '/Order/Create',
    controller: 'ngOrderController' // Angular Controller
})

2) 您的 ASP.NET MVC 将返回一个 .cshtml 视图：

public class OrderController : Controller
{
    public ActionResult Create()
    {
        var model = new MyModel();
        model.Test= "xyz";

        return View("MyView", model);
    }
}

3) 您的 MyView.cshtml 将混合使用 Razor 和 Angular。注意：作为 Angular 应用的一部分，请将布局设置为 null。

@model MyProject.MyModel

@{
   Layout = null;
}

<h1>{{ Test }}</h1> <!-- Angular -->
<h1>Model.Test</h1> <!-- Razor -->

Answer 2

你不能。

您不能在 Angular 路由的模板 url 中使用 .cshtml 文件的路径。您可以在浏览器中打开 .cshtml 文件吗？没有权利 ？同样的事情也适用于这里。

解决方法：

.cshtml 文件包含服务器端代码，要渲染它，您需要使用控制器和操作。他们将为您呈现该 .cshtml 文件。因此，让控制器操作为您返回该视图，并在您的角度路由中使用控制器操作的 url。

例如：

state('app.dashboard', {
        url: '/dashboard',
        templateUrl: '/dashboard/index'
     })

与

public class DashboardController : Controller
{
    public ActionResult Index()
    {
        return View();
    }
}

p.s: 试过了，这对我有用

Answer 3

您不能混合使用 angularJs 和 Razor 视图，剃须刀在服务器中加载，而 angular 在客户端运行它使用在浏览器中运行的 javascript 来呈现视图，这就是人们倾向于使用 rest api 作为后端的原因在您的情况下，因为您使用的是 .net，所以它可能是 Web API 或服务堆栈。

您可以做的是将剃刀视图作为主“索引页面”执行，但从那里让 angularjs 处理“内部”页面的路由。

请记住，Angular 是建立在 single page application 的概念之上的，这是 asp.net mvc 架构的不同视角。

Answer 4

cshtml 本质上是具有剃须刀语法的内联 csharp 代码，并在服务器站点上呈现为 html，因此您不能在角度路由中使用，因为浏览器无法识别 c#