Avatar of Bruce_M
Bruce_MFlag for United States of America

asked on 

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

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.
ASP.NET.NET MVCUI/UXMicrosoft Visual Studio

Avatar of undefined
Last Comment
Bruce_M
Avatar of David Johnson, CD
David Johnson, CD
Flag of Canada image

Iframes are not the best but here is an example that works
http://www.codinginstinct.com/2008/08/aspnet-mvc-iframe-url-routing.html
Avatar of Bruce_M
Bruce_M
Flag of United States of America image

ASKER

@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?
ASKER CERTIFIED SOLUTION
Avatar of Bruce_M
Bruce_M
Flag of United States of America image

Blurred text
THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
See Pricing Options
Start Free Trial
Avatar of Bruce_M
Bruce_M
Flag of United States of America image

ASKER

By explaining the problem, I was able to find another solution that worked.
ASP.NET
ASP.NET

The successor to Active Server Pages, ASP.NET websites utilize the .NET framework to produce dynamic, data and content-driven web applications and services. ASP.NET code can be written using any .NET supported language. As of 2009, ASP.NET can also apply the Model-View-Controller (MVC) pattern to web applications

128K
Questions
--
Followers
--
Top Experts
Get a personalized solution from industry experts
Ask the experts
Read over 600 more reviews

TRUSTED BY

IBM logoIntel logoMicrosoft logoUbisoft logoSAP logo
Qualcomm logoCitrix Systems logoWorkday logoErnst & Young logo
High performer badgeUsers love us badge
LinkedIn logoFacebook logoX logoInstagram logoTikTok logoYouTube logo