HTML 頁面的實時預覽

Question

我找到了一些相關的答案，但我不確定它們是否適合我。

本質上，我正在開發一個為用戶生成在線菜單的網頁。 這個想法是有一個頁面，用戶可以在其中 select 該頁面的選項（背景、字體等）並查看他們選擇的實時預覽。

輸入當然是帶有選擇和輸入以及顏色選擇器的形式。 問題是我不知道如何進行實時預覽。

我在 .net 核心 5 mvc 中執行此操作，因此可能必須有一個按鈕來更新頁面（我沒有為可編輯頁面編寫代碼），因此“實時”部分不如預覽部分。

重要的是，假設預覽只有 280 像素寬（星系折疊），我希望被預覽的頁面在屏幕上仍然看起來像 1920 像素寬。

Answer 1

您可以通過以下方式實現此目的

1. 從用戶選擇的樣式選項創建view model
2. 將視圖 model 傳遞給視圖
3. 然后你需要使用 razor 引擎從 razor 生成 html
4. 您可以使用Html.Raw()在您的視圖中顯示 html

或者

您也可以通過傳遞 url 和用戶選擇的選項打開 iframe 內部的視圖來執行此操作。