I am interested in utilizing the @Html.Raw(string) function to display multiple webpages in a Card format next to each other on a single page. The string parameter will contain the complete HTML content

Here is the CSS and HTML code for multiple card elements on a webpage. Each card contains a webpage, but I am facing issues with this setup. It works fine when replacing the webpage content with text in each card.
I want to achieve the same layout as described above. 

.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);
    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>
Here x refers to a 
List<Dictionary<key,value>>
containing multiple data.

htmlcssasp.net-corerazor-pages

Answer №1

However, I am facing challenges with this approach. When attempting to insert text within each card on the webpage, it seems to work smoothly.

Let's address this issue starting with the fact that you are utilizing Bootstrap’s card component, which comes with its own CSS styling. If you wish to incorporate custom CSS, you have two options: modifying Bootstrap’s CSS file (not recommended) or creating a separate custom CSS file for your styling needs. The current method you are employing will not yield the desired results.

If in your shoes, I would try addressing this matter as shown below:

Fetching 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='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(); ;
}

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:

https://i.sstatic.net/vMT8w.gif

This demonstrates how to achieve a card element without extensive CSS modifications.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to align radio buttons in the center of a div horizontally

I am struggling to center a group of three radio buttons horizontally and have not been successful. Below is the code I am using: HTML <div class="section-wrap section-flavors"> <input id="r11" name="radio3" type="radio" value="radio_bt ...

htmlcss

Guide to making a circular shape with a gradient outline and see-through center using CSS

Looking to design a circle using CSS with a gradient border, and an inner area that is transparent to achieve this look: https://i.sstatic.net/wN1Mg.png While there are methods for creating a gradient border without transparency, such as the one shown in ...

csslinear-gradients

JavaScript Drag Events in Microsoft Edge (Including IE)

My drag event is functioning properly in Chrome, Safari, Firefox, and Opera. However, I encountered an error when running it on Microsoft Edge and IE: SCRIPT438: Object doesn't support property or method 'setDragImage' Below is the code sn ...

javascripthtmldrag-and-dropmicrosoft-edge

Deciding Between Javascript DOM and Canvas for Mobile Game Development

My idea for a mobile game involves using the Phonegap framework to create a game where players can control a ball's movement by utilizing their phone's accelerometer. I also envision incorporating other elements like enemies and walls into the ga ...

javascriptjqueryhtmlcordova

Utilizing Angular to link input and button elements together

While going through the tutorial Tour of Heroes, I encountered a section about adding a new hero. The tutorial suggests using an input element paired with an add button. Insert the following code into the HeroesComponent template, after the heading: & ...

htmlangularweb-frontendangular-tour-of-heroes

Analyzing comma-separated values file and transforming the information into a modifiable format

Need advice on parsing CSV and using foreach loop.. <?php //output Array ( [0] => Array ( [company] => A Company [address] => A Address [telephone] => A Telephone ) [1] => Array ( ...

phphtmlcsvforeach

The command `python3 manage.py findstatic` is unable to locate the static file

I have been struggling to incorporate static files into my project, but the CSS is not loading. I tried using findstatic but Django is unable to locate any static directory: https://i.sstatic.net/jRgzx.png https://i.sstatic.net/7VG0x.png In a different pr ...

htmlcssdjango

In responsive mode, Carousel displays indicators and captions below the image

I'm experiencing an issue with my carousel code. It works perfectly in full screen mode, but when viewed on smaller screens the captions and indicators appear below the image. I've tried multiple solutions without success. Any suggestions on how ...

htmlcsscarousel

Django has the ability to display images from static files, however, it is not capable of

I am facing an issue with my Django project where my static files (css and images) load properly when referenced in an html tag, but when I try to set a background image using CSS (background: url('images/mypic.png') or url('../images/mypic. ...

htmlcssdjango

What are the advantages of importing variables from components?

Let's start with some context. Our primary sass file is named main.scss, which mainly imports other scss files. /* ========================================================================== Base ================ ...

csssass

The issue of incomplete post content display on WordPress pages persists despite making modifications to the style.css file

click here for image descriptionI attempted to make some adjustments in the style.css file but encountered a problem. Now, all the posts on the site are displaying "[...]" after a brief and unformatted snippet of content. Any assistance would be greatly ...

phpcsswordpress

Validating button using Java's jsoup library

Looking to determine if a page has a next button for scrolling. The approach is simple: extract the current link, remove the index at the end, replace it with a new index, attempt to connect to the updated link, and if an IOException is thrown, then ther ...

javahtmlwebjsoup

I'm having trouble getting Twig to load my HTML input when I use an if statement

I am trying to use the if statement to determine whether to set the input field as readonly. It appears as an empty space on the page. {% if Action == New %} <input class="numeric" type="text" name="AreaCode" value="{{AreaCode }}" maxlength="10">{% ...

phphtmlsymfonytwig

Struggling to position a tiny "About Us" footer right above the actual footer on the webpage, but can't seem to make it appear

I'm a beginner in this field! I have experimented with various names and details multiple times, however, it does not seem to be moving to the desired position. HTML <div id="about-footer"class="about-footer"> </div> CSS .about-foo ...

htmlcss

What is the proper way to reference the array you require within a function?

Is there a way to input the name of an array (such as a, b, or any other chosen array) into a function? I've tried using inputs[3].value but it doesn't seem to be working. How can I achieve this? I have a total of 4 fields, and I think using sele ...

javascripthtml

Media query unable to fetch the appropriate CSS file

After reading an interesting article at , I have been experimenting with different ideas. One of my goals is to dynamically load a specific CSS file based on the device size accessing my website. Below is the code that I am currently using: <link hre ...

csstwitter-bootstrapresponsive-design

The functionality of z-index is unreliable when article elements are utilized

Essentially, my goal is to display the <article id="characters"> above the <article id="accordion">. However, despite my efforts, the characters article appears below the accordion article instead of on top or even behind it. Where did I go wr ...

htmlcssz-index

Is there a way to modify the dimensions of this container? (CSS)

After performing a search and clicking on a result, a white bubble pops up on the map. I am looking to use CSS to make this bubble smaller as it is currently too large. Can anyone provide guidance on how to achieve this? ...

javascriptjqueryhtmlcssgoogle-maps

Using AngularJS to incorporate personalized font icons

Looking to create a custom font icon library similar to "Font Awesome" for my AngularJS project, as using fonts instead of images is more versatile across devices. Is there a way to achieve this? I have generated a font in .ttf and .svg formats with my ...

cssangularjsfont-facefont-awesomeglyphicons

Does "br" not play well with flexbox?

After creating a table using flexbox, I made an interesting observation: the br element seems to have no effect within the flexbox. For example: .flexbox { display: flex; flex-wrap: wrap; border: 2px solid red; padding: 2px; } .item { width: ...

htmlcssflexbox