Send HTML view as an Email Attachment in Asp.Net MVC Razor

Question

I'm currently working in Razor ASP.Net MVC. Here I have a HTML view, named as Customer Payment, which is generated on the basis of some calculations, in RAZOR, and shown in a HTML dialog.

I want to send this Html View as an Email attachment. But here I'm getting confused rather I have to transfer this HTML View into some .PDF or .jpg in jQuery and then send it to Controller side, or is there some more efficient way exists to do this.

Still I have coded to send simple email, without any attachment, in C#,but got stuck at this point.

Best suggestions will be highly appreciated. :-)

Possible duplicate of [How to render an ASP.NET MVC View in PDF format](https://stackoverflow.com/questions/1324597/how-to-render-an-asp-net-mvc-view-in-pdf-format) — Peter B, Jun 22 '17 at 09:21

Supraj V · Answer 1 · 2017-06-22T09:34:56.480

As normal mails, you have to send the body of the mail content like below

Your c# code.

string _FilePath = HttpContext.Server.MapPath("Activation.txt");
StreamReader sr = new StreamReader(_FilePath);
string body = sr.ReadToEnd();
sr.Close();
sr.Dispose();

send the above body in the body of an email

your Activation.txt file code will be a template like below just body tag

<body style="margin: 1% 10%;">
    <table style="position:relative;background-color: whitesmoke;padding-bottom: 20px;text-align: center;width: 100%;">

        <tbody class="">
            <tr class="">
                <td style="position:relative;top:20px;padding-left: 25px;padding-right: 25px;margin-right: auto;margin-left: auto;" width="400" align="center" bgcolor="whiteSmoke">



                    <img src="[HLINK]" height="70" width="150" alt="image cannot displayed ">

                </td>
            </tr>


            <tr>
                <td width="400" align="center" bgcolor="whiteSmoke"></td>
            </tr>

            <tr>
                <td align="center" style="position: relative; top: 11px; padding-left: 25px; padding-right: 25px; margin-right: auto; margin-left: auto;" width="470" bgcolor="whitesmoke">
                    <h2 style="
    color:#f44336;
    font-family: WeblySleek UI,Segoe UI,Helvetica Neue,Arial,sans-serif">
                        Hey thanks for joining<h2 /> <h4 style="font-family: WeblySleek UI,Segoe UI,Helvetica Neue,Arial,sans-serif;">Welcome to Portal! Before you get started, please verify your email address below </h4>
                </td>
            </tr>

            <tr bgcolor="whitesmoke" style="position:relative;top:9px;">
                <td align="center" style="position:relative;top:-4px;padding-left: 25px;padding-right: 25px;margin-right: auto;margin-left: auto;">

                    <a style="position:relative;display: block;width:150px;height: 20px;text-align:center; text-decoration:none;background:#f44336;padding:10px;border-radius: 5px;color: white;font-family: WeblySleek UI,Segoe UI,Helvetica Neue,Arial,sans-serif;" href="[HLink]">Verify Email Address</a>
                </td>
            </tr>


            <tr>
                <td style="position:relative;top:3px;padding-left: 25px;padding-right: 25px;margin-right: auto;margin-left: auto;" bgcolor="whitesmoke" align="center" width="400">
                    <span style="padding-left:0.3cm;font-family: WeblySleek UI,Segoe UI,Helvetica Neue,Arial,sans-serif;">Thank you for visiting Us. It is the ultimate gift of choice.You can send to a friend or loved one with a selection of brands to pick from in various categories such as fashion, beauty, sports, food, entertainment etc. <span>
                </td>
            </tr>


            <tr>


                <td style="position:relative;padding-left: 25px;padding-right: 25px;margin-right: auto;margin-left: auto;" bgcolor="whitesmoke">
                    <h2 style="color:#f44336;font-family: WeblySleek UI,Segoe UI,Helvetica Neue,Arial,sans-serif;" align="center">Our Most Celebrated Brands</h2>



            </tr>
            <tr>
                <td style="position:relative;top:-2px;padding-left: 25px;padding-right: 25px;margin-right: auto;margin-left: auto;" align="center" bgcolor="whitesmoke" width="400" style="padding:10px;">

                    <b style="font-family: WeblySleek UI,Segoe UI,Helvetica Neue,Arial,sans-serif;">Contact Us:</b>&nbsp;&nbsp;&nbsp;<img src="http://img/phone.png">&nbsp;&nbsp;<span>987654321</span>&nbsp;&nbsp;<img src="http://img/email.jpg">&nbsp;&nbsp;<span styl="font-family: WeblySleek UI,Segoe UI,Helvetica Neue,Arial,sans-serif;">help@help.com</span>
                </td>
            </tr>
            <tr>
                <td style="background-color:whitesmoke;position:relative;text-align: center;">
    <span>
        <a style="position:relative;padding:10px 30px;text-align:center; text-decoration:none;background:#4e69a2;border-radius: 5px;color: white;font-family: WeblySleek UI,Segoe UI,Helvetica Neue,Arial,sans-serif;" href="#">Facebook</a>

        &nbsp;&nbsp;
        <a style="position:relative;padding:10px 30px;text-align:center;text-decoration:none;background:#c32f10;border-radius: 5px;color: white;font-family: WeblySleek UI,Segoe UI,Helvetica Neue,Arial,sans-serif;" href="#">Google</a>
    </span>
</td>
            </tr>
        </tbody>
    </table>  
</body>

You can also dynamically add/replace the data to be sent in email Add below code in backend

  body = body.Replace("[HLink]", YOUR-DATA);

But why we're doing this! Instead we convert our view into some `.pdf` in `jQuery` and pass it to Controller in order to send it as an attachment in email. Ain't it simple approach! — Arsman Ahmad, Jun 22 '17 at 07:37
css styles will not apply in the email body if we sent, everything should be in inline styles. and more over email body should be in body tag as your view may have only div tag, more over all email templates should be kept in separate section — Supraj V, Jun 22 '17 at 09:29
check my edited answer if you want to add anything dynamically — Supraj V, Jun 22 '17 at 09:35
Thank you @Supraj. I adopted some other efficient way to to solve this problem. I'll upload it in my answer soon. Thanks a lot. — Arsman Ahmad, Jun 23 '17 at 08:01

Mohan Singh · Answer 2 · 2017-06-22T09:35:48.217

first Convert your view to Pdf using Rotativa and Then email it as an attachment.

this is your method to Convert the view to PDF

  public void SenRequestByEmail()
    {
    string ReqId="CT001";
        try
        {
            using (var stream = new MemoryStream())
            {
                //methodto bind details to your model
                var res = dealerService.BindReqToPrint(ReqId);
               //_PrintActivationRequest is your View name here and res is the object of the model you are using at your view
                ViewAsPdf pdf = new ViewAsPdf("_PrintActivationRequest", res) { FileName = "DeviceActivationRequest.pdf" };
                //convert the pdf into array of bytes 
                byte[] bytes = pdf.BuildPdf(this.ControllerContext);
                string fileName = string.Format("DeviceActivationRequest_{0}.pdf", DateTime.Now.ToString("dd_MMM_yy_hh:mm"));
                SendDeviceActivationRequest(new MemoryStream(bytes), fileName );
            }
        }
        catch (Exception ex)
        {
        }

    }

Method to send Email.

 public void SendDeviceActivationRequest(Stream ms, string fileName )
   {
             //Here write your code to send Email and attach the pdf file as shown in below code.
             MailMessage mail = new MailMessage();
             System.Net.Mail.Attachment attachment;
            attachment = new System.Net.Mail.Attachment(ms,fileName , "application/pdf");
            mail.Attachments.Add(attachment);
}

To convert your View to Pdf Follow this Link

Hope it helps!

Send HTML view as an Email Attachment in Asp.Net MVC Razor

2 Answers2