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

Posted 2023-02-22

【中文标题】Angular 路由模板 url 是不是支持 ASP.Net MVC 5 项目中的 *.cshtml 文件？

【英文标题】：Does Angular routing template url support *.cshtml files in ASP.Net MVC 5 Project?Angular 路由模板 url 是否支持 ASP.Net MVC 5 项目中的 *.cshtml 文件？

【发布时间】：2014-11-05 07:01:01

【问题描述】：

我正在开发一个 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文件或最好的方法。

【问题讨论】：

FWIW 看起来你确实可以做到这一点。希望它不会回来咬我。不确定@Yasser 在 2014 年是否正确，但据我所知，2016 年 Zanon 的方法是正确的。久经考验。

【参考方案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 -->

【讨论】：

这应该被标记为正确答案。这也是我在向下滚动之前奇怪地解释了 Yasser 的同样可行的解决方法的方式。我只是绝对喜欢这个，因为它似乎很好地利用了 Razor 和 Angular 一体机！方便的是，你添加了一些我不得不摸索才能弄清楚的东西。谢谢！

这对我很有帮助。

讨论晚了，但是如何将 Angular 的模型（在您的示例中为 Test）绑定到 Razor 的模型（Model.Test）？我已经尝试过了，但它没有用。我一开始没想到它会起作用，因为 ASP.NET MVC 控制器返回 html，而不是 json 对象，所以如果你不能使用它，那么拥有一个角度视图模型有什么意义。我想你可以在 Angular 的控制器中调用服务器来获取视图模型，但这是到服务器的第二次往返，不是吗？怎么能一键搞定？

【参考方案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: 试过了，这对我有用

【讨论】：

感谢您的建议！它也适用于 Angular 2 和 Typescript。我只是在我的组件中使用它：@Component( selector: 'login', templateUrl: 'Account/Login' )

【参考方案3】：

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

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

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

【讨论】：

所以在你的回答中提到了这一行：“但从那里让 angularjs 处理“内部”页面的路由”。在这一行中你指的是哪些内部页面？ html还是cshtml页面？？

对于内部页面，我的意思是 Angular 为您的应用程序处理 html 页面的完整路由，看看他们使用我在回答中描述的相同逻辑处理的 meanjs org

我不这么认为，也许您可​​以在角度路由中引用任何 mvc 服务器路由/操作结果，但恕我直言，我觉得它很脏:)

你是对的，但现在我在路由 cshmtl 页面时遇到困难。我想在 ng-view 中加载 cshtml 视图页面，并让 angular js 进行路由而不是 mvc。你能帮我吗??

好吧，如果您不知道从哪里开始，我建议您使用 yeoman，然后将为您生成的 index.html 替换为布局/主视图的组合，我个人使用它构建我的 angularjs 应用程序的方法，github.com/cgross/generator-cg-angular

【参考方案4】：

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

【讨论】：

那么，有没有其他方法可以调用.cshtml文件而不是html？

你可以调用它只是浏览器不会识别它，最好的选择是将它显示为文本文件