我想使用@Html.Raw(string)，（其中string包含完整的html网页）并在同一页面上并排显示卡片格式的多个网页

问题描述 投票：0回答：1

下面是网页中多个卡片元素的 css 和 Html，每个卡片元素都包含一个网页，但这对我不起作用。当我尝试将文本放在每张卡片内的网页位置时，它工作正常。
我需要与上面讨论的相同的布局。 

.container{
    background-color:bisque;
    position:relative;
}
.container-2{
    width: 95%;
    background-color:black;
    padding: 20px;
    color:white;
}
.card-body {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 1.25rem;
}
.card-text{
    background-color:black;
}
.row {
    margin:0px -5px ;
}
column {
    float: left;
    width: 25%;
    padding: 0 10px;
}
@media screen and (max-width: 600px) {
    .column {
        width: 100%;
        display: block;
        margin-bottom: 20px;
    }
}
.card {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); /* this adds the "card" effect */
    padding: 16px;
    background-color: #f1f1f1;
    margin:5px 5px 5px 5px;

}
<div class="row">
    @foreach (KeyValuePair<string, Asset> asset in assets)
     {
        <div class="column">
            <div class="card" style="overflow-x: scroll; overflow-y: scroll; width: 18rem; height: 300px; ">
              <div class="card-body" style="background-color:black">
                <h5 class="card-title" style="border:solid">@x.Value.title</h5>
                       <p class="card-text" style="color:whitesmoke">@Html.Raw("<!DOCTYPE html>"+"<html>" + "<head>" + x.Value.head + "</head>" + "<body>" + x.Value.body + "</body>" + "</html>");
                        </p>    
              </div>
            </div>
         </div>
       }
</div>
这里 x 是一个包含多个数据的 
List<Dictionary<key,value>>
。

html css asp.net-core razor-pages
1个回答
1
投票

但这对我不起作用。当我尝试将文本放在每张卡片内的网页位置时，它工作正常

让我们从这个问题开始，因为你使用的是Bootstrap的卡 具有自己的 CSS 的组件。如果您想实现自定义 CSS，有两种方法：修改 Bootstrap 的 CSS 文件（不推荐），或者定义自定义 CSS 文件，然后使用它。您尝试的方法不会以这种方式起作用。

如果我是你，那么可能会通过以下方式解决这个问题：

来自后端的网站动态内容：

[HttpGet]
public IActionResult BindDynamicContentToHtmlCard()
{
   
   
    var convertedHtmlBodyList = new List<string>();
    for (int i = 1; i < 10; i++)
    {
        StringBuilder sb = new StringBuilder();
        var convertedHtmlBody = "";
        sb.Append("<!DOCTYPE html>");
        sb.Append("<html>");
        sb.Append("<head>");
        sb.Append("</head>");

        sb.Append("<body>");
        sb.Append("<h5 class='card - title' style='border: solid'><strong>TEST WEB SITE "+ i + " </strong></h5>");
        sb.Append("<p>Simplest solution of the dynamic card generation.</p>");
        sb.Append("<p>This is how you can generate dynamic Card</p>");
        sb.Append("<p><strong style='color: red'>Note:</strong> For more details please check details: <a href='https://stackoverflow.com/questions/71167733/i-want-to-use-html-rawstring-where-string-contains-a-complete-html-webpage'>Details</a></p>");
        sb.Append("</body>");
        sb.Append("</html>");
        convertedHtmlBody = sb.ToString();
        convertedHtmlBodyList.Add(convertedHtmlBody);
    }
   

    ViewBag.bindToHtmlInView = convertedHtmlBodyList;
    return View(); ;
}

卡片 HTML：

@{
    ViewData["Title"] = "BindDynamicToHtml";
}

<div class="row">
    <div class="col-md-12">
        @foreach (var item in ViewBag.bindToHtmlInView)
        {
            <div class="col-md-4">
                <div class="card" style="overflow-x: scroll; overflow-y: scroll;">
                    <div class="card-body" style="background-color:white">
                        <p class="card-text" style="color:whitesmoke">
                            @Html.Raw(item)
                        </p>
                    </div>
                </div>
            </div>
        }
    </div>
</div>

卡片输出：

这里不需要太多CSS修改就可以获得卡片元素。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.