我不確定我是否有足夠的詞匯來正確地提出這個問題,我希望這個問題的標題措辭正確……無論哪種方式,我都試圖使用 .Net Core 在 .cshtml Razor 頁面上制作表格5.0(Visual Studio 16.10.0)。我正在使用 Entity Framework Core 5.0.11,但我不確定這是否與此相關。
我正在從資料庫中提取資料,我想做的是構建一個包含兩列的表。所以,我希望我拉的第一個專案在第一列,我拉的第二個專案在第二列,我拉的第三個專案在第一列(現在在第一個專案下面),第四個專案我拉到第二列(現在在第 2 項下)等等。
我正在嘗試生成一個包含任意數量專案的兩串列。
(編輯:對不起,如果這張表看起來一團糟。當我在編輯頁面時,它看起來像是我想要的,但是當我在最后一頁上查看我的問題時,它看起來就像原始文本。只是想包括我知道這一點,但不知道該怎么辦。或者,也許這只是我的螢屏,在你的螢屏上看起來很棒。手指交叉。)
像這樣:|標題(但在實際代碼中忽略標題)|另一個標題(它只是說這里需要標題行)| |---------------------------------------------|--- ------------| |專案 1|專案 2| |第 3 項|第 4 項|
現在,這是我嘗試使用的代碼,但它似乎不起作用:
@if (Model.MyListOfItems is not null) // I can verify that it is not null
{
<table>
<tbody>
@{ int count = 0; }
@foreach (var item in Model.MyListOfItems)
{
count ;
@if (count % 2 == 1)
{
<tr>
<td>
@Html.DisplayFor(i => item.Text)
</td>
}
else
{
<td>
@Html.DisplayFor(i => item.Text)
</td>
</tr>
}
}
@if (count % 2 == 1)
{
</tr>
}
</tbody>
</table>
}
Now, you can see what I'm doing, right? For odd numbered items, open up a new table row. For even numbered items, close it. If we end on an odd numbered item, we'll have a row open, so that last if statement there closes it up. This way, we get a table like I described above.
However, this doesn't work. It won't compile. I get errors like ; expected for the very first line of the file. It starts complaining about code that comes before this code. I start getting a bunch of such and such doesn't exist in this current context
But here's the thing... I know the rest of the code is good, because if I change it to this
@if (Model.MyListOfItems is not null) // I can verify that it is not null
{
<table>
<tbody>
@{ int count = 0; }
@foreach (var item in Model.MyListOfItems)
{
count ;
@if (count % 2 == 1)
{
<tr>
<td>
@Html.DisplayFor(i => item.Text)
</td>
</tr> <!-- Added this -->
}
else
{
<tr> <!-- Added this -->
<td>
@Html.DisplayFor(i => item.Text)
</td>
</tr>
}
}
@if (count % 2 == 1)
{
<!-- </tr> --> <!-- Removed This -->
}
</tbody>
</table>
}
then it works and compiles just fine. The table obviously doesn't look how I want it to look, but I'm including this to illustrate that I know it's not a problem with my code, or even with the rest of my code, it's the compiler not seeing the end of that <tr> tag in the opening if statement and then not recognizing the } else { as C# code (and because of that is throwing errors all over the page).
I know the compiler is trying to save me from myself, but if I can just force it to compile I'm... at least fairly confident that the table will be properly formed HTML. Even if it's not, if I can get it to compile then I can see what kind of table this code does produce and fix it from there. But, the compiler clearly doesn't appreciate me opening a tag within an if block and then not closing it.
I've run into similar problems to this before, which is also why I'm confident that it's the compiler and not me, but usually I just find some other way to do it. And I'm sure I'll do that this time, I'm going to start trying as soon as I send this, but I figured I'd check with y'all anyway; I figure there must be something I'm missing.
Also, yes, I tried changing else to @else, but that didn't solve the problem, just started throwing errors saying that @else wasn't allowed there.
So, I think, that's a long way around asking what I'm trying to ask, but I think all the exposition was necessary. Anyway, I suppose here's the question:
How do I force the compiler to recognize my closing brackets as code when I open an HTML tag within that block, but don't close the HTML tag?
(EDIT: Added an explicit <tbody> to the table as per response from @Dai)
uj5u.com熱心網友回復:
您可以將您的專案串列分塊,以便您可以像這樣迭代您的子串列串列:
<table>
<tbody>
@{
var listOfSubLists = Model.MyListOfItems
.Select((x, i) => new { Index = i, Value = x })
.GroupBy(x => x.Index / 2)
.Select(x => x.Select(v => v.Value).ToList())
.ToList();
}
@foreach (var subList in listOfSubLists)
{
<tr>
@foreach (var item in subList)
{
<td>
@Html.DisplayFor(i => item.Text)
</td>
}
</tr>
}
</tbody>
</table>
這樣,您就可以使用<table>標簽了。我認為這比col-在 UI中使用 Bootstrap類創建表更合適。
而且.NET6 LINQ 將支持內置的塊方法,允許您將串列分塊為一行代碼:
var listOfSubLists = Model.MyListOfItems.Chunk(2);
uj5u.com熱心網友回復:
好吧,如果有人知道我的問題的答案,我仍然會非常感激,因為就像我提到的那樣,我以前遇到過這樣的事情,并且總是必須找到解決方法。但是,如果有人想知道,這是我的解決方法。
我正在使用 Bootstrap 框架,它有這個專欄組織。每頁 12 列,每個容器內還有 12 列。基本上,您可以繼續將頁面劃分為越來越小的 12 組。這不是最好的解釋,但是......這是他們的網頁https://getbootstrap.com/docs/4.0/layout/grid/
無論如何,我沒有使用表格,而是使用網格系統,如下所示:
<div class="row">
@if (Model.MyListOfItems is not null) // I can verify that it is not null
{
int count = 0;
@foreach (var item in Model.MyListOfItems)
{
count ;
<div class="col-6">
@Html.DisplayFor(i => item.Text)
</div>
@if (count % 2 == 0)
{
<br />
}
}
@if (count % 2 ==0)
{
<br />
}
}
</div>
我知道最后兩個if (count % 2 == 0)塊可能根本沒有必要,因為 Bootstrap 的網格系統是回應式的,但我只是喜歡明確。但是,為了每個人的理智,這應該產生相同的結果:
<div class="row">
@if (Model.MyListOfItems is not null) // I can verify that it is not null
{
@foreach (var item in Model.MyListOfItems)
{
<div class="col-6">
@Html.DisplayFor(i => item.Text)
</div>
}
}
</div>
轉載請註明出處,本文鏈接:https://www.uj5u.com/yidong/348822.html
標籤:c# html .net-core razor syntax
