I am working on a application that is built using the razor pages, react and angular, the basic design layout of the application is same, I have a problem where I need to use a dropdown component that was originally written for the MVC part of the application (in a .cshtml file) within my React application.
- What have I tried so far?
Using this article, I am returning the _dropdown.cshtml partial view as a string and then appending it in my react web application as:
<div dangerouslySetInnerHTML={{ __html: this.state.partialView }}></div>
</div>
However, the problem is that this dropdown does not collapse or expand. (this dropdown is based on the Bootstrap collapse). I suspect that Bootstrap framework binds its events to the DOM, whereas in the React application, events are bound to the Virtual DOM, which is managed by the ReactDOM.
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
Link with href
</a>
Moreover this _dropdown.cshtml file is also using some code written in many separate JavaScript files, How can I make this appended code in my react application to use those external scripts too?
tl;dr I want to render C# partial views in my react web application and want to them to work same as they would work in an MVC application.
