使用HTML和模型从MVC定制电子邮件页面

Question

I'm using "System.Net.Mail" to send e-mail in my code. It allows the e-mail body to be sent as HTML. I need to customize and decorate my e-mail using data from my model and also bootstrap.

So, here I am, trying to create HTML pages and trying to integrate it with data from Model and then passing the HTML page as string to the "body" of the email object.

Does this make sense or is there any other way this can be done?

PS: I'm trying to construct an HTML table, that gets rows dynamically based on data from the model.

Answer 1

I have always used this tool http://aboutcode.net/postal . Try it out, it will save you lots of coding.

Answer 2

Here's an example. I've even included some CSS to show how you can style your email. "projects" is my model that I'm looping over to create the grid.

CSS support is limited in most email clients, so you may not be able to get Bootstrap to work, but you could try. If not, you can still accomplish Bootstrap-like responsive design. The example below stays centered and 100% width as the page is resized.

var projects = db.Projects.Select(p => new { p.Name, p.Description } );

var grid = new StringBuilder();

foreach (var project in projects)
{
    grid.Append($@"<tr'>
            <td>{project.Name}</td>
            <td>{project.Description}</td>
        </tr>");
}

var body = $@"
    <style>
        body {{ color: #444 }}
        h2 {{ margin-top: 0; margin-bottom: 0 }}
        .container {{ text-align: center }}
        table {{ margin-left: auto; margin-right: auto; font-size: 20; width: 100% }}
        .heading {{ font-weight: bold; background-color: #f1f4ff }}
        td {{ padding-top: 8px; padding-bottom: 8px; padding-left: 16px; padding-right: 16px }}
    </style>

    <div class='container'>
        <h2>Hello from Mail</h2>

        <table class='grid' cellpadding='0' cellspacing='0'>
            <tr class='heading'>
                <td>Project Name</td>
                <td>Project Description</td>
            </tr>
            {grid}
        </table>
    </div>
";

client.Send(mail);