Return 一个带有 IEnumerable 的视图模型，用于查看和使用 razor 将变量循环到同一行

Question

在 razor 视图中，如何循环遍历 ViewModel 中的不同 IEnumerable 并将它们的变量显示为同一行中的列？

我 Return 一个视图模型的实例，它填充了不同模型的 IEnumerables 到 mvc 视图，如下所示：

视图模型：

namespace example.ViewModels
{

    public class ClaimModel
    {
        public IEnumerable<Claim> Claims { get; set; }
        public IEnumerable<Member> Members { get; set; }
        public IEnumerable<ID> IDs { get; set; }

    }
}

我的控制器，return 视图如下所示：

namespace example.Controllers
{
    public class OfficeManagerController : Controller
    {
        private Entities db = new Entities(); //This is my database

        public ActionResult Index()
        {
            IEnumerable<Member> member = db.Members.OrderByDescending(b => b.ClaimID);
            IEnumerable<Claim> claim = db.Claims.OrderByDescending(b => b.ClaimID);
            IEnumerable<ID> id = db.IDs;
            ClaimModel model = new ClaimModel { IDs = id, Members = member, Claims = claim };

            return View(model);
        }
    }
}

这是我的 razor 视图的一个片段，我在其中循环遍历我的视图模型中名为 Members:

的 IEnumerables 之一

@model example.ViewModels.ClaimModel

<div class="table list-group ">
    <div class="row table-bordered ">
        <div class="pull-left col-xs-1 h5">
            Claim ID:
        </div>
        <div class="pull-left col-xs-2 h5">
            Member Name:
        </div>
        <div class="pull-left col-xs-2 h5">
            Member ID:
        </div>

    </div>

    @foreach (var item in Model.Members)
    {

        <div class="pull-left col-xs-1 h5">
            @Html.DisplayFor(modelItem => item.ClaimID)
        </div>
        <div class="pull-left col-xs-2 ">
            @Html.DisplayFor(modelItem => item.Name)
        </div>
        <div class="pull-left col-xs-2 ">
            @Html.DisplayFor(modelItem => item.MemberID)
        </div>

    }

</div>

这是循环遍历其中一个 IEnumerable 的常规方法。当然，我不需要 ViewModel 来完成此操作，因为我还不如将我的 Members IEnumerable 直接传递到我的视图中。

现在我必须应用什么逻辑才能将来自三个不同 IEnumerable 的数据显示到同一行的列中？我想用剃须刀是可能的。

我需要这样的东西：

@model example.ViewModels.ClaimModel

<div class="table list-group ">
    <div class="row table-bordered ">
        <div class="pull-left col-xs-1 h5">
            Member Name:
    </div>
    <div class="pull-left col-xs-2 h5">
        Claim Name:
    </div>
    <div class="pull-left col-xs-2 h5">
        ID Name:
    </div>
</div>

@foreach (var item in Model.Members)
{
    <div class="pull-left col-xs-1 h5">
        @Html.DisplayFor(modelItem => item.Name)
    </div>
}
@foreach (var item in Model.Claims)
{
    <div class="pull-left col-xs-1 h5">
        @Html.DisplayFor(modelItem => item.Name)
    </div>
}
@foreach (var item in Model.IDs)
{
    <div class="pull-left col-xs-1 h5">
        @Html.DisplayFor(modelItem => item.Name)
    </div>
}

然而，这不会将我的变量插入到相同的行中，而是会将所有成员名称并排堆叠，依此类推。

我在这里添加感谢下面的评论，每个 Claim 都有一个 Member 和一个 ID。 Claim 有一个名为 ClaimID 的主键，Member 和 ID 与名为 ClaimID.

的外键相关联

Answer 1

假设所有三个集合都具有相同的项目计数，并且您想要在 3 列中的 table 第 n 行的所有列表中显示第 n 个项目，这应该可行。

<table class="table table-striped">
    @{ var rowCounter = 0;}
    @foreach (var item in Model.Members)
    {
        <tr>
            <td>
                 @item.Name
            </td>
            <td>
                @if (Model.Claims.Count()>= rowCounter)
                {
                    <span>@Model.Claims[rowCounter].Name</span>
                }    
            </td>
                <td>
                @if (Model.IDs.Count()>= rowCounter)
                {
                    <span>@Model.IDs[rowCounter].Name</span>
                }
            </td>

        </tr>
        rowCounter++;
    }
</table>

虽然这解决了你的问题，我强烈建议你改变你的方法。你应该在你的控制器中加入并发送一个包含所有这 3 个属性的项目列表，然后做一个简单的循环并显示在您的剃刀视图中。

因此创建一个视图模型来表示您的网格数据

public class ClaimRecord
{
  public string ClaimName {set;get;}
  public string MemberName {set;get;}
  public int Id {set;get;}
}

并在您的操作方法中，加入三个数据集并将所需的结果投射到这个 class 的集合中并发送到视图

var list = new List<ClaimRecord>();
//to do: Add items to the list here 
// I don't know the relation between these 3 data sets. So i can't tell yo how to do that.
// But basically, if you have forign key relationship or so, you need to do a join
return View(list);

在你看来

@model List<ClaimRecord>
<table>
@foreach(var item in Model)
{
  <tr>
     <td>@item.Id</td>
     <td>@item.ClaimName</td>
     <td>@item.MemberName</td>
  </tr>
}
</table>

编辑：根据评论。

Claim has a primary key called ClaimID and Member and ID are related to it with foreign keys called ClaimID.

您可以使用 LINQ 表达式进行连接。

var list = (from a in db.Claims
    join b in db.Members on a.ClaimID equals b.ClaimID 
    join c in db.IDs on a.ClaimID equals c.ClaimID 
    select new ClaimRecord {
                            Id = a.ClaimID,  //Update these as needed
                            MemberName = b.MemberName,
                            ClaimName = a.ClaimName }).ToList();

return View(list);

请使用您的属性名称更新投影部分。（我的代码假设 Member table/Entity 有一个 MemberName column/property 并且 Claim table 有一个 ClaimName 属性.根据你的需要更新那部分。

Return 一个带有 IEnumerable 的视图模型，用于查看和使用 razor 将变量循环到同一行

Return a viewmodel with IEnumerable's to view and use razor to loop variables into the same row

asp.net-mvc

ienumerable

foreach

viewmodel

razor