Webbie Webbie - 1 year ago 64
AngularJS Question

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

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

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

Win Win
Answer Source

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.

enter image description here

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"?>

      <remove name="BlockViewHandler"/>
      <add name="BlockViewHandler" path="*.cshtml" verb="*" 
          type="System.Web.HttpNotFoundHandler" />

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.

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


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

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