Форум программистов, компьютерный форум, киберфорум
Наши страницы
C#: ASP.NET MVC
Войти
Регистрация
Восстановить пароль
 
Рейтинг 5.00/4: Рейтинг темы: голосов - 4, средняя оценка - 5.00
degvelo
1 / 1 / 1
Регистрация: 06.09.2015
Сообщений: 81
Завершенные тесты: 7
1

Razor

10.04.2018, 17:30. Просмотров 795. Ответов 4
Метки нет (Все метки)

Добрый день!

Пытаюсь сделать иерархическую таблицу с возможностью сворачивания.
Сначала потренировался. Здесь все работает.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE HTML>
<html>
 
<head>
    <meta charset="utf-8">
    <title>My_page3</title>
    <style>
        .box {
            background-color: blue;
            display: none;
        }
 
        .box.show {
            display: table-row;
        }
 
        .parent {
            background-color: yellow;
        }
    </style>
    <script type="text/javascript">
        document.addEventListener("DOMContentLoaded", function() {
            var nodes = document.querySelectorAll(".parent");
            [].forEach.call(nodes, function(tr) {
                var box = [];
                    next = tr.nextElementSibling;
                while (next && next.classList.contains("box")) {
                    box.push(next);
                    next = next.nextElementSibling
                }
                tr.cells[0].addEventListener("click", function() {
                    box.forEach(function(item) {
                        item.classList.toggle("show")
                    });
                    return false;
                })
            })
        });
    </script>
 
</head>
 
<body>
    <table name="table1" border="1">
        <thead>
         <tr id="1">
             <td>Город отправления</td>
             <td>Город прибытия</td>
             <td>План</td>
             <td>Факт</td>
             </tr>  
        </thead>
        <tr class="parent">
            <td><a href="#">Днепропетровск</a></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="box">
            <td rowspan="2"></td>
            <td>Киев</td>
            <td>122</td>
            <td>122</td>    
        </tr>
        <tr class="box">
            
            <td>Харьков</td>
            <td>122</td>
            <td>122</td>
        </tr>
        <tr class="parent">
            <td><a href="#">Киев</a></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="box">
           <td></td>
            <td>Одесса</td>
            <td>122</td>
            <td>122</td>
        </tr>
        <tr class="parent">
           <td><a href="#">Харьков</a></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr class="box">
            <td rowspan="3"></td>
            <td>Одесса</td>
            <td>122</td>
            <td>122</td>
        </tr>
        <tr class="box">
            
            <td>Одесса</td>
            <td>122</td>
            <td>122</td>
        </tr>
        <tr class="box">
            
            <td>Одесса</td>
            <td>122</td>
            <td>122</td>
        </tr>
    </table>
</body>
 
</html>
Попытался перенести код в ASP.NET MVC. в представлении сделал вот так.

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<table name="table1" border="1">
            <thead>
                <tr id="1">
                    <td>Город отправления</td>
                    <td>Город прибытия</td>
                    <td>План</td>
                    <td>Факт</td>
                </tr>
            </thead>
            @foreach (_0104201test.Models.DataUniqa2 item in Model)
            {
                <tr class="parent">
                    <td>@item.DepCity</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                foreach (var data in item.Data)
                {
                    <tr class="box">
                        <td></td>
                        <td>@data.ArC</td>
                        <td>@data.Plan</td>
                        <td>@data.Fact</td>
                    </tr>
                }
 
            }
 
 
 
        </table>
Результат озадачил.
Первую строку таблицы
HTML5
1
2
3
4
5
6
<tr id="1">
                    <td>Город отправления</td>
                    <td>Город прибытия</td>
                    <td>План</td>
                    <td>Факт</td>
                </tr>
рендерит нормально.

Вторую тоже
HTML5
1
2
3
4
5
6
<tr class="parent">
                    <td>@item.DepCity</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
А вот в этом месте проблема. Конкретно выделено красным. Эта ячейка не растягивается по ширине на уровень надписи Город отправления из заголовка таблицы. Из-за этого вся таблица плывет.
При том, что как я уже сказал выше в отдельном html файле сделанном в блокноте все отлично работает.



C#
1
2
3
4
5
6
7
8
9
 foreach (var data in item.Data)
                {
                    <tr class="box">
                        [COLOR="Red"]<td></td>[/COLOR]
                        <td>@data.ArC</td>
                        <td>@data.Plan</td>
                        <td>@data.Fact</td>
                    </tr>
                }
Добавлено через 4 минуты
Можно посмотреть на это чудо здесь https://dotnetfiddle.net/O8YYfc
0
Лучшие ответы (1)
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
10.04.2018, 17:30
Ответы с готовыми решениями:

Непонятки с Razor
Как сделать так, чтобы тэг &lt;div class=&quot;table&quot;&gt; закрывался через 2 выполнения...

Razor табличка
Всем привет, возможно глупый вопрос, у меня есть программа, которая просто выводит числа, как...

Razor и ошибки в css
Делаю представление со сторонним кодом стилей. При обращении к данному представлению выводится: ...

Сбор данных - Razor
собственно есть иерархия моделей: public class main{ ... public Company cmp {get;...

Не подсвечиваются Razor функции
Мои настройки ASP.NET MVC4, .NET 4.0 Создал приложение, настроил во Views Web.config, Razor...

4
IamRain
1435 / 1274 / 403
Регистрация: 02.08.2011
Сообщений: 3,769
10.04.2018, 18:26 2
Лучший ответ Сообщение было отмечено degvelo как решение

Решение

У себя проверил - chrome почему-то присваивает свойство классу .box:
CSS
1
2
3
.box.show {
                display: block !important;
            }
Не знаю почему, ведь по правилам блочные элементы занимают всю предоставляемую им ширину контейнера, если она не указана явно, то есть строка должна быть на всю длину таблицы, однако вся строка имеет длину только первой колонки.
Возможно, косяки отображения в браузере.
Попробуйте переопределить так:
CSS
1
2
3
.box.show {
                display: table-row !important;
            }
1
degvelo
1 / 1 / 1
Регистрация: 06.09.2015
Сообщений: 81
Завершенные тесты: 7
10.04.2018, 22:44  [ТС] 3
Вот и я о том же. Все вроде правильно сделано.
Ща попробоую.

Добавлено через 1 минуту
Спасибо! Заработало!
0
sau
2115 / 1690 / 290
Регистрация: 22.07.2011
Сообщений: 6,431
Завершенные тесты: 1
11.04.2018, 11:57 4
Я только одного не понял:
При том, что как я уже сказал выше в отдельном html файле сделанном в блокноте все отлично работает.
так же как и по ссылке https://dotnetfiddle.net/O8YYfc все нормально , думаю , у Вас просто старые стили в кэше браузера. , или еще какая локальная проблема.
0
degvelo
1 / 1 / 1
Регистрация: 06.09.2015
Сообщений: 81
Завершенные тесты: 7
11.04.2018, 16:12  [ТС] 5
https://dotnetfiddle.net/O8YYfc Просто уже поменял там. Без !important был косяк, как я описывал.
0
11.04.2018, 16:12
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
11.04.2018, 16:12

Использование Razor в javascript
Ребят, подскажите, могу ли я использовать данные из Razor в коде Javascript? Во вьюхе мне приходит...

Не могу разобраться с Razor.
Здрасти! Разница между MVC и Razor заключатеся в том, что код по разному выделяется на сколько я...

Перевод из Razor в Aspx
Помогите перевести данный код @{ Layout = null; } &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
5
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2019, vBulletin Solutions, Inc.
Рейтинг@Mail.ru