angularjs - How to use ASP.Net MVC View .csthml as Angular View instead of .html

Question

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?

Answer 1

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