CODEWITHSUNDEEP
c#htmlasp.net-mvcrazortwitter-bootstrap-3
GRU119
GRU119

Reputation: 1128

MVC Razor not rendering HTML correctly inside a @foreach loop

I'm trying to display text when you hover over table data and trying to format it using HTML. I have the text stored in the title. I'm able to get the data to display fine when I hover over it, but for the life of me, I cannot get the HTML to render correctly. So for an example, if I wanted to make the text bold in the title, it would look like this <b>text bold</b> when I hover over the title. The fix seems like it should be simple, but I cannot figure this out. I did find a post of user having the same issue, but there was no real solid solution.

How can I get HTML to render within a @foreach loop properly?

<td data-trigger="hover" data-toggle="popover" data-placement="top" data-original-title="@Html.DisplayFor(modelItem => item.Report_Name)" data-content="@foreach (var t in item.report_change_log_list) {  @Html.Raw("<div style='text-align: left'><b>" + t.effective_date.ToString("MM/dd/yyyy") + "</b> : " + t.change.ToString() + "</br></br>" + "</div>")  }">
                                            @if (item.report_change_log_list.Any())
                                            {
                                                @Html.Raw("<i class='fa fa-stack-exchange fa-2x' style='color: #205686' aria-hidden='true'></i>");
                                            }
                                        </td>

Upvotes: 0

Views: 1587

Answers (1)

GregH
GregH

Reputation: 5459

you need to add data-html="true" to your td tag as follows:

<td data-html="true" data-trigger="hover" data-toggle="popover" data-placement="top" data-original-title="@Html.DisplayFor(modelItem => item.Report_Name)" data-content="@foreach (var t in item.report_change_log_list) {  @Html.Raw("<b>Bold Doesn't work</b>")  }">
    @if (item.report_change_log_list.Any())
    {
        @Html.Raw("<i class='fa fa-stack-exchange fa-2x' style='color: #205686' aria-hidden='true'></i>");
    }
</td>

Here is a fiddle which illustrates this

Upvotes: 2

Related Questions