在剃刀视图中,我如何在ViewModel中循环不同的IEnumerables并将其变量显示为同一行中的列?
返回一个viewmodel的实例,该实例由不同模型的IEnumerables填充到mvc视图,如下所示:
Viewmodel:
namespace example.ViewModels
{
public class ClaimModel
{
public IEnumerable<Claim> Claims { get; set; }
public IEnumerable<Member> Members { get; set; }
public IEnumerable<ID> IDs { get; set; }
}
}
返回视图的控制器是这样的:
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);
}
}
}
这是我的剃刀视图的一个片段,我循环通过一个IEnumerables在我的视图模型称为Members
:
@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>
这是循环遍历IEnumerables的常规方式。当然,我不需要ViewModel来完成这一点,因为我也可以直接将我的Members IEnumerable传递给我的视图。
现在,为了将来自三个不同IEnumerables的数据显示到同一行的列中,我必须应用什么逻辑?我想剃刀也能做到。
我需要这样的东西:
@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
。假设所有三个集合具有相同的项目计数,并且您希望在表的第n行中以3列显示所有列表中的第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个属性的项目列表,并做一个简单的循环,并在你的razor视图中显示。
创建一个视图模型来表示你的网格数据
public class ClaimRecord
{
public string ClaimName {set;get;}
public string MemberName {set;get;}
public int Id {set;get;}
}
和在action方法中,连接三个数据集,并将所需的结果投影为该类的集合,然后发送给视图
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有一个主键ClaimID, Member和ID与外键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表/Entity有一个MemberName列/属性,Claim表有一个ClaimName属性。