How to HTML Content bind in Iframe using MVC razor view? - model-view-controller

Question

Create TestModel class in the project show below code.
public class TestModel
{
public long EmailTemplateId { get; set; }
public string TemplateName { get; set; }
public string TemplateContent { get; set; }
public Nullable<System.DateTime> CreatedDate { get; set; }
public Nullable<System.DateTime> UpdatedDate { get; set; }
public Nullable<bool> IsDefaultTemplate { get; set; }
public string TemplateKey { get; set; }
public string TemplatePath { get; set; }
public string TemplateJson { get; set; }
public Nullable<bool> IsAdmin { get; set; }
public int TemplateType { get; set; }
public string TemplateTag { get; set; }
}
Create GetTestlst action method to the controller and get all data and list pass test.cshtml
public ActionResult GetTestlst()
{
var templist = GetTestList().ToList();
return View(templist);
}
below code written Test.cshtml page and get the model list in controller to view.
#using test.Helpers;
#model List<test.Entities.TestModel>
#{
ViewBag.Title = "Template";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Index</h2>
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model[0].EmailTemplateId)
</th>
<th>
#Html.DisplayNameFor(model => model[0].TemplateName)
</th>
<th>
#Html.DisplayNameFor(model => model[0].TemplateContent)
</th>
<th>
#Html.DisplayNameFor(model => model[0].CreatedDate)
</th>
<th>
#Html.DisplayNameFor(model => model[0].UpdatedDate)
</th>
<th>
#Html.DisplayNameFor(model => model[0].IsDefaultTemplate)
</th>
<th>
#Html.DisplayNameFor(model => model[0].TemplateKey)
</th>
<th>
#Html.DisplayNameFor(model => model[0].TemplatePath)
</th>
<th>
#Html.DisplayNameFor(model => model[0].TemplateJson)
</th>
<th>
#Html.DisplayNameFor(model => model[0].IsAdmin)
</th>
<th>
#Html.DisplayNameFor(model => model[0].TemplateType)
</th>
<th>
#Html.DisplayNameFor(model => model[0].TemplateTag)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.EmailTemplateId)
</td>
<td>
#Html.DisplayFor(modelItem => item.TemplateName)
</td>
<td>
**`<iframe id="testiframe" class="iframe" src=#item.TemplateContent></iframe>`**
</td>
<td>
#Html.DisplayFor(modelItem => item.CreatedDate)
</td>
<th>
#Html.DisplayFor(model => item.UpdatedDate)
</th>
<th>
#Html.DisplayFor(model => item.IsDefaultTemplate)
</th>
<th>
#Html.DisplayFor(model => item.TemplateKey)
</th>
<th>
#Html.DisplayFor(model => item.TemplatePath)
</th>
<th>
#Html.Raw(item.TemplateJson)
</th>
<th>
#Html.DisplayFor(model => item.IsAdmin)
</th>
<th>
#Html.DisplayFor(model => item.TemplateType)
</th>
<th>
#Html.DisplayFor(model => item.TemplateTag)
</th>
<td>
#*#Html.ActionLink("Edit", "Edit", "Test", new { id = item.Id }, null) |
#Html.ActionLink("Details", "Details", "Test", new { id = item.Id }, null) |
#Html.ActionLink("Delete", "Delete", "Test", new { id = item.Id }, null)*#
</td>
</tr>
}
</table>
Show output below image.
Iframe proper but not show Html content in the model list. please give the answer.

Answer 1

Have you considered loading the HTML into a container?
<div id='#item.EmailTemplateId'></div>
<script type="text/javascript">
$(document).ready(function(){
$('##item.EmailTemplateId').load('#item.');
});
</script>

Answer 2

Old Code replace to below code
<iframe id="testiframe" class="iframe" src=#item.TemplateContent></iframe>
I solved this issue
<div id=#item.EmailTemplateId style="height:200px; overflow:scroll;">#Html.Raw(HttpUtility.HtmlDecode(item.TemplateContent))</div>