This repository was archived by the owner on Apr 8, 2020. It is now read-only.
This repository was archived by the owner on Apr 8, 2020. It is now read-only.
[Feature Request] - Add an SPA View Engine that gives the ability to render the entire page instead of using Razor #182
Closed
Description
For example in React with Webpack, an entire page can be rendered with the Html React component looking something like this:
Html.js
import React, { PropTypes } from 'react';
import ReactDOM from 'react-dom/server';
import Helmet from 'react-helmet';
import serialize from 'serialize-javascript';
const head = Helmet.rewind();
const Html = ({ component, store }) => {
const _content = component ? ReactDOM.renderToString(component) : '';
return (
<html lang="en-us">
<head>
{head.base.toComponent()}
{head.title.toComponent()}
{head.meta.toComponent()}
{head.link.toComponent()}
{head.script.toComponent()}
<link rel="shortcut icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<div id="content" dangerouslySetInnerHTML={{ __html: _content }} />
<script dangerouslySetInnerHTML={{ __html: `window.__data=${serialize(store.getState())};` }} />
<script src="/dist/client.generated.js" />
</body>
</html>
);
};
Html.propTypes = {
component: PropTypes.node,
store: PropTypes.object
};
export default Html;
Currently, it looks like the Razor view engine requires a layout and partial page.
It's possible to get around this somewhat by setting IgnoreBody() at the top of the _Layout and a placeholder view, but then you have to workaround the view by returning View("index", model) every time.
_Layout.cshtml
@{
IgnoreBody();
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Hello World</title>
</head>
<body>
<div
id="content"
asp-prerender-module="Public/Server"
asp-prerender-webpack-config="webpack.config.js"
asp-prerender-data="@Model">
</div>
</body>
</html>
Index.cshtml
@*
// View Placeholder
*@
Controller
public IActionResult MyView()
{
return View("Index", new MyViewModel());
}
The routing is handled by React Router.
This way works, but it seems like a lot of extra effort if a view engine could be created that could server the entire page, skipping Razor entirely.
Metadata
Metadata
Assignees
Labels
No labels