[SOLVED] HTML Entity not converting to its result when passing into HTML from ViewData

HTML Entity not converting to its result when passing into HTML from ViewData

When I pass an HTML entity into HTML via the View Data object, it does not convert to it's result. (i.e. the ™ entity remains ™ and does not convert to ™)

This is the destination page

@{
    ViewData["Title"] = "Assess Mental Health";
    ViewData["HeaderTitle"] = "Assess Mental Health";
    ViewData["HeaderLine1"] = "with";
    ViewData["HeaderLine2"] = "Intelligent Assessments&trade;";
    ViewData["HeaderImage"] = "url(../img/headers/AI_Head.png)";
}

<main data-zanim-timeline="{}" data-zanim-trigger="scroll">
    <partial name="_Header" />
</main>

This is the partial

<!--
####################################################
H E A D E R
####################################################
-->
<section class="overflow-hidden py-0" id="top">
    <div class="bg-holder overlay parallax" style="background-image:@ViewData["HeaderImage"];background-position: center 58%;">
    </div>
    <!-- / bg-holder-->
    <div class="header-overlay"></div>
    <div class="container" data-zanim-xs='{"duration":"1.5","delay":"0.1"}'>
        <div class="d-flex align-items-center pt-10 pb-8">
            <div class="header-text">
                <div class="overflow-hidden">
                    <h1 class="display-3 text-white fs-4 fs-md-6">@ViewData["HeaderTitle"]</h1>
                    <p class="text-uppercase text-400 ls-2 mt-2 my-0 pb-0 pt-2">@ViewData["HeaderLine1"]</p>
                    <p class="my-0 py-0"><span class="fs-7 logo-secondary-style-light">pr<span class="logo-primary-style-light">e</span>vidence<sup class="fs-3 font-weight-light">&trade;</sup></span></p>
                    <p class="text-uppercase fs-1 text-400 ls-2 my-0 py-0">@ViewData["HeaderLine2"]</p>
                </div>
                <partial name="_CallToActionLight" />
                <div class="header-indicator-down"><a class="indicator indicator-down opacity-75" href="#Content" data-fancyscroll="data-fancyscroll" data-offset="64"><span class="indicator-arrow indicator-arrow-one" data-zanim-xs='{"from":{"opacity":0,"y":30},"to":{"opacity":1,"y":0},"ease":"Back.easeOut","duration":1,"delay":1.5}'></span></a></div>
            </div>
        </div>
    </div>
</section>
<!-- / end  H E A D E R -->

This is my layout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="robots" content="noindex">
    <title>@ViewBag.Title | Previdence | Mental Healthcare Platform</title>
    <partial name="_Favicons" />
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <script src="https://kit.fontawesome.com/971f8efccd.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
    <link href="~/lib/non-npm/owl.carousel/owl.carousel.css" rel="stylesheet">
    <link href="~/lib/non-npm/remodal/remodal.css" rel="stylesheet">
    <link href="~/lib/non-npm/remodal/remodal-default-theme.css" rel="stylesheet">
    <link href="~/lib/non-npm/theme/theme.css" rel="stylesheet">
    <link rel="stylesheet" href="~/css/site.css" />
    <link rel="stylesheet" href="~/css/cookiealert.css" />
</head>
<body>
    <partial name="_Preloader" />
    <partial name="_TopNavbar" />
    @*<partial name="_CookieConsentPartial" />*@
    @RenderBody()
    <partial name="_Footer" />
    <partial name="_GDPR_Alert" />
    <!--
    ####################################################
    J A V A S C R I P T - jquery, bootstrap, plugins
    Place at the end of the document so the pages load faster
    ####################################################
    -->
    <script src="~/lib/jquery/dist/jquery.min.js"></script>
    @RenderSection("Scripts", required: false)
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <script src="~/lib/non-npm/plugins/plugins.min.js"></script>
    <script src="~/lib/non-npm/stickyfilljs/stickyfill.min.js"></script>
    <script src="~/lib/non-npm/fortawesome/all.min.js"></script>
    <script src="~/lib/non-npm/rellax/rellax.min.js"></script>
    <script src="~/lib/non-npm/progressbar/progressbar.min.js"></script>
    <script src="~/lib/non-npm/isotope-layout/isotope.pkgd.min.js"></script>
    <script src="~/lib/non-npm/isotope-packery/packery-mode.pkgd.min.js"></script>
    <script src="~/lib/non-npm/owl.carousel/owl.carousel.js"></script>
    <script src="~/lib/non-npm/remodal/remodal.min.js"></script>
    <script src="~/lib/non-npm/hover-dir/jquery.hoverdir.js"></script>
    <script src="~/lib/non-npm/typed/typed.js"></script>
    <script src="~/lib/non-npm/theme/theme.min.js"></script>
    <script src="~/lib/non-npm/GDPR_Alert/cookiealert.js"></script>

    <!-- / end J A V A S C R I P T -->
</body>
</html>

Solution

Try with @Html.Raw(string) to render html string :

@Html.Raw(@ViewData["HeaderLine2"])