如何在 MVC 视图中从一个模块创建多个表？

【问题标题】：How to create multiple tables from one module in MVC view?如何在 MVC 视图中从一个模块创建多个表？
【发布时间】：2020-05-29 12:38:24
【问题描述】：

我需要从 mvc 视图中的一个模块创建多个表，我创建了 2 个标题和 2 个 foreach，但是当我运行视图时，它没有分开，第二组列标题没有出现在开头的一组标题列视图，如何分隔视图并显示多个表，包括表头和列？

这是我的查看代码：

@model IEnumerable<AljawdahNewSite.Models.Orders_Tables>
@{
    ViewBag.Title = "Details1";
    Layout = "~/Views/Shared/_LayoutPatients.cshtml";
    var ids = new List<int>() { 1, 2, 3, 4 };
}

那么这是第一个表：

@if (ids.Contains(Model.First().labCashView.DEPTID.GetValueOrDefault()))
{
 <div class="tab-content">
     <div class="tab-pane container active p-0" style="margin-left:15px">
         <hr />
         <dl class="horizontal" style="border:solid">
             <dt style="width: 20%;display: inline-block;color:blue;">@Html.DisplayNameFor(model => model.labCashView.Patient_Name)</dt>
             <dd style="width: 25%;display: inline-block;margin: 0px;margin-left:-50px">@Html.DisplayFor(model => model.FirstOrDefault().labCashView.Patient_Name)</dd>
             <dt style="width: 22%;display: inline-block;color:blue;">@Html.DisplayNameFor(model => model.labCashView.Customer_Name)</dt>
             <dd style="width: 25%;display: inline-block;margin: 0px;margin-left:0px">@Html.DisplayFor(model => model.FirstOrDefault().labCashView.Customer_Name)</dd>
             <dt style="width: 20%;display: inline-block;color:blue;">@Html.DisplayNameFor(model => model.labCashView.Patient_No)</dt>
             <dd style="width: 25%;display: inline-block;margin: 0px;margin-left:-50px">@Html.DisplayFor(model => model.FirstOrDefault().labCashView.Patient_No)</dd>
             <dt style="width: 22%;display: inline-block;margin-left:0px;color:blue;">@Html.DisplayNameFor(model => model.labCashView.Collection_Date)</dt>
             <dd style="width: 25%;display: inline-block;margin: 0px;margin-left:0px">@Html.DisplayFor(model => model.FirstOrDefault().labCashView.Collection_Date)</dd>
             <dt style="width: 20%;display: inline-block;color:blue;">@Html.DisplayNameFor(model => model.labCashView.SEX)</dt>
             <dd style="width: 20%;display: inline-block;margin: 0px;margin-left:-50px">@Html.DisplayFor(model => model.FirstOrDefault().labCashView.SEX)</dd>
             <dt style="width: 22%;display: inline-block;margin-left:60px;color:blue;">@Html.DisplayNameFor(model => model.labCashView.Receiving_Date)</dt>
             <dd style="width: 25%;display: inline-block;margin: 0px;margin-left:0px">@Html.DisplayFor(model => model.FirstOrDefault().labCashView.Receiving_Date)</dd>
             <dt style="width: 20%;display: inline-block;color:blue;">@Html.DisplayNameFor(model => model.labCashView.AGE)</dt>
             <dd style="width: 20%;display: inline-block;margin: 0px;margin-left:-50px">@Html.DisplayFor(model => model.FirstOrDefault().labCashView.AGE)</dd>
             <dt style="width: 22%;display: inline-block;margin-left:60px;color:blue;">@Html.DisplayNameFor(model => model.labCashView.Report_Date)</dt>
             <dd style="width: 25%;display: inline-block;margin: 0px;margin-left:0px">@Html.DisplayFor(model => model.FirstOrDefault().labCashView.Report_Date)</dd>
             <dt style="width: 20%;display: inline-block;color:blue;">@Html.DisplayNameFor(model => model.labCashView.order_number)</dt>
             <dd style="width: 25%;display: inline-block;margin: 0px;margin-left:-50px">@Html.DisplayFor(model => model.FirstOrDefault().labCashView.order_number)</dd>
         </dl>
     
     
         <table id="menu" class="table table-bordered table-striped">
             <tr>

                 <td> test name    </td>
                 <td> result  </td>
                 <td> From Range   </td>
                 <td> To Range </td>
                 <td> Other Range    </td>
                 <td> Report Date  </td>


             </tr>
             <tbody>
             @foreach (var item in Model.Where(x => ids.Contains(x.labCashView.DEPTID.GetValueOrDefault())))
             {
                     <tr>

                         <td>@item.labCashView.Test_Name</td>
                         <td>@item.labCashView.Result</td>
                         <td>@item.labCashView.Low_Range</td>
                         <td>@item.labCashView.High_Range</td>
                         <td style="width:20%">@item.labCashView.Text_Range</td>
                         <td>@item.labCashView.Report_Date.Value.ToShortDateString()</td>


                     </tr>

             }
                 </tbody>


         </table>
         <hr />


     </div>
 </div>

}

第二张桌子：

     @if (Model.First().labCashView.DEPTID == 6)
 {   <div class="tab-content">
         <div class="tab-pane container fade p-0" style="margin-left:15px">
             <hr />
            
                 <dl class="horizontal" style="border:solid">
                     <dt style="width: 20%;display: inline-block;color:blue;">@Html.DisplayNameFor(model => model.labCashView.Patient_Name)</dt>
                     <dd style="width: 25%;display: inline-block;margin: 0px;margin-left:-50px">@Html.DisplayFor(model => model.FirstOrDefault().labCashView.Patient_Name)</dd>
                     <dt style="width: 22%;display: inline-block;color:blue;">@Html.DisplayNameFor(model => model.labCashView.Customer_Name)</dt>
                     <dd style="width: 25%;display: inline-block;margin: 0px;margin-left:0px">@Html.DisplayFor(model => model.FirstOrDefault().labCashView.Customer_Name)</dd>
                     <dt style="width: 20%;display: inline-block;color:blue;">@Html.DisplayNameFor(model => model.labCashView.Patient_No)</dt>
                     <dd style="width: 25%;display: inline-block;margin: 0px;margin-left:-50px">@Html.DisplayFor(model => model.FirstOrDefault().labCashView.Patient_No)</dd>
                     <dt style="width: 22%;display: inline-block;margin-left:0px;color:blue;">@Html.DisplayNameFor(model => model.labCashView.Collection_Date)</dt>
                     <dd style="width: 25%;display: inline-block;margin: 0px;margin-left:0px">@Html.DisplayFor(model => model.FirstOrDefault().labCashView.Collection_Date)</dd>
                     <dt style="width: 20%;display: inline-block;color:blue;">@Html.DisplayNameFor(model => model.labCashView.SEX)</dt>
                     <dd style="width: 20%;display: inline-block;margin: 0px;margin-left:-50px">@Html.DisplayFor(model => model.FirstOrDefault().labCashView.SEX)</dd>
                     <dt style="width: 22%;display: inline-block;margin-left:60px;color:blue;">@Html.DisplayNameFor(model => model.labCashView.Receiving_Date)</dt>
                     <dd style="width: 25%;display: inline-block;margin: 0px;margin-left:0px">@Html.DisplayFor(model => model.FirstOrDefault().labCashView.Receiving_Date)</dd>
                     <dt style="width: 20%;display: inline-block;color:blue;">@Html.DisplayNameFor(model => model.labCashView.AGE)</dt>
                     <dd style="width: 20%;display: inline-block;margin: 0px;margin-left:-50px">@Html.DisplayFor(model => model.FirstOrDefault().labCashView.AGE)</dd>
                     <dt style="width: 22%;display: inline-block;margin-left:60px;color:blue;">@Html.DisplayNameFor(model => model.labCashView.Report_Date)</dt>
                     <dd style="width: 25%;display: inline-block;margin: 0px;margin-left:0px">@Html.DisplayFor(model => model.FirstOrDefault().labCashView.Report_Date)</dd>
                     <dt style="width: 20%;display: inline-block;color:blue;">@Html.DisplayNameFor(model => model.labCashView.order_number)</dt>
                     <dd style="width: 25%;display: inline-block;margin: 0px;margin-left:-50px">@Html.DisplayFor(model => model.FirstOrDefault().labCashView.order_number)</dd>
                 </dl>
            
             
         
        
             <table id="menu1" class="table table-bordered table-striped">
                 <tr>

                     <td> test name    </td>
                     <td> result  </td>
                     <td> From Range   </td>
                     <td> To Range </td>
                     <td> Other Range    </td>
                     <td> Report Date  </td>


                 </tr>
                 <tbody>
                     @foreach (var item in Model.Where(x => x.labCashView.DEPTID == 6))
                     {
                         <tr>

                             <td>@item.labCashView.TEXT</td>
                             <td>@item.labCashView.TEST_RESULT</td>
                             <td>@item.labCashView.UNIT</td>
                             <td>@item.labCashView.Text_Range</td>
                             <td>@item.labCashView.Report_Date.Value.ToShortDateString()</td>


                         </tr>
                     }
                 </tbody>

             </table>
             <hr />



         </div>
    </div>

 }

当在浏览器中运行视图时，它会出现一个标题和一个表格，第二个标题和第二个 foreach 没有出现：

第一个表看起来像图片一样正确：

如何分隔 2 个表格并在一页中分别显示每个标题和数据？

【问题讨论】：

  • 看起来您的第二张表在 foreach 上只有 (5) 列。 tbody 也位于循环之外（第二个表迭代），这与第一个代码循环（迭代内部有 tbody）不同。
  • @RobScott 为什么它应该是相同的 (5) 列？关于 tbody 我后来在遇到这个问题时添加了它，也没有 tbody 相同的输出
  • 第二个表在中使用迭代是正确的结构。匹配第一个表的代码（一个 与其中的多个 元素的迭代）。此外，使用浏览器的开发人员工具将有助于诊断此问题（例如，在表格中的 RIGHT+CLICK 和“检查”）
  • @Abdullah ids 集合的值是什么？你有 if(first Condition) 和 else if(second condition) 所以两个条件都会出现一个表格。这取决于DEPTID 值。更多信息，请使用 部分视图 分解 html 代码。
  • @Sajid ids 是变量持有部门 id 我有 7 个部门和部门 1、2、3 和 4 有相同的结果报告部门 5 和 6 和 7 每个部门有不同的结果形式，所以我需要将它们收集在一个视图中。好的，我将检查部分视图如何使用它，你是正确的检查显示一个表下的所有行，我更改了它但结果仍然相同我做了 2 个 if 语句

标签： html asp.net-mvc model-view-controller


【解决方案1】：

1- 创建类：

public class TablesModel
    {
        public IEnumerable<Model1> model1 { get; set; }

        public IEnumerable<Model2> model2 { get; set; }
    }

2- 如果要与 id 建立关系，请创建控制器使用 .Where() 并与另一个表使用关系，您可以使用 .Include()：

public ActionResult Index()  
        {  
            var tables = new TablesModel
            {  
                model1 =db.Model1.ToList(),  
                model2 =db.Model2.ToList(),  

            };  
            return View(tables);

3- 为控制器创建空视图并使用如下代码：

<div class="tab-content">  

        <h5 class="text-uppercase p-2 text-center">model list</h5>  
        <table class="table table-bordered table-striped">  
            <thead class="thead-dark text-white">  
                <tr>  
                    <th>@Html.DisplayNameFor(m => Model.model1.FirstOrDefault().Name)</th>  
                    <th>@Html.DisplayNameFor(m => Model.model1.FirstOrDefault().Age)</th>  

                </tr>  
            </thead>  
            <tbody>  
                @foreach (var item in Model.model1 )  
                {  
                    <tr>  
                        <td>@item.Name</td>  
                        <td>@item.Age</td>  

                    </tr>  
                }  
            </tbody>  
        </table>  
    </div> 

<div class="tab-content">  

        <h5 class="text-uppercase p-2 text-center">model list</h5>  
        <table class="table table-bordered table-striped">  
            <thead class="thead-dark text-white">  
                <tr>  
                    <th>@Html.DisplayNameFor(m => Model.model2.FirstOrDefault().Address)</th>  
                    <th>@Html.DisplayNameFor(m => Model.model2.FirstOrDefault().Mobile)</th>  

                </tr>  
            </thead>  
            <tbody>  
                @foreach (var item in Model.model2 )  
                {  
                    <tr>  
                        <td>@item.Address</td>  
                        <td>@item.Mobile</td>  

                    </tr>  
                }  
            </tbody>  
        </table>  
    </div>

【讨论】：

    猜你喜欢
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode