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

Question

下面是网页中多个卡片元素的 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>> 包含多个数据。

Answer 1

"But this is not working for me. When I am trying to put texts at the place of webpage inside each card then its working fine"

Let's begin with this concern, because you are using Bootstrap’s card component which has its own css if you want to implement your custom css you have two way, either modify Bootstrap’s css file which is not recomemded or define your custom css file and then use that. The way you are trying will not work this way.

Easiest solution of your problem can be:

If I would you then might be solve this issue in following manner,

Web Site Dynamic Content From Backend:

[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='
        sb.Append("</body>");
        sb.Append("</html>");
        convertedHtmlBody = sb.ToString();
        convertedHtmlBodyList.Add(convertedHtmlBody);
    }
   

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

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

Card Output:

这里可以得到没有much css modifications的卡片元素。我希望这能帮助你实现你的要求。

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

I want to use @Html.Raw(string), (where string contains a complete html webpage) and show multiple webpages in Card format side-by-side on same page

html

css

asp.net-core

razor-pages