HTML 页面的实时预览

Question

I have found some related answers, but I'm not sure they will work for me.

Essentially I am working on a webpage which generates an online menu for the user. The idea is to have a page where the user can select the options for this page (background, font, etc.) and see a live preview of their choices.

The inputs will of course be in a form with selects and inputs and color pickers. The problem is I don't know how to do the live preview.

I am doing this in .net core 5 mvc so it may be that there will have to be a button to update the page (I am not writing the code for the editable page) so the "live" part isn't as important as the preview part.

Importantly, say the preview is only 280px wide (galaxy fold) I want the page being previewed to still look it would on a screen say 1920px wide.

Answer 1

You can achieve this in the following way

1. Create a view model from user selected style options
2. Pass the view model to the view
3. Then you need to generate html from razor using razor engine
4. That html you can show with Html.Raw() in a div (with small height & width) in your view

or

you can also do this by opening the view inside an iframe by passing the url and user selected options.