Open Closed

Preview ABP Text Template with Razor #9477


User avatar
0
nguyenngoc.son created

Hi We want to build the preview function for the ABP Text Template edit screen. so when user edit the text template they can click to preview to see what will be display on the screen instead of the html code. There is any existing function that support us or we need to do it from scratch? If we need to do by ourself then how we can do it


3 Answer(s)
  • User Avatar
    0
    AI-Bot created
    Support Team ABP Agent

    To implement a preview function for ABP Text Templates (Razor engine), you need to render the template with a sample model and display the resulting HTML. ABP does not provide a built-in UI preview function out of the box, but you can leverage the existing text templating infrastructure to achieve this.

    Here’s how you can implement it:

    1. Use the ITemplateRenderer service to render the template with a sample model.
    2. On your edit screen, when the user clicks "Preview", send the current template content and a sample model to your backend.
    3. In your backend, use the Razor engine to render the template:
      var rendered = await _templateRenderer.RenderAsync(
          templateContent, // the edited template string
          modelObject,     // your sample model
          "Razor"          // specify Razor engine
      );
      
    4. Return the rendered HTML to the frontend and display it in a modal or preview pane.

    You will need to implement the API endpoint and the Angular UI logic yourself. The ABP text templating system supports rendering arbitrary template content with a model, so you do not need to build the rendering logic from scratch.

    For more details, see:

    This approach aligns with ABP conventions and uses the official APIs for template rendering.


    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.

  • User Avatar
    0
    nguyenngoc.son created

    If we have multi templates and each template have different model, how we can do it dynamic instead of hardcode the model for each template

  • User Avatar
    0
    EngincanV created
    Support Team .NET Developer

    [nguyenngoc.son] said: If we have multi templates and each template have different model, how we can do it dynamic instead of hardcode the model for each template

    Hi, the model does not have to be a named class, it can be an anonymous class with the related properties. So, maybe you can have a key-value pairs (or dictionary to be more specific), convert it to an ExpandoObject and pass it as a model like below:

    // Get these values from an input as key-value
    var dictionary = new Dictionary<string, string>
    {
        { "Name", "John" },
        { "Age", "30" },
        { "City", "New York" }
    };
    
    // Convert to ExpandoObject (which behaves like an anonymous type)
    dynamic expando = new ExpandoObject(); 
    var expandoDict = (IDictionary<string, object>)expando;
    
    foreach (var kvp in dictionary)
    {
        expandoDict[kvp.Key] = kvp.Value;
    }
    
    // Use TemplateRenderer
    var rendered = await _templateRenderer.RenderAsync(
        templateContent,
        expando,
        "Razor"
    );
    
Boost Your Development
ABP Live Training
Packages
See Trainings
Mastering ABP Framework Book
The Official Guide
Mastering
ABP Framework
Learn More
Mastering ABP Framework Book
Made with ❤️ on ABP v10.0.0-preview. Updated on July 09, 2025, 06:20