Как написать строку HTML, используя Razor? - PullRequest
Новая
       42

Как написать строку HTML, используя Razor?

0 голосов
/ 29 августа 2018

Я работаю на столе согласно формам изображения ниже

enter image description here

Однако, чтобы адаптировать различное количество строк в строке 3, я сделал этот код 

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

Как сделать так, чтобы текст if отображался на экране?

редактирование: Короче говоря, моя цель состоит в том, чтобы я мог создать таблицу, в которой одно из полей имеет 3 других эквивалентных поля (может иметь более или менее в зависимости от необходимости), и для этого мне нужен приведенный выше код для создания этих полей, унифицированных для меня , но я не могу выполнить этот процесс 3td выровнены с 1td выше

Ответы [ 2 ]

0 голосов
/ 05 июля 2019

По моему опыту, самый простой способ достичь вашей цели - использовать механизм JS DOM (https://www.w3schools.com/js/js_htmldom.asp).. Он позволяет динамически манипулировать элементами HTML.

Вам не нужно беспокоиться о синтаксисе, специфичном для бритвы, и т. Д.

В вашем случае:

1) Создайте пустую метку-заполнитель для таблицы, просто укажите некоторый идентификатор: 

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

2) В разделе скрипта вызовите вашу логику: 

@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);
        }
    }
}
0 голосов
/ 29 августа 2018

Вы не хотите, чтобы HTML был литеральной строкой в ​​коде на стороне сервера. Вместо этого вы хотите, чтобы ваш серверный код просто переносил вашу обычную HTML-разметку. Практически идентичен синтаксису, который вы уже используете в своей структуре for, с той лишь разницей, что вы также хотите вывести значение в HTML. Для этого используется та же самая запись @.

Примерно так: 

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

(Обратите внимание, что на самом деле это не C #, это специфично для синтаксиса механизма представления Razor.)

...