mvc render view to string span

Question

I previously grabbed some code from "Rendering a view to a string in MVC, then redirecting -- workarounds?", now below is the code that I'm using to display the html of a page as content inside a email body and also use "javascript:document.print;".

The problem is that I have some Span's that based on their class transform into numeric images. So <div class="price black"><span class="dollar">$</span><span class="one"></span><span class="five"></span></div>.

The span class one is displayed as an image of the numeric 1, and so one.

The problem is that they do not work either on the javascript printing of the page or the body of the email.

Can you tell me why?

Below is the code for mvs and css.

public virtual string RenderViewToString(ControllerContext controllerContext, string viewPath, string masterPath, ViewDataDictionary viewData, TempDataDictionary tempData, object Model)
        {
            if (tempData == null)
            {
                tempData = new TempDataDictionary();
            }
            Stream filter = null;
            ViewPage viewPage = new ViewPage();
            //Right, create our view    
            viewPage.ViewContext = new ViewContext(controllerContext, new WebFormView(viewPath, masterPath), viewData, tempData);
            //Get the response context, flush it and get the response filter.    
            var response = viewPage.ViewContext.HttpContext.Response;
            response.Flush();
            var oldFilter = response.Filter;
            try
            {
                //Put a new filter into the response    
                filter = new MemoryStream();
                response.Filter = filter;
                //Now render the view into the memorystream and flush the response    
                viewPage.ViewContext.ViewData.Model = Model;
                viewPage.ViewContext.View.Render(viewPage.ViewContext, viewPage.ViewContext.HttpContext.Response.Output);
                response.Flush();
                //Now read the rendered view.    
                filter.Position = 0;
                var reader = new StreamReader(filter, response.ContentEncoding);
                return reader.ReadToEnd();
            }
            finally
            {    //Clean up.    
                if (filter != null)
                {
                    filter.Dispose();
                }
                //Now replace the response filter    
                response.Filter = oldFilter;
            }
        }

Css:

.price-a {}
 .price-a span {}
.price-b {padding: 0 0 0 20px; background: url(../images/icon-price-b.gif) 0 0 no-repeat; color: #00a3a1;}/*cleared*/
 .price-b span {display: block; height: 42px; padding-right: 2px; float: left; background: url(../images/numbering-b.gif) 0 0 no-repeat; text-indent: -9999em;}
 .price-b span.one {width: 19px; background-position: 0 0;}
 .price-b span.two {width: 31px; background-position: 0 -42px;} 
 .price-b span.three {width: 32px; background-position: 0 -84px;} 
 .price-b span.four {width: 36px; background-position: 0 -126px;} 
 .price-b span.five {width: 32px; background-position: 0 -168px;} 
 .price-b span.six {width: 35px; background-position: 0 -210px;} 
 .price-b span.seven {width: 32px; background-position: 0 -252px;} 
 .price-b span.eight {width: 34px; background-position: 0 -294px;} 
 .price-b span.nine {width: 34px; background-position: 0 -336px;}
 .price-b span.zero {width: 36px; background-position: 0 -378px;}
.price-c {padding: 0 0 0 20px; background: url(../images/icon-price-c.gif) 0 0 no-repeat; color: #ad0974;}/*cleared*/
 .price-c span {display: block; float: left; padding-right: 2px; background: url(../images/numbering-c.gif) 0 0 no-repeat; text-indent: -9999em; height: 42px; width: 35px;}
 .price-c span.one {width: 19px; background-position: 0 0;}
 .price-c span.two {width: 31px; background-position: 0 -42px;} 
 .price-c span.three {width: 32px; background-position: 0 -84px;} 
 .price-c span.four {width: 36px; background-position: 0 -126px;} 
 .price-c span.five {width: 32px; background-position: 0 -168px;} 
 .price-c span.six {width: 35px; background-position: 0 -210px;} 
 .price-c span.seven {width: 32px; background-position: 0 -252px;} 
 .price-c span.eight {width: 34px; background-position: 0 -294px;} 
 .price-c span.nine {width: 34px; background-position: 0 -336px;}
 .price-c span.zero {width: 36px; background-position: 0 -378px;}
 .price-c strong {padding: 24px 0 0 4px; display: block; float: left;}
.price-d {padding: 0 0 0 20px; background: url(../images/icon-price-d.gif) 0 0 no-repeat; color: #48104a;}/*cleared*/
 .price-d span {display: block; float: left; padding-right: 2px; background: url(../images/numbering-d.gif) 0 0 no-repeat; text-indent: -9999em; height: 42px; width: 35px;}
 .price-d span.one {width: 19px; background-position: 0 0;}
 .price-d span.two {width: 31px; background-position: 0 -42px;} 
 .price-d span.three {width: 32px; background-position: 0 -84px;} 
 .price-d span.four {width: 36px; background-position: 0 -126px;} 
 .price-d span.five {width: 32px; background-position: 0 -168px;} 
 .price-d span.six {width: 35px; background-position: 0 -210px;} 
 .price-d span.seven {width: 32px; background-position: 0 -252px;} 
 .price-d span.eight {width: 34px; background-position: 0 -294px;} 
 .price-d span.nine {width: 34px; background-position: 0 -336px;}
 .price-d span.zero {width: 36px; background-position: 0 -378px;}





.price.black span{background: url(../images/numbering_blackonwhite.png) 0 0 no-repeat;}
.price.black .dollar{background: url("../images/icon_dollar_black.gif") 0 0 no-repeat;}

/*.price.black span.small{background: url(../images/numbering_blackonwhite_small.png) 0 0 no-repeat;}*/

.price.white span{background: url(../images/numbering_whiteonblack.png) 0 0 no-repeat;}
.price.white .dollar{background: url("../images/icon_dollar_greyondark.gif") 0 0 no-repeat;}

.price.blackOnGrey span{background: url(../images/numbering_blackongrey.png) 0 0 no-repeat; }
.price.blackOnGrey .dollar{background: url("../images/icon_dollar_black.gif") 0 0 no-repeat;}

/* global price style colour specific styles must be placed abover this for them to work */
.price {display:inline;clear:both;border:0px!important;}
    .price .dollar{font-size:0px;width:11px;height:11px;}
    .price.noDollar .dollar{display:none;position:absolute;}
    .price span {display: block; float: left; padding-right: 2px; text-indent: -9999em; height: 19px; width: 15px;}
 .price span.one {width: 9px; background-position: 0 0;}
 .price span.two {width: 13px; background-position: 0 -19px;} 
 .price span.three {width: 14px; background-position: 0 -38px;} 
 .price span.four {width: 15px; background-position: 0 -57px;} 
 .price span.five {width: 14px; background-position: 0 -76px;} 
 .price span.six {width: 17px; background-position: 0 -95px;} 
 .price span.seven {width: 14px; background-position: 0 -114px;} 
 .price span.eight {width: 16px; background-position: 0 -133px;} 
 .price span.nine {width: 16px; background-position: 0 -152px;}
 .price span.zero {width: 16px; background-position: 0 -171px;}
 .price span.dot {width: 6px; background-position: 0 -190px;}
 .price span.mb {width: 18px; background-image:url("../images/icon_mb_dark.gif"); background-position:bottom;}
 .price span.gb {width: 18px; background-image:url("../images/icon_gb_dark.gif"); background-position:bottom;}
 .price span.na {width: 50px;height:29px; background-image:url("../images/na.gif");position:relative;top:3px;}
 .price span.yes {width: 18px; background-image:url("../images/Yes.gif");width:43px; background-position:bottom;}
 .price span.no {width: 18px; background-image:url("../images/Yes.gif");width:43px; background-position:bottom;}
 .price span.Topless{width:74px;background:url("../images/txt_topless.png") 0 0 no-repeat;background-position:bottom;}
 /*.price span.small{height:14px;}

 .price .one.small {width: 10px; background-position: 0 0;}
 .price .two.small {width: 10px; background-position: 0 -13px;} 
 .price .three.small {width: 10px; background-position: 0 -26px;} 
 .price .four.small {width: 10px; background-position: 0 -39px;} 
 .price .five.small {width: 10px; background-position: 0 -52px;} 
 .price .six.small {width: 10px; background-position: 0 -65px;} 
 .price .seven.small {width: 10px; background-position: 0 -78px;} 
 .price .eight.small {width: 10px; background-position: 0 -91px;} 
 .price .nine.small {width: 10px; background-position: 0 -104px;}
 .price .zero.small {width: 10px; background-position: 0 -117px;}
 .price .dot.small {width: 6px; background-position: 0 -130px;}*/

How are you sending the CSS to the client? As inline ` – Seth Petry-Johnson Feb 15 '10 at 14:15 — Seth Petry-Johnson, Feb 15 '10 at 14:15

score 0 · Answer 1 · answered Feb 15 '10 at 14:20

Some possible reasons for your trouble:

Are you sure the stylesheet references are part of the content being sent via email? (e.g. if you use an external stylesheet, is the <link> tag being included in the email body)
If the stylesheet is being sent properly, are you sure the program/browser/service used to read the email supports the CSS features you're using?
The CSS rules you're using declare relative image paths, like '../images/icon-price-a.gif'. This won't work when you capture the output as a string and send it via email, because the relative path will no longer resolve to your server. Have you tried putting fully qualified URLs in there? (e.g. url(http://www.mysite.com/images/icon-price-a.gif))

mvc render view to string span

1 Answers1