MVC Razor not rendering HTML correctly inside a @foreach loop | C# Online Compiler

MVC Razor not rendering HTML correctly inside a @foreach loop by Erik Philips

using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

namespace HelloWorldMvcApp
{
 	public class SampleViewModel
	{
		public IEnumerable<string> ReportChangeLogs { get; set; }
	}
}

Model

​x
 
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
​
namespace HelloWorldMvcApp
{
    public class SampleViewModel
    {
        public IEnumerable<string> ReportChangeLogs { get; set; }
    }
}

@model HelloWorldMvcApp.SampleViewModel
@{
	Layout = null;
}

<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->

<html lang="en">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous" />
		<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>	</head>
		<style>
			table { margin: 100px; }
		</style>
	<body>
	<table>
		<tr>
		  <td data-trigger="hover" 
			  data-html="true"
	          data-toggle="popover" 
	          data-placement="top" 
	          data-original-title="Title" 
	          data-content="@foreach (var t in Model.ReportChangeLogs) 
              {  
	            <b>Bold Doesn't work</b>
              }">
            @if (Model.ReportChangeLogs.Any())
            {
              <i class='fa fa-stack-exchange fa-2x' style='color: #205686' aria-hidden='true'></i>
            }
          </td>
		</tr>
	</table>
	<script>
	$(function(){
    	// Enables popover
    	$("[data-toggle=popover]").popover();
		console.log("test");
	});
	</script>
	</body>
</html>

View

 
@model HelloWorldMvcApp.SampleViewModel
@{
    Layout = null;
}
​
<!DOCTYPE html>
<!-- template from http://getbootstrap.com/getting-started -->
​
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>
        <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=" crossorigin="anonymous" />
        <script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>
    <script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>  </head>
        <style>
            table { margin: 100px; }
        </style>
    <body>
    <table>
        <tr>
          <td data-trigger="hover" 
              data-html="true"
              data-toggle="popover" 
              data-placement="top" 
              data-original-title="Title" 
              data-content="@foreach (var t in Model.ReportChangeLogs) 
              {  
                <b>Bold Doesn't work</b>
              }">
            @if (Model.ReportChangeLogs.Any())
            {
              <i class='fa fa-stack-exchange fa-2x' style='color: #205686' aria-hidden='true'></i>
            }
          </td>
        </tr>
    </table>
    <script>
    $(function(){
        // Enables popover
        $("[data-toggle=popover]").popover();
        console.log("test");
    });
    </script>
    </body>
</html>
​

using System;
using System.Web.Mvc;
using System.Collections.Generic;

namespace HelloWorldMvcApp
{
	public class HomeController : Controller
	{
		[HttpGet]
		public ActionResult Index()
		{
			var model = new SampleViewModel
			{
				ReportChangeLogs = new List<string>
				{
					"string1",
					"string2"
				}
			};
			return View(model);
		}
	}
}

Controller

 
using System;
using System.Web.Mvc;
using System.Collections.Generic;
​
namespace HelloWorldMvcApp
{
    public class HomeController : Controller
    {
        [HttpGet]
        public ActionResult Index()
        {
            var model = new SampleViewModel
            {
                ReportChangeLogs = new List<string>
                {
                    "string1",
                    "string2"
                }
            };
            return View(model);
        }
    }
}

View in Full Screen

-4
4
27
25
37

Last Run:	10:55:22 am
Compile:	0.161s
Execute:	0.013s
Memory:	0b
CPU:	0s

View IL Code