We help IT Professionals succeed at work.

How to use a MVC view to host a rendered React component in an iframe.

336 Views
Last Modified: 2017-05-05
I had this question after viewing How to use an iframe in mvc.

I'm building a web app for personal financial planning. I've started with a React framework to build the user's interaction, and that is going well. But now I want to use the new ASP.NET Core mvc framework for the main user interface, and use the react code in one of the mvc's views. But I am new to the plumbing used in ASP.NET Core mvc. I have a DOTNET CLI generated framework up and running in Visual Studio Code, with my react project embedded in an Areas folder. It all works in that I can run the mvc on local host by using the VSCode debugger facility, and I can run my react by using npm start to run the Webpack server for my react code under the Areas folder. I build my output in the Areas/frcstr/build folder and I want to provide that index.html to the mvc view to load the rendered React app.

My question is how do I create the empty view to hold the iframe tag? I tried to just use one of the boiler plate views in the generated mvc framwork, but that is compomised some how by Razor with common layouts and such. I just need a plain view to hold this:

<iframe src="../../Areas/frcstr/build/index.html" height="100%" width="100%" style="border:none;"></iframe>

At this point I don't know how to define Controlers, views, etc.
Comment
Watch Question

David Johnson, CDSimple Geek from the '70s
CERTIFIED EXPERT
Distinguished Expert 2019

Commented:
Iframes are not the best but here is an example that works
http://www.codinginstinct.com/2008/08/aspnet-mvc-iframe-url-routing.html

Author

Commented:
@David, I had actually seen that page (written in 2012, so not considering the new .NET Core 1.1). It may work, but I don't understand the code logic that creates the controller and the view. Can you reference some documentation that explains that technique?
Commented:
Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
By explaining the problem, I was able to find another solution that worked.

Gain unlimited access to on-demand training courses with an Experts Exchange subscription.

Get Access
Why Experts Exchange?

Experts Exchange always has the answer, or at the least points me in the correct direction! It is like having another employee that is extremely experienced.

Jim Murphy
Programmer at Smart IT Solutions

When asked, what has been your best career decision?

Deciding to stick with EE.

Mohamed Asif
Technical Department Head

Being involved with EE helped me to grow personally and professionally.

Carl Webster
CTP, Sr Infrastructure Consultant
Empower Your Career
Did You Know?

We've partnered with two important charities to provide clean water and computer science education to those who need it most. READ MORE

Ask ANY Question

Connect with Certified Experts to gain insight and support on specific technology challenges including:

  • Troubleshooting
  • Research
  • Professional Opinions
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.