angularjs - 如何在 Angular View 中使用 ASP.Net MVC View .cshtml 而不是 .html

Question

我尝试使用 Angulars $routeProvider 将模板加载到我的 Views 文件夹中的 .cshtml 文件中的容器中。
我用这个代码得到 404 i Angular:

.when('#/second',{ urlTemplate:"Views/second.cshtml",controller:"MainController"})

Angular 找不到 second.cshtml 文件。
为什么？
不能使用 .cshtml 文件吗？

Answer 1

您需要配置几个步骤才能提供服务 .cshtml 给客户。

我创建了一个名为 AngularAspNet at GitHub 的示例项目.

1) 创建 应用 用于托管 Angular 脚本的文件夹。您可以随意命名。

2) 地点 .cshtml 里面的文件 应用程序/xxx/组件/文件夹。确保属性设置为内容。



我想将 Angular View 和组件(JavaScript 文件)放在一起。原因是当项目变得更复杂时，它可以帮助我轻松找到View和相应的组件。因此，我没有将 .js 放在 Views 文件夹中，而是将 .chtml 文件放在 App (Angular Script) 文件夹中。

1) 创建一个 web.config 与 BlockViewHandler 里面 。

<?xml version="1.0"?>

<configuration>
  <configSections>
  ...        
  <system.webServer>
    <handlers>
      <remove name="BlockViewHandler"/>
      <add name="BlockViewHandler" path="*.cshtml" verb="*" 
          preCondition="integratedMode" 
          type="System.Web.HttpNotFoundHandler" />
    </handlers>
  </system.webServer>
   ...
</configuration>

4) 创建 Controller 和 Action 方法。

public class NgController : Controller
{
    public PartialViewResult RenderComponents(string feature, string name)
    {
        return PartialView($"~/App/{feature}/Components/{name}");
    }
}

5) 配置路由。

routes.MapRoute(
    name: "Components",
    url: "{feature}/components/{name}",
    defaults: new { controller = "Ng", action = "RenderComponents" });

信用

Building Strongly-typed AngularJS Apps with ASP.NET MVC 5by Matt Honeycutt

AngularJS & ASP.NET MVC Playing nice Tutorial by Miguel Castro