如何在同一项目中从角4页导航到asp.net Web表单

Question

I need to keep both angular 4 pages and asp. 我需要同时保持角度4页和asp。 net web form in one project as web need to shift from asp.net to angular and this cannot be done in one time so i needed to keep both page and function them properly. NET Web窗体在一个项目中，因为Web需要从asp.net转换为有角度的，并且这不可能一次完成，所以我需要同时保持页面和功能正常。

how to navigate to asp.net web form from angular 4 page in same project. 如何在同一项目中从角度4页面导航到asp.net Web表单。

Any help would be grateful 任何帮助将不胜感激

Answer 1

We were able to deliver an angular 2 app in an MVC app. 我们能够在MVC应用中交付angular 2应用。 We also wanted to migrate from MVC slowly. 我们还想从MVC缓慢迁移。 So we re-wrote the feature into angular first, angular development entirely separate, and then copied the compiled angular app into our mvc app, actually we had scripts to take care of the angular compile and copy. 因此，我们首先将特征重新编写为角度，完全分开角度开发，然后将编译后的角度应用复制到我们的mvc应用中，实际上，我们有脚本来处理角度编译和复制。 Then we delivered the angular app via a razor view. 然后，我们通过剃刀视图交付了角度应用程序。 Since the angular app was delivered in a razor view then we could include links and our angular app was inside our main mvc layout. 由于该角度应用是在剃刀视图中交付的，因此我们可以包含链接，并且该角度应用位于我们的主要mvc布局内。

The razor view that has the angular app is the index.html from our angular app, with some of the razor stuff to pass things into the angular app from mvc. 具有角度应用程序的剃须刀视图是我们角度应用程序中的index.html，其中一些剃刀材质可将东西从mvc传递到角度应用程序。

<!doctype html>
<html lang="en">
<head>
<title>Page with SPA</title>
<base href="/set/base/ref/">
<link href="styles.bundle.css" rel="stylesheet" />
</head>
<body>
<div>
    <a href="/SomeController/Index/Index">
        <i></i> back to list
    </a>
    <h4>approve</h4>
</div><div>
<angular-comp somePathNeeded="@Model.SomeData" someIdNeededByAngular="@Model.SomeId" taskId="@Model.SomethingElse" someUrlNeededByAngular="/Url/Inside/Mvc" lastTaskId="@Model.MoreData" firstTaskId="@Model.OtherData" nextTaskId="@Model.MoreDataId" previousTaskId="@Model.OtherthingsINeedInAngular"></angular-comp></div>
<script type="text/javascript" src="./assets/js/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="./assets/js/jquery.easing.1.3.js"></script>
<script type="text/javascript" src="./assets/js/jquery-ui-1.8.14.min.js"></script>
 </script>
<script type="text/javascript" src="inline.bundle.js"></script>
<script type="text/javascript" src="polyfills.bundle.js"></script>
<script type="text/javascript" src="vendor.bundle.js">    </script>
<script type="text/javascript" src="main.bundle.js"></script>
</body>
</html>

As you can see above this is just the output of the angular cli ng build command, all the artifacts from the ng build command were copied into a directory and so the angular app can run inside of mvc. 正如您在上面看到的，这只是angular cli ng生成命令的输出，所有ng build命令的工件都被复制到目录中，因此angular应用程序可以在mvc内运行。 You can also see how we pass stuff into our angular comp. 您还可以看到我们如何将内容传递到我们的角度补偿中。 Also, we can include razor syntax inside the index.html to pass in things from mvc to angular. 另外，我们可以在index.html中包含razor语法，以将内容从mvc传递到angular。

Inside the entry angular component we parsed out what we need using 在入口角度组件内部，我们解析出需要使用的内容

  constructor(private elemRef: ElementRef) {

this.id= this.elemRef.nativeElement.getAttribute('id');
this.otherId= this.elemRef.nativeElement.getAttribute('otherId');
 }

So, the angular app was created separately then included inside our mvc app as a razor view. 因此，Angular应用是单独创建的，然后作为剃刀视图包含在我们的mvc应用中。 From there you can pass in anything you want to angular. 从那里，您可以传递任何想要倾斜的角度。 And include links. 并包含链接。 And since its a razor view it is inside the main layout of the mvc app. 而且由于其剃刀视图，因此它位于mvc应用程序的主要布局中。 So the links of the entire existing mvc app work. 因此，整个现有mvc应用程序的链接都可以工作。 However, if you need links inside of angular, generated and shown by the angular component then you may have to pass those in. 但是，如果您需要在角组件内生成并由角组件显示的链接，则可能必须传递这些链接。

Also, in order for razor to recognize .html files and parse them like an cshtml you can register a view engine to handle html like cshtml. 另外，为了使剃刀能够识别.html文件并像cshtml一样解析它们，您可以注册一个视图引擎以处理cshtml之类的html。 Its something like 它像

 System.Web.Razor.RazorCodeLanguage.Languages.Add("html", new System.Web.Razor.CSharpRazorCodeLanguage());
 ViewEngines.Engines.Add(new HtmlViewEngine());

when the app starts and then 当应用启动时

 class HtmlViewEngine : RazorViewEngine
{
    public HtmlViewEngine()
    {
        FileExtensions = new[] { "html" };

    }
}

There may be a bit more to it, but basically you need to make .html files process like .cshtml and you can do it by associating the razor engine that processes .cshtml with .html. 可能还有更多，但是基本上您需要使.html文件像.cshtml一样进行处理，并且可以通过将处理.cshtml的剃刀引擎与.html关联来实现。 Alternatively, in your angular development you can just name your index.html index.cshtml. 另外，在角度开发中，您可以仅命名index.html index.cshtml。 But, of course this kind of mucks up your angular app. 但是，当然，这种方式会影响您的角度应用程序。

I hope this might help you. 希望对您有所帮助。

如何在同一项目中从角4页导航到asp.net Web表单

问题描述

1 个解决方案

解决方案1
0 2018-09-04 07:06:01

如何在同一项目中从角4页导航到asp.net Web表单

问题描述

1 个解决方案

解决方案1 0 2018-09-04 07:06:01

解决方案1
0 2018-09-04 07:06:01