Rendering A Partial To A String In Razor Pages

Partial Views or Pages are primarily used as a means of including reusable snippets of HTML within one or more Razor Pages. This walkthrough illustrates how to take advantage of the power of the Razor templating system used by partial pages to generate HTML for other purposes, such as the body of a mail message.

The sample application to demonstrate this is built using Visual Studio Code, and assumes that you have the C# extension added, but the sample will work in Visual Studio too.

  1. Create a folder in a suitable location and name it RazorPartialToString.

  2. Open the folder within VS Code and bring up the terminal by pressing Ctrl+'.

  3. Create a new Razor Page application by typing dotnet new razor. Whenever you get a message "Required assets to build and debug are missing... Add them?", click Yes.

  4. Create folder named Services by typing mkdir Services.

  5. Add an interface to the Services folder named IRazorPartialToStringRenderer.cs. This is more easily accomplished if you have the C# Extensions extension installed in your VS Code. You can add the file by right-clicking on the folder:
    Render Partial To String

    The full code for the file follows:

  6. Add a C# class file to the Services folder named RazorPartialToStringRenderer.cs with the following code:

    This code is responsible for locating the specified partial, and then rendering its output to a StringWriter, and then returning the content of the writer as a string. Much of the code is similar to that found in the Partial Tag Helper source code.

  7. Add another interface to the Services folder, this time called IEmailService.cs with the following content:

  8. Now add the following implementation named DemoEmailService.cs:

    This is just standard boiler-plate email sending code that uses the SpecifiedPickupDirectory delivery method, ensuring that any generated emails are placed in the specified PickupDirectoryLocation rather than actually being sent via an SMTP server. It enables easy testing of email functionality without being reliant on an Internet connection, or having to wait for the generated email to be delivered. There is nothing special about the location c:\maildump. Feel free to alter the actual location that the email will be saved in to suit your environment.

  9. Register the services in the ConfigureServices method in the Startup class:

    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Latest);
    services.AddTransient<IEmailService, DemoEmailService>();
    services.AddTransient<IRazorPartialToStringRenderer, RazorPartialToStringRenderer>();
    
  10. Create a Contact page using the following command:

     dotnet new page -n Contact -o Pages -na RazorPartialToString.Pages
    

    Note: this is only necessary if you are using ASP.NET Core 2.2. Previous versions of the Razor Pages project template included a basic Contact page.

  11. Alter the content of the PageModel file (Contact.cshtml.cs) as below:

    A wrapper class for some form values is declared (ContactForm), and is added to the PageModel as a bound property. Its contents are passed to the string rendering service in the OnPostAsync method to generate the body of an email, which is sent via the email service.

  12. Alter the content page (Contact.cshtml) so that it contains the following code:

  13. Create a new file in the Pages/Shared folder named _ContactEmailPartial.cshtml with the following code:

    This file acts as template for the body of the email message. It takes the ContactForm class as a model. Importantly, the layout page is set to null to prevent the ViewStart file applying one. The styles for the HTML are specified inline because most desktop email clients don't support referencing external style sheets.

  14. Run the application by executing the dotnet run command from the terminal.

  15. Navigate to https://localhost:5001/contact and enter some values into the form

    Render Razor Partial To String

  16. Press submit, and then check the location of your specified pickup directory as suggested in the message rendered to the browser. You should have a .eml file there:

    Render Razor Partial To String

    When you open it in your default mail client, you should see a properly formatted email:

    Render Razor Partial To String

Summary

The Razor templating system is designed to be repurposed for other uses. This example demonstrate how it can be used to manage the generation of emails. Although this example is pretty simple, it should also serve to illustrate how much easier it is to manage email design using Razor rather than concatenating strings to render HTML.

You might also like...