Asp.net mvc 5 Angularjs2';模板URL';在@Component中-如何显示razor视图
如何在@Component中的“templateUrl”中呈现ASP.NET MVC5 Razor视图(.cshtml)。使用“/Home/Index”时,页面将挂起Asp.net mvc 5 Angularjs2';模板URL';在@Component中-如何显示razor视图,asp.net-mvc-5,angular2-routing,angular2-template,angular2-services,angular2-directives,Asp.net Mvc 5,Angular2 Routing,Angular2 Template,Angular2 Services,Angular2 Directives,如何在@Component中的“templateUrl”中呈现ASP.NET MVC5 Razor视图(.cshtml)。使用“/Home/Index”时,页面将挂起 import { Component, OnInit } from '@angular/core'; import { Product } from './model'; import { InventoryService } from './dataService'; @Component({ selector: 'm
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);
}
}
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>
Index.cshtml如下所示:-
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();
}
}
@{
ViewBag.Title = "Home Page";
}
<my-app>Loading...</my-app>
@{
ViewBag.Title=“主页”;
}
加载。。。
使用“模板”时,我能够成功访问“/Home/Index”路径,但应用程序挂起,无法使用“模板URL”访问
@Component({
selector: 'my-app',
template: `<ul>
<li *ngFor="let product of products">
<h4>{{product.getProducts()}}</h4>
</li>
</ul>`,
//templateUrl: '/Home/Index',
providers: [InventoryService]
})
@组件({
选择器:“我的应用程序”,
模板:`
-
{{product.getProducts()}}
`,
//templateUrl:“/Home/Index”,
提供者:[库存服务]
})
在混合ASP.NET MVC5和Angular时,您需要一种稍微不同的方法,您需要将根组件路径和ASP.NET默认路径分开
试试下面
创建一个新的控制器,比如说组件控制器,如下所示
public class ComponentsController : Controller
{
// GET: Components
public ActionResult App()
{
return View();
}
}
并添加Components\App.cshtml
,确保未使用共享布局
<ul>
<li *ngFor="let product of products">
<h4>{{product.getProducts()}}</h4>
</li>
</ul>
删除Index.cshtml的共享布局,并直接从Index.cshtml获得服务,根据项目结构修复路径
它应该会起作用
用一个基本的应用程序检查这一点
希望这有帮助 在混合ASP.NET MVC5和Angular时,您需要一种稍微不同的方法,您需要将根组件路径和ASP.NET默认路径分开 试试下面 创建一个新的控制器,比如说组件控制器,如下所示
public class ComponentsController : Controller
{
// GET: Components
public ActionResult App()
{
return View();
}
}
并添加Components\App.cshtml
,确保未使用共享布局
<ul>
<li *ngFor="let product of products">
<h4>{{product.getProducts()}}</h4>
</li>
</ul>
删除Index.cshtml的共享布局,并直接从Index.cshtml获得服务,根据项目结构修复路径
它应该会起作用
用一个基本的应用程序检查这一点
希望这有帮助 您使用的是webpack还是SystemJs?我使用的是SystemJs您的服务器端路由看起来怎么样?主html页面与控制器路径不同吗?您可以直接访问Web控制器吗?@Madhu Ranjan:添加了您在上述问题中询问的详细信息。您没有添加HomeController和Index.cshtml的外观,您可以访问/Home/Index路径吗?您使用的是webpack还是SystemJs?我使用的是SystemJs您的服务器端路由外观如何?主html页面与控制器路径不同吗?您可以直接访问Web控制器吗?@Madhu Ranjan:添加了您在上述问题中询问的详细信息。您没有添加HomeController和Index.cshtml的外观,您可以访问/Home/Index路径吗?添加App.cshtml无效。已加载库、polyfills、头部区域中的SystemJs。App.cshtml主体部分的代码如下:
- {{product.getProducts()}
必须修改“RouteConfig.cs”以呈现“ComponentController”&App.cshtml。它不起作用&Visual Studio与我使用共享布局文件的原始方法一样挂起。@Bobby,在回答中添加了github repo,请检查它,尽管它不使用ASP捆绑和缩小,但有一个非常基本的angular 2应用程序和ASP MVC,干杯!!添加App.cshtml无效。已加载库、polyfills、头部区域中的SystemJs。App.cshtml主体部分的代码如下:- {{product.getProducts()}
必须修改“RouteConfig.cs”以呈现“ComponentController”&App.cshtml。它不起作用&Visual Studio与我使用共享布局文件的原始方法一样挂起。@Bobby,在回答中添加了github repo,请检查它,尽管它不使用ASP捆绑和缩小,但有一个非常基本的angular 2应用程序和ASP MVC,干杯!!
templateUrl: '/Components/App'