Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

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

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

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


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...