1+ /*
2+ * Copyright (c) 2015, Facebook, Inc.
3+ * All rights reserved.
4+ *
5+ * This source code is licensed under the BSD-style license found in the
6+ * LICENSE file in the root directory of this source tree. An additional grant
7+ * of patent rights can be found in the PATENTS file in the same directory.
8+ */
9+
10+ using Microsoft . AspNet . Mvc . Rendering ;
11+
12+ namespace React . AspNet5
13+ {
14+ /// <summary>
15+ /// HTML Helpers for utilising React from an ASP.NET MVC 6 (vNext) application.
16+ /// </summary>
17+ public static class HtmlHelperExtensions
18+ {
19+ // TODO: Figure out if this can be injected
20+ /// <summary>
21+ /// Gets the React environment
22+ /// </summary>
23+ private static IReactEnvironment Environment =>
24+ global ::React . AssemblyRegistration . Container . Resolve < IReactEnvironment > ( ) ;
25+
26+ /// <summary>
27+ /// Renders the specified React component
28+ /// </summary>
29+ /// <typeparam name="T">Type of the props</typeparam>
30+ /// <param name="htmlHelper">HTML helper</param>
31+ /// <param name="componentName">Name of the component</param>
32+ /// <param name="props">Props to initialise the component with</param>
33+ /// <param name="htmlTag">HTML tag to wrap the component in. Defaults to <div></param>
34+ /// <param name="containerId">ID to use for the container HTML tag. Defaults to an auto-generated ID</param>
35+ /// <returns>The component's HTML</returns>
36+ public static HtmlString React < T > (
37+ this IHtmlHelper htmlHelper ,
38+ string componentName ,
39+ T props ,
40+ string htmlTag = null ,
41+ string containerId = null
42+ )
43+ {
44+ var reactComponent = Environment . CreateComponent ( componentName , props , containerId ) ;
45+ if ( ! string . IsNullOrEmpty ( htmlTag ) )
46+ {
47+ reactComponent . ContainerTag = htmlTag ;
48+ }
49+ var result = reactComponent . RenderHtml ( ) ;
50+ return new HtmlString ( result ) ;
51+ }
52+
53+ /// <summary>
54+ /// Renders the specified React component, along with its client-side initialisation code.
55+ /// Normally you would use the <see cref="React{T}"/> method, but <see cref="ReactWithInit{T}"/>
56+ /// is useful when rendering self-contained partial views.
57+ /// </summary>
58+ /// <typeparam name="T">Type of the props</typeparam>
59+ /// <param name="htmlHelper">HTML helper</param>
60+ /// <param name="componentName">Name of the component</param>
61+ /// <param name="props">Props to initialise the component with</param>
62+ /// <param name="htmlTag">HTML tag to wrap the component in. Defaults to <div></param>
63+ /// <param name="containerId">ID to use for the container HTML tag. Defaults to an auto-generated ID</param>
64+ /// <returns>The component's HTML</returns>
65+ public static HtmlString ReactWithInit < T > (
66+ this IHtmlHelper htmlHelper ,
67+ string componentName ,
68+ T props ,
69+ string htmlTag = null ,
70+ string containerId = null
71+ )
72+ {
73+ var reactComponent = Environment . CreateComponent ( componentName , props , containerId ) ;
74+ if ( ! string . IsNullOrEmpty ( htmlTag ) )
75+ {
76+ reactComponent . ContainerTag = htmlTag ;
77+ }
78+ var html = reactComponent . RenderHtml ( ) ;
79+ var script = new TagBuilder ( "script" )
80+ {
81+ InnerHtml = reactComponent . RenderJavaScript ( )
82+ } ;
83+ return new HtmlString ( html + System . Environment . NewLine + script . ToString ( ) ) ;
84+ }
85+
86+ /// <summary>
87+ /// Renders the JavaScript required to initialise all components client-side. This will
88+ /// attach event handlers to the server-rendered HTML.
89+ /// </summary>
90+ /// <returns>JavaScript for all components</returns>
91+ public static HtmlString ReactInitJavaScript ( this IHtmlHelper htmlHelper )
92+ {
93+ var script = Environment . GetInitJavaScript ( ) ;
94+ var tag = new TagBuilder ( "script" )
95+ {
96+ InnerHtml = script
97+ } ;
98+ return new HtmlString ( tag . ToString ( ) ) ;
99+ }
100+ }
101+ }
0 commit comments