c# - html 表使用 razor view mvc 渲染缓慢

Question

我有一个 800 行和 50 多列的表。（我知道 50 太多了，但我的老板故意这样想要）。问题是在 razor 视图中渲染 html 表大约需要 40 秒。在我的页面中，我有很多用于固定行和标题的 CSS

 #save-stage tbody td:first-child {
        position: sticky;
        width: 90px;
        left: 0px;
        z-index: 1;
    }

        #save-stage tbody td:first-child + td {
            position: sticky;
            left: 110px;
            width: 100px;
            z-index: 2;
        }



    #save-stage thead th:first-child {
        position: sticky;
        left: 0px;
        z-index: 100;
    }

        #save-stage thead th:first-child + th {
            position: sticky;
            left: 110px;
            z-index: 100;
        }

 #save-stage tbody td:nth-child(1) {
        background: white;
        color: black;
        font-size: 11px;
        font-weight: 400;
    }

    #save-stage tbody td:nth-child(2) {
        background: white;
        color: black;
        font-size: 11px;
        font-weight: 400;
    }

我正在使用 foreach 循环在 tbody 中创建行。

 foreach (var item in Model)
                        {
                            <tr class="text-nowrap" style="font-size: 12px; ">

                                @if (item.SDetayOrder != null || item.SDetayOrder != "")
                                {
                                    <td style="text-align: left;"><text href="#" title="Sü - S Detay" data-toggle="popover" data-content="@item.SDetayOrder">@item.OrderNo</text></td>
                                }
                                else
                                {
                                    <td style="text-align: left;">@item.OrderNo</td>
                                }

                                <td style="text-align: left;">@Convert.ToDateTime(item.OrderGelisTarihi).ToString("dd/MM/yyyy")</td>
                                <td style="text-align: left;">@Convert.ToDateTime(item.OrderPlanlamayaTeslimTarih).ToShortDateString()</td>
                                @if (item.Musteri != null && item.Musteri.Length > 8)
                                {
                                    <td style="text-align: left; min-width:115px; max-width:115px;">@item.Musteri.Substring(0, 8)</td>
                                }
                                else
                                {
                                    <td style="text-align: left; min-width:115px; max-width:115px;">@item.Musteri</td>
                                }


                                @{
                                    DateTime tarih2;
                                    if (item.SonKumasGelisTarihi != null)
                                    {
                                        tarih2 = (DateTime)item.SonKumasGelisTarihi;
                                        tarih2 = tarih2.AddDays(1);

                                        if ((DateTime)item.OrderKayitTarih >= item.SonKumasGelisTarihi || (DateTime)item.OrderKayitTarih >= (DateTime)tarih2)
                                        {
                                            <td style="text-align: center;">
                                                @{
                                                    <button class="btn btn-success denemeClass" id="tur" data-tur="KumasTermin" data-aciklama="@item.KumasTerminAciklama" data-planlamaid="@item.PlanlamaID" onclick="Digeraciklamagetir(this)"></button>
                                                }
                                            </td>
                                        }
                                        else if (item.KumasTermineKalanGun < item.KesimGerekenGun && item.KumasTerminAciklama == null)
                                        {
                                            <td style="text-align: center;">
                                                @{
                                                    <button class="btn btn-danger" id="tur" data-tur="KumasTermin" data-aciklama="@item.KumasTerminAciklama" data-planlamaid="@item.PlanlamaID" onclick="Digeraciklamagetir(this)"></button>
                                                }
                                            </td>
                                        }
                                        else if (item.KumasTerminAciklama != null && item.KumasTerminAciklama != "")
                                        {

                                            <td style="text-align: center;">
                                                @{
                                                    <button class="btn btn-warning" id="tur" data-tur="KumasTermin" data-aciklama="@item.KumasTerminAciklama" data-planlamaid="@item.PlanlamaID" onclick="Digeraciklamagetir(this)"></button>
                                                }
                                            </td>
                                        }
                                        else
                                        {
                                            <td style="text-align: center;">
                                                @{
                                                    <button class="btn btn-success" id="tur" data-tur="KumasTermin" data-aciklama="@item.KumasTerminAciklama" data-planlamaid="@item.PlanlamaID" onclick="Digeraciklamagetir(this)"></button>
                                                }
                                            </td>

                                        }
                                    }
                                    else
                                    {


                                        if ((DateTime)item.OrderKayitTarih >= item.SonKumasGelisTarihi)
                                        {
                                            <td style="text-align: center;">
                                                @{
                                                    <button class="btn btn-success" id="tur" data-tur="KumasTermin" data-aciklama="@item.KumasTerminAciklama" data-planlamaid="@item.PlanlamaID" onclick="Digeraciklamagetir(this)"></button>
                                                }
                                            </td>
                                        }
                                        else if (item.KumasTermineKalanGun < item.KesimGerekenGun && item.KumasTerminAciklama == null)
                                        {
                                            <td style="text-align: center;">
                                                @{
                                                    <button class="btn btn-danger" id="tur" data-tur="KumasTermin" data-aciklama="@item.KumasTerminAciklama" data-planlamaid="@item.PlanlamaID" onclick="Digeraciklamagetir(this)"></button>
                                                }
                                            </td>
                                        }
                                        else if (item.KumasTerminAciklama != null && item.KumasTerminAciklama != "")
                                        {

                                            <td style="text-align: center;">
                                                @{
                                                    <button class="btn btn-warning" id="tur" data-tur="KumasTermin" data-aciklama="@item.KumasTerminAciklama" data-planlamaid="@item.PlanlamaID" onclick="Digeraciklamagetir(this)"></button>
                                                }
                                            </td>
                                        }
                                        else
                                        {
                                            <td style="text-align: center;">
                                                @{
                                                    <button class="btn btn-success" id="tur" data-tur="KumasTermin" data-aciklama="@item.KumasTerminAciklama" data-planlamaid="@item.PlanlamaID" onclick="Digeraciklamagetir(this)"></button>
                                                }
                                            </td>

                                        }
                                    }
                                }

                                }
                            </tr>
                        }

我想让这个页面更快。我尝试了分页，但他们不想要分页，并且 50 个或更多列必须在一个表中。

标签： c#htmlmodel-view-controllerrazorhtml-rendering