asp.net mvc - 返回一个带有 IEnumerable 的视图模型,用于查看并使用 razor 将变量循环到同一行中



在剃刀视图中,我如何在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, MemberID有一个外键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属性。

相关内容

  • 没有找到相关文章

最新更新