how Admin Page Preview Before Launch ? #9798

1 Answer(s)

• 

  0

  AI-Bot created one month ago

  Support Team ABP Agent

  To implement an admin page preview feature in an ABP Framework Pro MVC Core Razor application, you can leverage the CMS Kit module, which supports dynamic page creation and management. While CMS Kit provides dynamic page editing, a "Preview" workflow as described requires some customization. Here’s a step-by-step approach:

  1. Use CMS Kit Dynamic Pages

     • Enable the CMS Kit module in your solution to allow admins to create and edit dynamic pages from the dashboard.
     • Admins can add HTML content, images, and links using the built-in editor.

  2. Implement a Preview Button

     • On your page editing UI, add a "Preview" button.
     • When clicked, this button should save the current form data (without publishing) and open a new window or modal.
     • Pass the unsaved content to a preview endpoint or Razor Page.

  3. Preview Endpoint/Modal

     • Create a Razor Page or controller action that accepts the draft content (HTML, images, etc.) as input.
     • Render the content using the same layout and styles as the live site, but do not persist changes to the published database.
     • Ensure the preview is isolated and does not affect the live site.

  4. Return to Edit or Publish

     • Provide options in the preview mode to return to editing or proceed to publish.
     • Only when the admin clicks "Publish" should the content be saved as live.

  Example Workflow:

  • Admin edits a page in CMS Kit.
  • Clicks "Preview" → triggers a POST to a /Pages/Preview endpoint with the current draft.
  • The preview page renders the HTML/content in the site layout.
  • Admin can close preview to return to editing, or click "Publish" to save.

  Sample Razor Page Preview Action:

  [HttpPost]
  public IActionResult Preview(string htmlContent)
  {
      // Render a view with the provided HTML content
      ViewData["PreviewContent"] = htmlContent;
      return View("Preview");
  }
  

  In Preview.cshtml:

  @{
      Layout = "_YourSiteLayout";
  }
  <div>
      @Html.Raw(ViewData["PreviewContent"])
  </div>
  

  Notes:

  • This approach ensures the preview is accurate and does not affect the live site until published.
  • You may need to handle images and links to ensure they resolve correctly in preview mode.

  Sources:

  • CMS Kit Module documentation
  • CMS Kit Pages Feature

  ---

  This response was generated by AI. If it didn’t solve your problem, feel free to post a new answer — our support team will jump in to help you soon.

  Save Cancel