如何在@component的'templateUrl'中渲染ASP.NET MVC5剃须刀视图(.cshtml(。在使用"/home/index"时,页面挂起。
import { Component, OnInit } from '@angular/core';
import { Product } from './model';
import { InventoryService } from './dataService';
@Component({
selector: 'my-app',
template: `<ul>
<li *ngFor="let product of products">
<h4>{{product.getProducts()}}</h4>
</li>
</ul>`,
//templateUrl: '/Home/Index',
providers: [InventoryService]
})
export class AppComponent implements OnInit {
products: Product[];
constructor(private productService: InventoryService) { }
ngOnInit(): void {
this.productService.getAll()
.then(products => this.products = products);
}
}
服务器端路由(RouteConfig.cs(:
routes.IgnoreRoute("{resource}.axd/{*pathInfo}");
routes.MapRoute(
name: "Default",
url: "{controller}/{action}/{id}",
defaults: new { controller = "Home", action = "Index", id = UrlParameter.Optional }
);
Angular的主页是MVC的共享_layout.cshtml文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>@ViewBag.Title - My ASP.NET Application</title>
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
<!-- 1. Load libraries -->
<!-- Polyfill(s) for older browsers -->
<script src="~/node_modules/core-js/client/shim.min.js"></script>
<script src="~/node_modules/zone.js/dist/zone.js"></script>
<script src="~/node_modules/systemjs/dist/system.src.js"></script>
<!-- 2. Configure SystemJS -->
<script src="~/Scripts/systemjs.config.js"></script>
<script>
System.import('../Scripts/main').catch(function (err)
{
console.error(err);
});
</script>
</head>
<body>
<div class="navbar navbar-inverse navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Web API控制器(productController.cs(可直接访问并取回有效的JSON输出。
[Route("api/Product/GetProducts")]
public IEnumerable<ProductJSON> GetProducts()
{
IQueryable<ProductJSON> products = _context.Products.Select(
p => new ProductJSON
{
Name = p.Name,
Category = p.Category,
Price = p.Price
});
return products.ToList();
}
homecontroller.cs如下: -
public class HomeController : Controller
{
public ActionResult Index()
{
return View();
}
public ActionResult About()
{
ViewBag.Message = "Your application description page.";
return View();
}
public ActionResult Contact()
{
ViewBag.Message = "Your contact page.";
return View();
}
}
index.cshtml如下: -
@{
ViewBag.Title = "Home Page";
}
<my-app>Loading...</my-app>
使用'template'时,我能够成功访问'/home/index'路径,但是应用程序挂起并且无法在使用'templateUrl'
上访问@Component({
selector: 'my-app',
template: `<ul>
<li *ngFor="let product of products">
<h4>{{product.getProducts()}}</h4>
</li>
</ul>`,
//templateUrl: '/Home/Index',
providers: [InventoryService]
})
混合ASP.NET MVC5和Angular时需要一些不同的方法,您需要将root组件路径和ASP.NET默认路径分开。
尝试以下,
创建一个新的控制器,例如组件controller ,如下所示,
public class ComponentsController : Controller
{
// GET: Components
public ActionResult App()
{
return View();
}
}
并添加一个ComponentsApp.cshtml
,请确保不使用共享_layout。
<ul>
<li *ngFor="let product of products">
<h4>{{product.getProducts()}}</h4>
</li>
</ul>
更新AppComponent
模板URL,因此它使用新路径,
templateUrl: '/Components/App'
还删除index.cshtml的共享布局,然后直接从index.cshtml获得基于项目结构的路径
来修复路径它应该起作用。
使用基本应用程序检查此GitHub回购。
希望这会有所帮助!