how to navigate to asp.net web form from angular 4 page in same project
Question
I need to keep both angular 4 pages and 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.
how to navigate to asp.net web form from angular 4 page in same project.
Any help would be grateful
1 answers
solution1
0 2018-09-04 07:06:01
We were able to deliver an angular 2 app in an MVC app. We also wanted to migrate from MVC slowly. 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. 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.
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.
<!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. 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.
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. 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. So the links of the entire existing mvc app work. 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. 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. Alternatively, in your angular development you can just name your index.html index.cshtml. But, of course this kind of mucks up your angular app.
I hope this might help you.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.