Monthly Archives: March 2014

Rendering a View to a String – Email Templates in MVC4

Hey everyone,

This is just a short post showing how to render views as strings. I’ve used this as a quick way to generate email templates. The logic to render a view as a string is as follows:

public static string RenderRazorViewToString(Controller controller, string viewName, string content)
        {
            controller.ViewBag.Content = content;
 
            using (var sw = new StringWriter())
            {
                var viewResult = ViewEngines.Engines.FindPartialView(controller.ControllerContext, viewName);
                var viewContext = new ViewContext(controller.ControllerContext, viewResult.View, controller.ViewData, controller.TempData, sw);
                viewResult.View.Render(viewContext, sw);
                viewResult.ViewEngine.ReleaseView(controller.ControllerContext, viewResult.View);
 
                return sw.GetStringBuilder().ToString();
            }
        }

The Email Template: Views/Emails/DefaultTemplate

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
@{
    Layout = null;
}
 
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
    <title>Easy Carts</title>
 
</head>
<body bgcolor='#f5f6f7' style='font-family: Arial, Helvetica, sans-serif;'>
 
 
    <!-- Wrapper -->
    <table width='100%' align='center' bgcolor='#f5f6f7' cellpadding='40' style='border-radius:3px;'>
        <tr>
            <td>
                <table width='500px;' align='center' bgcolor='#FFFFFF' cellpadding='15'>
                    <tr>
                        <td style='font-size:13px;' align='left'>                           
                            @ViewBag.Content                            
                        </td>
                    </tr>
                </table>
            </td>
        </tr>
        <tr align='center'>
            <td align='center'>
                <a href="http://easycarts.com.au">
                    <img src='http://easycarts.com.au/Images/email-logo.png' />
                </a>
            </td>
        </tr>
    </table>
</body>
</html>

In your controller:

public String TestEmail(String content)
        {
            Email email = new Email() {
                To = "lls@live.com.au",
                From = Email.Fields.From.NoReply,
                Body = content,
                Subject = "Test",
                TemplateName = @"~\Views\Emails\DefaultTemplate.cshtml",
                UseTemplate = true
            };
 
            email.SendEmail(this);
 
            db.Emails.Add(email);
            db.SaveChanges();
 
            return email.Body.ToString();
        }

If you looking to implement this with your emails, note that it builds on top of the email class we created back in this post: http://www.whatibroke.com/?p=963

If you’re just going to be using it directly within the controller, using the original code from over StackOverflow will probably be your best bet: http://stackoverflow.com/a/2759898/522859

Redirect to Root – C# MVC4

Hey everyone,

Just a quick one, how to redirect to root from a controller:

return Redirect(Url.Content("~/"));

For more info, checkout this Stackoverflow post: http://stackoverflow.com/a/10292039/522859

Rails Flash Messages in MVC4

Hey everyone,

Coming from Rails I’d grown quite fond of flash messages. Unfortunately there isn’t a built in way of doing this in MVC4. Luckily, there’s a five minute solution posted on StackOverflow: http://stackoverflow.com/a/11809178/522859

Once implemented, it works just like in Rails:

this.Flash("We need you to login before you can edit anything.", FlashEnum.Warning);

Definitely worth checking out if you’ve got time, even more so if you’ve come over from Rails!

Twitter Bootstrap – Carousel Only CSS

Hey everyone,

I ran into a bit of an issue today with my stylesheet conflicting with Bootstrap. After a bit of tinkering I realised that all I really needed from bootstrap were the Carousel styles. I’ve taken everything else out and included everything that’s left below:

.carousel {
  position: relative;
}
.carousel-inner {
  position: relative;
  overflow: hidden;
  width: 100%;
}
.carousel-inner > .item {
  display: none;
  position: relative;
  -webkit-transition: 0.6s ease-in-out left;
  transition: 0.6s ease-in-out left;
}
.carousel-inner > .item > img,
.carousel-inner > .item > a > img {
  line-height: 1;
}
.carousel-inner > .active,
.carousel-inner > .next,
.carousel-inner > .prev {
  display: block;
}
.carousel-inner > .active {
  left: 0;
}
.carousel-inner > .next,
.carousel-inner > .prev {
  position: absolute;
  top: 0;
  width: 100%;
}
.carousel-inner > .next {
  left: 100%;
}
.carousel-inner > .prev {
  left: -100%;
}
.carousel-inner > .next.left,
.carousel-inner > .prev.right {
  left: 0;
}
.carousel-inner > .active.left {
  left: -100%;
}
.carousel-inner > .active.right {
  left: 100%;
}
.carousel-control {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 15%;
  opacity: .5;
  filter: alpha(opacity=50);
  font-size: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-control.left {
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.5) 0), color-stop(rgba(0, 0, 0, 0.0001) 100%));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1);
}
.carousel-control.right {
  left: auto;
  right: 0;
  background-image: -webkit-linear-gradient(left, color-stop(rgba(0, 0, 0, 0.0001) 0), color-stop(rgba(0, 0, 0, 0.5) 100%));
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
}
.carousel-control:hover,
.carousel-control:focus {
  outline: none;
  color: #fff;
  text-decoration: none;
  opacity: .9;
  filter: alpha(opacity=90);
}
.carousel-control .icon-prev,
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-left,
.carousel-control .glyphicon-chevron-right {
  position: absolute;
  top: 50%;
  z-index: 5;
  display: inline-block;
}
.carousel-control .icon-prev,
.carousel-control .glyphicon-chevron-left {
  left: 50%;
}
.carousel-control .icon-next,
.carousel-control .glyphicon-chevron-right {
  right: 50%;
}
.carousel-control .icon-prev,
.carousel-control .icon-next {
  width: 20px;
  height: 20px;
  margin-top: -10px;
  margin-left: -10px;
  font-family: serif;
}
.carousel-control .icon-prev:before {
  content: '\2039';
}
.carousel-control .icon-next:before {
  content: '\203a';
}
.carousel-indicators {
  position: absolute;
  bottom: 10px;
  left: 50%;
  z-index: 15;
  width: 60%;
  margin-left: -30%;
  padding-left: 0;
  list-style: none;
  text-align: center;
}
.carousel-indicators li {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  text-indent: -999px;
  border: 1px solid #fff;
  border-radius: 10px;
  cursor: pointer;
  background-color: #000 \9;
  background-color: rgba(0, 0, 0, 0);
}
.carousel-indicators .active {
  margin: 0;
  width: 12px;
  height: 12px;
  background-color: #ffffff;
}
.carousel-caption {
  position: absolute;
  left: 15%;
  right: 15%;
  bottom: 20px;
  z-index: 10;
  padding-top: 20px;
  padding-bottom: 20px;
  color: #fff;
  text-align: center;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}
.carousel-caption .btn {
  text-shadow: none;
}
@media screen and (min-width: 768px) {
  .carousel-control .glyphicon-chevron-left,
  .carousel-control .glyphicon-chevron-right,
  .carousel-control .icon-prev,
  .carousel-control .icon-next {
    width: 30px;
    height: 30px;
    margin-top: -15px;
    margin-left: -15px;
    font-size: 30px;
  }
  .carousel-caption {
    left: 20%;
    right: 20%;
    padding-bottom: 30px;
  }
  .carousel-indicators {
    bottom: 20px;
  }
}

Minified:

.carousel{position:relative}.carousel-inner{position:relative;overflow:hidden;width:100%}.carousel-inner>.item{display:none;position:relative;-webkit-transition:.6s ease-in-out left;transition:.6s ease-in-out left}.carousel-inner>.item>a>img,.carousel-inner>.item>img{line-height:1}.carousel-inner>.active,.carousel-inner>.next,.carousel-inner>.prev{display:block}.carousel-inner>.active{left:0}.carousel-inner>.next,.carousel-inner>.prev{position:absolute;top:0;width:100%}.carousel-inner>.next{left:100%}.carousel-inner>.prev{left:-100%}.carousel-inner>.next.left,.carousel-inner>.prev.right{left:0}.carousel-inner>.active.left{left:-100%}.carousel-inner>.active.right{left:100%}.carousel-control{position:absolute;top:0;left:0;bottom:0;width:15%;opacity:.5;filter:alpha(opacity=50);font-size:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-control.left{background-image:-webkit-linear-gradient(left,color-stop(rgba(0,0,0,.5)0),color-stop(rgba(0,0,0,.0001)100%));background-image:linear-gradient(to right,rgba(0,0,0,.5)0,rgba(0,0,0,.0001)100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#80000000', endColorstr='#00000000', GradientType=1)}.carousel-control.right{left:auto;right:0;background-image:-webkit-linear-gradient(left,color-stop(rgba(0,0,0,.0001)0),color-stop(rgba(0,0,0,.5)100%));background-image:linear-gradient(to right,rgba(0,0,0,.0001)0,rgba(0,0,0,.5)100%);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1)}.carousel-control:focus,.carousel-control:hover{outline:0;color:#fff;text-decoration:none;opacity:.9;filter:alpha(opacity=90)}.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{position:absolute;top:50%;z-index:5;display:inline-block}.carousel-control .glyphicon-chevron-left,.carousel-control .icon-prev{left:50%}.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next{right:50%}.carousel-control .icon-next,.carousel-control .icon-prev{width:20px;height:20px;margin-top:-10px;margin-left:-10px;font-family:serif}.carousel-control .icon-prev:before{content:'\2039'}.carousel-control .icon-next:before{content:'\203a'}.carousel-indicators{position:absolute;bottom:10px;left:50%;z-index:15;width:60%;margin-left:-30%;padding-left:0;list-style:none;text-align:center}.carousel-indicators li{display:inline-block;width:10px;height:10px;margin:1px;text-indent:-999px;border:1px solid #fff;border-radius:10px;cursor:pointer;background-color:#000 \9;background-color:rgba(0,0,0,0)}.carousel-indicators .active{margin:0;width:12px;height:12px;background-color:#fff}.carousel-caption{position:absolute;left:15%;right:15%;bottom:20px;z-index:10;padding-top:20px;padding-bottom:20px;color:#fff;text-align:center;text-shadow:0 1px 2px rgba(0,0,0,.6)}.carousel-caption .btn{text-shadow:none}@media screen and (min-width:768px){.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right,.carousel-control .icon-next,.carousel-control .icon-prev{width:30px;height:30px;margin-top:-15px;margin-left:-15px;font-size:30px}.carousel-caption{left:20%;right:20%;padding-bottom:30px}.carousel-indicators{bottom:20px}}

Let me know if you have any other issues.

How to Get a JavaScript Stack Trace – Chrome Console

Hey everyone,

Just a quick post on something useful I came across today. In JavaScript you can access the stack trace via console using the following command (ctrl + shift + j):

console.trace()

In Chrome, this will let you navigate to each relevant call by clicking the line number in the console window. I’ve found it pretty useful for backtracking through jQuery exceptions.

For more info, check out this Stackoverflow post: http://stackoverflow.com/q/6715571/522859

Chrome Replacing Strings with Ellipses – Chrome Console

Hey everyone,

Ran into a bit of an issue today where a url was being shortened in Chrome’s console. It turns out that there’s a quick command you can use to copy the full value:

1
copy(myVariable)

Type copy into the console window and pass the variable you want to copy as a parameter. This will then be saved to your clipboard for pasting.

Check out this Stackoverflow post for more info: http://stackoverflow.com/a/19184513/522859

Sending Emails – MVC4 on GoDaddy

Hey everyone,

Just a really basic model that can be used to send emails on GoDaddy in MVC4.

The model:

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations.Schema;
using System.Linq;
using System.Web;
using System.Net.Mail;
using System.ComponentModel.DataAnnotations;
 
namespace LL.Models
{
    public class Email
    {
        [Key]
        public int EmailId { get; set; }
 
        public string From { get; set; }
        public string To { get; set; }
        public string Subject { get; set; }
        public string Body { get; set; }
        public DateTime Sent { get; set; }
        public string Status { get; set; }
        public string Log { get; set; }
 
 
        public void SendEmail()
        {
            MailMessage mail = new MailMessage();
            mail.To.Add(this.To);
            mail.From = new MailAddress(this.From);
            mail.Subject = this.Subject;
            mail.Body = Body;
            mail.IsBodyHtml = true;
            mail.Priority = MailPriority.Normal;
 
            SmtpClient smtp = new SmtpClient();
            smtp.Host = "relay-hosting.secureserver.net";
            smtp.UseDefaultCredentials = true;
            smtp.Port = 25;
            smtp.EnableSsl = false;  
 
            try
            {
                smtp.Send(mail);
                this.Status = Fields.Status.Success;
            }
            catch(Exception e)
            {
                this.Log = e.Message;
            }
 
            this.Sent = DateTime.Now;
        }
 
        [NotMapped]
        public class Fields
        {
            public class From
            {
                public const String NoReply = "noreply@yoursite.com.au";
                public const String Support = "support@yoursite.com.au";
            }
 
            public class Status
            {
                public const String Success = "Success";
                public const String Error = "Error";
            }
        }
 
    }
}

Using it in a controller:

using LearnerLessons.Models;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
 
namespace LL.Controllers
{
    public class TestController : Controller
    {
        private LLDBContext db = new LLDBContext();
 
        public String TestEmail(String content)
        {
            Email email = new Email() { To = "lls@live.com.au", From = Email.Fields.From.NoReply, Body = content, Subject = "Test" };
            email.SendEmail();
 
            db.Emails.Add(email);
            db.SaveChanges();
 
            return email.ToString();
        }
    }
}

Update:
For a quick tutorial on how to use Razor views as email templates, check out the following post: http://www.whatibroke.com/?p=983

Unable to add ‘Scripts/services/OrderService.js’ to the Web site. An unknown WinINet error has occurred (code 12113)

Hey everyone,

I ran into the following error while trying to publish via FTP to GoDaddy using Visual Studio 2013:

Unable to add ‘Scripts/services/OrderService.js’ to the Web site. An unknown WinINet error has occurred (code 12113)

While I wasn’t able to work out an exact cause it seems to have been triggered by my alternative Azure/TFS publishing profile. While attempting to publish to GoDaddy the Microsft login popped up. I closed it thinking that it shouldn’t be required. Logging back in seems to have resolved the issue.

PayPal IPN Response Not Returning a pay_key Value

Hey everyone,

In order to verify that a pay response is legitimate, PayPal provides a unique token for each request. This token can then be matched against payment confirmation requests to ensure that they aren’t being spoofed. The problem I ran into was that even the legitimate IPNs I received did not contain a pay key.

It turns out that PayPal sends two different types of IPNs. The first is configured when making the API request. The second is configured in the PayPal account under “My Account > Profile > Instant PayPal Notification”.

The first type, includes the required PayKey, the second does not. Simply configure your profile details to point to another url and everything should work!

For more info, check out this stackoverflow post: http://stackoverflow.com/a/12031887/522859