4

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?

danronmoon
  • 3,814
  • 5
  • 34
  • 56
Webbie
  • 537
  • 2
  • 10
  • 25
  • It is possible. We have written few Angular applications with ***.cshtml*** as Angular's view. There are few steps you will need to do. Let me wrote an instruction now, and then post here. – Win Oct 07 '16 at 14:55
  • I posted my [answer](http://stackoverflow.com/a/39922683/296861). ***FYI**: Angular 2 is right around the corer. You want to use Angular 1.5's component so that you can migrate to Angular 2 easily.* – Win Oct 07 '16 at 17:33

2 Answers2

3

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

<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

Win
  • 61,100
  • 13
  • 102
  • 181
  • What do you get out of serving the .cshtml file vs. having an .html file? – Andy T Oct 07 '16 at 18:28
  • JavaScript is a dynamic language, so maintenance cost is very high. Using server-side ***cshtml*** somewhat solves the problem; I can create strongly-typed ASP.Net MVC helpers to render Angular bindings and expressions. I like **[Axel Zaratean](https://axelzarate.wordpress.com/2014/09/15/angular-helpers-for-asp-net-mvc/)**'s helpers; *unfortunately he stopped contributing to [his GitHub project](https://github.com/axel-zarate/Angular.NET/).* I uses his as a based and modified a lot based on my need. – Win Oct 07 '16 at 18:45
0

You cannot serve the .cshtml file directly.

If there is no server-side logic, you would need to convert the file to a .html file or if there is logic, you would need to request it using the standard MVC route way: /MyController/MyAction.

Andy T
  • 10,223
  • 5
  • 53
  • 95
  • It is possible. Please see my [answer](http://stackoverflow.com/a/39922683/296861). – Win Oct 07 '16 at 17:24