How to render razor view in aurelia custom element? - asp.net-mvc

Question

I am successfully rendering mvc view when it comes to render the normal aurelia class as below:
export class App {
getViewStrategy() {
return 'app';
}
}
How would I render my razor view when using custom element basic example is I got a nav-bar.html which is getting use to render my menu but instead of nav-bar.html I want to use cshtml page so that I can use some server side code to hide and show few elements. If I just do following
<template>
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
....
</nav>
</template>
And in corresponding nav-bar.ts
import {bindable} from 'aurelia-framework';
export class NavBar {
#bindable router;
constructor() {
console.info("Ctor");
}
bind() {
console.info("bind");
}
getViewStrategy() {
console.log('get view');
return 'nav-bar'
}
}
And use it like, in my app.cshtml. One thing to note if I change from="nav-bar" to nav-bar.cshtml and get rid of nav-bar.ts file aurelia expect nav-bar.js all the time as it only care for js and html file
<template>
<require from="nav-bar"></require>
<require from="bootstrap/css/bootstrap.css"></require>
<nav-bar router.bind="router"></nav-bar>
<div class="page-host">
<router-view></router-view>
</div>
</template>
In this case my Ctor and bind is logging but get view doesn't which mean i cannot use server side view or is there any way around it?

Answer 1

Use the #useView decorator.
navbar.js
import { useView } from 'aurelia-framework';
#useView('navbar.cshtml')
export class NavBarCustomElement {
// ...
}
app.html
<require from="nav-bar"></require>
<nav-bar></nav-bar>
<div class="page-host">
<router-view></router-view>
</div>
Working example here: https://gist.run/?id=8f3b972d4008f07c1a11142b4b5b6e0e