如何使用 MVC 剃须刀视图在 Iframe 中绑定 HTML 内容？答案

【问题标题】：How to HTML Content bind in Iframe using MVC razor view?如何使用 MVC 剃须刀视图在 Iframe 中绑定 HTML 内容？
【发布时间】：2019-12-23 06:51:36
【问题描述】：

在项目中创建TestModel类，代码如下。

  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; }
}

为控制器创建GetTestlst动作方法并获取所有数据并列出通过test.cshtml

 public ActionResult GetTestlst()
        {
            var templist = GetTestList().ToList();
            return View(templist);
        }

下面的代码编写Test.cshtml页面并获取控制器中的模型列表以查看。

@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>

在图像下方显示输出。 Iframe 正确但不在模型列表中显示 Html 内容。请给出答案。

【问题讨论】：

标签： model-view-controller iframe

【解决方案1】：

您是否考虑过将 HTML 加载到容器中？

<div id='@item.EmailTemplateId'></div>
<script type="text/javascript">
    $(document).ready(function(){
        $('#@item.EmailTemplateId').load('@item.'); 
    });
</script>

【讨论】：

感谢您回答我，但我想在 iframe 中显示。我在视图中使用了 @foreach 循环，然后对我不起作用
应该可以在循环中使用，因为我们为容器提供了模型中的 id。所以每一行都是独一无二的。

【解决方案2】：

旧代码替换为以下代码

<iframe id="testiframe" class="iframe" src=@item.TemplateContent></iframe>

我解决了这个问题

<div id=@item.EmailTemplateId style="height:200px; overflow:scroll;">@Html.Raw(HttpUtility.HtmlDecode(item.TemplateContent))</div>

【讨论】：

```Answer 工作正常，但不能在 iframe 中使用 div 部分。