如何将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文件中的容器中.

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

我在Angular中使用此代码获取404:

Im getting a 404 with this code i Angular:

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

Agular找不到second.cshtml文件. 为什么? 无法使用.cshtml文件?

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

推荐答案

要为客户端提供 .cshtml 服务，您需要配置几个步骤.

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

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

I created a sample project called AngularAspNet at GitHub.

1)创建 App 文件夹以托管Angular脚本. 您可以随意命名.

2)将 .cshtml 文件放置在 App/xxx/Components/ 文件夹中.确保将属性设置为内容.

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

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

1)使用 BlockViewHandler 创建一个 web.config .

<?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)创建控制器和操作方法.

4) Create Controller and Action Method.

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" });

信用

建筑具有ASP.NET MVC 5的强类型AngularJS应用 由Matt Honeycutt

Credit

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

AngularJS& ASP.NET MVC播放Miguel Castro的精美教程

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