Embed another html page in an existing ASP.NET MVC page

Question

I've got over a decade of C# desktop application development under my belt but I'm new to ASP.NET MVC and my terminology may not be correct so i'll apologize ahead of time.

I've been working on an ASP.NET MVC 4 site that has jQuery 1.4 and bootstrap 3 as well as a lot of CSS customization. I've been trying to implement a feature and I've been able to do it separately with bootstrap 4 but when I copy the code over and render it in a Partial view, it turns out bad .

I've spent a lot of time trying to figure out why it's displaying so poorly and I've realized that between the bootstrap 3 and 4 incompatibilities and all of the CSS customization the site has, it's almost infeasible to use this approach.

Then I thought that I could just make all of my style changes inline but that doesn't make things very maintainable and is apparently frowned upon.

With that being said, I've seen a number of posts about the usage of IFrame and it looks appealing but I have concerns.

1. Will I be able to pass objects from the main cshtml page into the IFrame?
2. Will I be able to use different jQuery/bootstrap/CSS in the IFrame?
3. Are there any other options out there?

Answer 1

1. No. As it is a security concern, it is not possible.
2. Yes. The Iframe is rendered independently.
3. I think of two suggestions, no solution is easy and needs a lot of recoding:

• downgrade your partial view to bootstrap 3 : An obvious option that you are not looking for.
• recompile bs4 with custom class names : Your problem is with the class names that have the same name but act different in bs3 and bs4. So, you can rename those class names in the source code of bs4 then compile and use them. for example: rename row class to bs4-row . As you won't need all the bs4 library to style your code, you only need to rename and compile the files you need, like: _grid.scss.