How to write HTML line using Razor?

user_10269663 0
Viewed 249

I am working on a table according to the molds of the image below

enter image description here

However, to adapt the different amounts of lines in line 3 I made this code

<tbody>
        @{var foco = 3;}


        @for (int x = 0; x < foco; x++)
        {
            <tr>
                @{if (x == 0) {"<td rowspan='" + foco + "' class='col-md-3'>1</td>";}}
                <td class="col-md-2">2</td>
                <td class="col-md-5">3</td>
                <td class="col-md-2">4</td>
            </tr>
        }
    </tbody>

How can I make the if text to be displayed on the screen?

edit: In short, my goal is that I can make a table in which one of the fields has 3 other equivalent fields (can have more or less depending on the need), and for this I need the code above to create these fields unified for me, but I can not perform this 3td process are aligned with 1td higher

datatables html-table razor datatable html
2 Answers

You don't want the HTML to be a literal string in the server-side code. Instead, you want your server-side code to simply wrap your normal HTML markup. Pretty much identical to the syntax you already use in your for structure, the only difference being that you also appear to want to output a value within the HTML. The same @-notation is used for that as well.

Something like this:

@for (int x = 0; x < foco; x++)
{
    <tr>
        @if (x == 0)
        {
            <td rowspan="@foco" class="col-md-3">1</td>
        }
        <td class="col-md-2">2</td>
        <td class="col-md-5">3</td>
        <td class="col-md-2">4</td>
    </tr>
}

(Note that this isn't really a C# thing, this is specific to Razor view engine syntax.)

user_3281930

From my experience, the easiest way to fulfill your goal is using JS DOM mechanism (https://www.w3schools.com/js/js_htmldom.asp). It allows you to manipulate HTML elements dynamically.

You don't need to worry about razor specific syntax etc.

In your case:

1) Create empty placeholder for the table, just specify some Id:

<tbody id="my-table-body">
</tbody>

2) In the script section invoke your logic:

@section Scripts{

    var foco = 3;

    //get table body reference
    var myTableBody = document.getElementById("my-table-body");

    for (int x = 0; x < foco; x++) {
        if(x == 0) {

            //create td element and fill its properites
            var td = document.createElement("td");
            td.rowSpan = foco.toString();
            td.className = "col-md-3";
            td.value = 1

            //add the td element to table body
            myTableBody.appendChild(td);
        }
    }
}
user_80539090
Related