如何使用 ASP.Net MVC View .csthml 作为 Angular View 而不是 .html [英] How to use ASP.Net MVC View .csthml as Angular View instead of .html

问题描述

我正在尝试使用 Angulars $routeProvider 将模板加载到我的 Views 文件夹中的 .cshtml 文件中的容器中.

我用这个代码得到 404 i Angular:

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

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

解决方案

为了将 .cshtml 提供给客户端，您需要配置几个步骤.

我在 GitHub 上创建了一个名为

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

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

<配置><configSections>...<system.webServer><处理程序><remove name="BlockViewHandler"/><add name="BlockViewHandler" path="*.cshtml" verb="*"preCondition="integratedMode"type="System.Web.HttpNotFoundHandler"/></处理程序></system.webServer>...</配置>

4) 创建控制器和操作方法.

公共类 NgController : 控制器{public PartialViewResult RenderComponents(字符串特征，字符串名称){return PartialView($"~/App/{feature}/Components/{name}");}}

5) 配置路由.

routes.MapRoute(name: "组件",url: "{feature}/components/{name}",默认值:new { controller = "Ng", action = "RenderComponents" });

信用

建筑使用 ASP.NET MVC 5 的强类型 AngularJS 应用程序作者:马特·霍尼卡特

AngularJS &ASP.NET MVC Playing nice Tutorial 作者:Miguel Castro

Im trying to use Angulars $routeProvider to load templates in to a container in a .cshtml file that is in my Views folder.

Im getting a 404 with this code i Angular:

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

Angular can´t find the second.cshtml file. Why? is it not possible to use .cshtml files?

解决方案

There are few steps you will need to configure in order to serve .cshtml to client.

I created a sample project called AngularAspNet at GitHub.

1) Create App folder to host Angular Scripts. You can name whatever you want.

2) Place .cshtml file inside App/xxx/Components/ folder. Ensure that property is set to content.

I would like to place Angular View and Component (JavaScript files) together. The reason is it helps me find View and corresponding Component easily, when the project becomes more complex. So, rather than placing .js inside Views folder, I place .chtml file inside App (Angular Script) folder.

1) Create a web.config with BlockViewHandler inside .

<?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) Create Controller and Action Method.

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

5) Configure Route.

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

Credit

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

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

这篇关于如何使用 ASP.Net MVC View .csthml 作为 Angular View 而不是 .html的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！