Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at


  • Clickfarm 77 posts 161 karma points
    May 06, 2016 @ 16:28
    Clickfarm
    0

    Content not rendering HTML

    I'm pulling a summary into a template. The html in the summary is not being rendered. Is there a way to autoescape so the code renders? Code snippet is below and the specific call is {{project.Summary}}

     <a class="height-fix body-content-mobile" ng-href="{{project.URL}}">
    <div class="body-content">
    <time>{{project.CreateDate}}</time>
    {{project.Summary}}
    </div>
    <span class="prosoco-arrow-sml prosoco-arrow-right-right prosoco-arrow-orange">Read More</span>
     </a>
    
  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    May 06, 2016 @ 16:32
    Dennis Aaen
    0

    Hi Clickfarm,

    If you are pull out your data using Razor then you can use this method.

    @Html.Raw()
    

    Then you should get the HTML outputtet as well.

    https://umbraco.tv/videos/umbraco-v7/implementor/working-with-umbraco-data/razor-syntax/htmlraw/

    Hope this helps,

    /Dennis

  • Clickfarm 77 posts 161 karma points
    May 06, 2016 @ 16:35
    Clickfarm
    0

    Tried that and get the following:

    Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

    Compiler Error Message: CS1525: Invalid expression term '{'

    Source Error:

    Line 158:

    Line 159: Line 160: @Html.Raw({{project.Summary}}) Line 161:
    Line 162: Read More

  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    May 06, 2016 @ 16:48
    Dennis Aaen
    0

    Hi Clickfarm,

    So you are in Razor right. Then you should do something like this. If not then it would be great if you could show the code that you have so far.

    @Html.Raw(project.CreateDate)
    @Html.Raw(project.Summary)
    

    Hope this helps,

    /Dennis

  • Clickfarm 77 posts 161 karma points
    May 06, 2016 @ 18:01
    Clickfarm
    0

    Negative, that did not work. I see the following error:

    Compilation Error

    Description: An error occurred during the compilation of a resource required to service this request. Please review the following specific error details and modify your source code appropriately.

    Compiler Error Message: CS0103: The name 'project' does not exist in the current context

    Source Error:

    Line 158:

    Line 159: Line 160: @Html.Raw(project.Summary) Line 161:
    Line 162: Read More

    Below is my code. Line 160 is causing the issue.

    @using Umbraco.Web;
    @using System.Linq;
    @using PROSOCO.Library;
    @inherits Umbraco.Web.Mvc.UmbracoTemplatePage
    @{
        Layout = "Layout.cshtml";
    
        var ctrl = new PROSOCO.UmbracoCMS.Core.API.PersonController();
    
        var articles = Model.Content.Parent.Children
            .Where(p => p.IsVisible())
            .Where(p => p.ContentType.Alias == "ProjectArticle" || p.ContentType.Alias == "GeneralArticle" || p.ContentType.Alias == "TestimonialArticle")
            .OrderByDescending(p => p.CreateDate)
        ;
    
        var newsArticles = new List<NewsArticle>();
        var dates = new List<string>();
        var tags = new List<string>();
    
        foreach (var item in articles)
        {
            var article = new NewsArticle()
            {
                //Body = item.GetPropertyValue("body") != null ? Html.Raw(item.GetPropertyValue("body").ToString()).ToString() : null,
                CreateDate = item.CreateDate.ToString("MMMM dd yyyy"),
                Month = item.CreateDate.ToString("MMMM"),
                Year = item.CreateDate.Year.ToString(),
                PageID = item.Id,
                Summary = item.GetPropertyValue("body") != null ? item.GetPropertyValue("body").ToString() : null,
                Tags = item.GetPropertyValue("tags") != null ? item.GetPropertyValue("tags").ToString().ToLower().Split(',').ToList() : null,
                ThumbnailImageURL = item.GetPropertyValue("thumbnailImage") != null ? Umbraco.Media(item.GetProperty("thumbnailImage").DataValue.ToString()).Url : null,
                Title = item.Name,
                Subheading = item.GetPropertyValue("subheading") != null ? item.GetPropertyValue("subheading").ToString() : null,
                URL = item.Url,
                YoutubeVideoID = item.GetPropertyValue("youtubeVideoID") != null ? item.GetPropertyValue("youtubeVideoID").ToString() : null,
            };
    
            newsArticles.Add(article);
    
            var date = string.Format("{0} {1}", article.Month, article.Year);
    
            if (!dates.Contains(date))
            { 
                dates.Add(date);
            }
    
            foreach (var tag in article.Tags)
            {
                if (!tags.Contains(tag))
                {
                    tags.Add(tag);
                }
            }
    
    
        }
    
    
    }
    
    @section Head {
    
    
        <script type="text/javascript" src="/Scripts/directives/angular-youtube-embed.js"></script>
    
    
    
    
        <script type="text/javascript" src="/Scripts/truncate.js"></script>
    
    
    
    
        <script type="text/javascript">
            var app = angular.module('app', ['prosocoHeader', 'search-filter', 'ui.bootstrap', 'ngSanitize', 'truncate', 'youtube-embed', 'youtube-bg-img', 'youtube-bg-image-full', 'background-img', 'project-filter', 'ui.utils', 'infinite-scroll'])
                .controller('appCtrl', ['$scope', '$http', '$sce', '$modal', '$filter', '$anchorScroll', '$location', function ($scope, $http, $sce, $modal, $filter, $anchorScroll, $location) {
    
                    $scope.allArticles = @Html.Raw(Json.Encode(newsArticles));
                    $scope.dates = @Html.Raw(Json.Encode(dates));
                    $scope.tags = @Html.Raw(Json.Encode(tags));
    
    //              console.log($scope.allArticles);
    //              console.log($scope.dates);      
    
                    $scope.queProjects = $scope.allArticles;
                    $scope.projects = $scope.queProjects.slice(0,2);
    //              console.log($scope.projects);
    
                    // infinite scroll, ajax call available with an api is update: https://github.com/sroze/ngInfiniteScroll
                    $scope.loadMore = function() {
                        if ($scope.projects.length < ($scope.queProjects.length)) {
                            var last = $scope.queProjects[$scope.projects.length];
    //                      console.log(last);
                            if (last != null) {$scope.projects.push(last)}
                        }
                    };
    
                    //search categories
                    $scope.matchTag = function(category) {
    //                  console.log(category);
                        $scope.projects = [];
                        $scope.queProjects = [];
                        angular.forEach($scope.allArticles, function (article) {
                            angular.forEach(article.Tags, function (tag) {
                                if (category == tag) {
    //                              console.log(article);
                                    $scope.queProjects.push(article);
                                }
                            });                                     
                        });
                        $scope.projects = $scope.queProjects.slice(0,2);
                        $anchorScroll('top');
                        $location.url($location.path());
                        $location.search('category', category);
                    }
    
                    //search archive dates
                    $scope.matchDate = function(date) {
    //                  console.log(date);
                        var thisMonth = date.split(/\b/)[0];
                        var thisYear =  date.split(/\s+/).slice(1,3)[0];
    //                  console.log(thisMonth);
    //                  console.log(thisYear);
    
                        $scope.projects = [];
                        $scope.queProjects = [];                    
                        angular.forEach($scope.allArticles, function (article) {
                            if (article.Year == thisYear) {
                                    if (article.Month == thisMonth) {
    //                                  console.log(article);
                                        $scope.queProjects.push(article);
                                    }
                            }
                        }); 
                        $scope.projects = $scope.queProjects.slice(0,2);    
                        $anchorScroll('top');
                        $location.url($location.path());
                        $location.search('date', date);
                    }
    
                    //check url
                    var checkUrl = $location.search();
                    if (checkUrl.category) { $scope.matchTag(checkUrl.category) };
                    if (checkUrl.date) { $scope.matchDate(checkUrl.date) };     
    
                }]);
        </script>
    
    
    }
    
    <div id="top" class="container-fluid product-line-container">
        <div class="row your-projects news">
            <div class="col-sm-9" infinite-scroll='loadMore()'>
                <div ng-repeat="project in projects" class="project">
                  <a ng-href="{{project.URL}}">
                      <h2 ng-bind-html="project.Title"></h2>
                      <div class="summary" ng-bind-html="project.Subheading"></div>
                  </a>
                  <div class="height-row">
                      <div class="height-fix with-padding">
                          <div ng-if="project.YoutubeVideoID" class="embed-responsive embed-responsive-16by9 video-hover" youtube-background-image-full="{{project.ThumbnailImageURL}}" style="background-size:cover" trigger="project.videoActive" ng-click="project.videoActive = true;">
                              <youtube-video class="embed-responsive-item" video-id="project.YoutubeVideoID" player-vars="{autoplay:1, rel:0}" ng-if="project.videoActive"></youtube-video>
                          </div>
                          <a ng-if="!project.YoutubeVideoID" ng-href="{{project.URL}}">
                            <div class="embed-responsive embed-responsive-16by9" background-image="{{project.ThumbnailImageURL}}"></div>
                        </a>
                      </div>
                      <a class="height-fix body-content-mobile" ng-href="{{project.URL}}">
                          <div class="body-content">
                              <time>{{project.CreateDate}}</time>
                                @Html.Raw(project.Summary)
                          </div>
                          <span class="prosoco-arrow-sml prosoco-arrow-right-right prosoco-arrow-orange">Read More</span>
                      </a>
                  </div>
                </div>
            </div>
            <aside class="col-sm-3 article-categories hidden-xs">
                <h4>Categories</h4>
                <ul>
                    <li ng-repeat="tag in tags | orderBy:tag">
                        <a ng-click="matchTag(tag)">{{tag}}</a>
                    </li>
                </ul>
                <h4>Archive</h4>
                <ul>
                    <li ng-repeat="date in dates">
                        <a ng-click="matchDate(date)">{{date}}</a>
                    </li>
                </ul>
            </aside>
        </div>
    </div>
    
  • Dennis Aaen 4500 posts 18255 karma points admin hq c-trib
    May 06, 2016 @ 18:13
    Dennis Aaen
    0

    Hi Clickfarm,

    Okay so you have a variable called Summary

    So what if you do something like this.

    @Html.Raw(Summary)
    

    Hope this helps,

    /Dennis

  • Clickfarm 77 posts 161 karma points
    May 06, 2016 @ 18:19
    Clickfarm
    0

    Negative. Different error.

    Compiler Error Message: CS0103: The name 'Summary' does not exist in the current context

    Source Error:

    Line 158:

    Line 159: Line 160: @Html.Raw(Summary) Line 161:
    Line 162: Read More

  • David Brendel 792 posts 2970 karma points MVP 3x c-trib
    May 08, 2016 @ 21:37
    David Brendel
    0

    Hi Clickfarm,

    you are not using razor, you are using angular.

    Have a look at https://docs.angularjs.org/api/ng/directive/ngBindHtml To render HTML with angular.

    Regards David

Please Sign in or register to post replies

Write your reply to:

Draft