Asp.net MVC ReactJs.net : loading Index.cshtml as a Partial View

[vgcoder]

Asp.net MVC ReactJs.net : loading Index.cshtml as a Partial View:
HTML loads fine but when I look at chrome developer's tool React tab, nothing loads. looks like react has not initialized properly and that's why react component controls do not show onClick/onChange behavior.
We have MVC website and we want only Data-entry/form submission part to be handled using React.
When I load Index.cshtml as View everything works.
Steps I have already tried:

1. Using Server Side rendering (Adding jsx file to ReactConfig.cs)
2. Using Asp.net minification and bundling using babblebundle in BundleConfig.cs.
   I assumed may be issue is that it is not precompiled and serving it using Ajax's $(#div).html('<Index.cshtml>') not able to understand jsx.
   I am using server side rendering for initial load

@Scripts.Render("~/bundles/main")
@Html.React("MyForm", new
{
initialData = Model.Form,
validationUrl = Url.Action("GetValidation"),
submitUrl = Url.Action("SaveForm")
})
Layout.cshtml contains navigation panel/header/footer which are using mix of Jquery/Kendui controls

[Daniel15]

Did you add @Html.ReactInitJavaScript() to your layout? It renders the JavaScript to initialise the components.

[vgcoder]

Hi Daniel,
Thanks for replying.
I had that in my Index.cshtml not in layout. The exact same code works when I load as view (full page load) but when I changed it to return PartialView from Controller's action method and add the returning partial view to a div using Jquery -ajax, only html got rendered and but no react component tree.

I changed the code to have it in layout and it still did not work.
Here are the configurations I have: -
BundleConfig.cs:
bundles.Add(new BabelBundle("/bundles/main").Include(
// Add your JSX files here
"/Scripts/ParentForm.jsx",
"/Scripts/TmTextBox.jsx",
// You can include regular JavaScript files in the bundle too
"/Scripts/TmDropDown.jsx"
));
ReactConfig.cs:
ReactSiteConfiguration.Configuration
.AddScript("/Scripts/ParentForm.jsx")
.AddScript("/Scripts/TmTextBox.jsx")
.AddScript("~/Scripts/TmDropDown.jsx");

Index.cshtml:
@Html.React("ParentForm", new
{
initialData = Model.FormData,
})

Layout.cshtml
@Scripts.Render("~/bundles/main")
@Html.ReactInitJavaScript()

Also now I modified my code not to use Server rendering now and using the first method you shown in your documentation and it works now. But i would really like to have ServerSide rendering working to initialize it all.

[dustinsoftware]

Closing issues older than a year, please re-open if you think this is still relevant.