how to navigate to asp.net web form from angular 4 page in same project
how to navigate to asp.net web form from angular 4 page in same project
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 Answer
1
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.
Thanks for contributing an answer to Stack Overflow!
But avoid …
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
But avoid …
To learn more, see our tips on writing great answers.
Required, but never shown
Required, but never shown
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
