用IEnumerable返回一个视图模型来查看和使用剃刀将变量循环到同一行 [英] Return a viewmodel with IEnumerable's to view and use razor to loop variables into the same row

查看:141
本文介绍了用IEnumerable返回一个视图模型来查看和使用剃刀将变量循环到同一行的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在剃刀视图中,如何在ViewModel中循环使用不同的IEnumerables,并将它们的变量显示为同一行中的列?



返回一个viewmodel,这是与不同模型的IEnumerables填充到MVC视图如下:

Viewmodel:

  namespace example.ViewModels 
{

public class ClaimModel
{
public IEnumerable< Claim>索赔{get;组; }
public IEnumerable< Member>成员{get;组; }
public IEnumerable< ID> ID {get;组; }


$ b code
$ b我的控制器返回视图看起来像这样:

pre $ namespace example.Controllers
{
public class OfficeManagerController:Controller
{
私人实体db = new Entities(); //这是我的数据库

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);


$ b $ / code $ / $ p

这是我的一个片段razor视图,在哪里我通过一个名为成员的viewmodel中的一个IEnumerables循环:

  @model example.ViewModels.ClaimModel 

< div class =table list-group>
< div class =row table-bordered>
< div class =pull-left col-xs-1 h5>
声明ID:
< / div>
< div class =pull-left col-xs-2 h5>
会员名称:
< / div>
< div class =pull-left col-xs-2 h5>
会员编号:
< / div>

< / div>

@foreach(Model.Members中的var item)
{

< 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>
会员名称:
< / div>
< div class =pull-left col-xs-2 h5>
声明名称:
< / div>
< div class =pull-left col-xs-2 h5>
ID名称:
< / div>
< / div>

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





$ b

然而,这不会将我的变量插入到相同的行,而是将所有的成员名称相邻等等。



我在这里添加下面的评论,每个 Claim 一个成员和一个 ID 声明有一个名为 ClaimID 成员 ID 与外部关键字 ClaimID



 < table class =table table-striped> 
@ {var rowCounter = 0;}
@foreach(Model.Members中的var item)
{
< 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>

虽然这可以解决您的问题,但我强烈建议您改变您的方法。你应该在你的控制器中做一个连接,并发送一个包含所有这三个属性的项目列表,并做一个简单的循环,并显示在你的剃须刀视图。



模型来表示您的网格数据

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

并在您的操作方法中,加入三个数据集并将所需结果投影到此类的集合并发送到视图中。

  var list = new List< ClaimRecord>(); 
//要做的:在这里添加项目
//我不知道这三个数据集之间的关系。所以我不能告诉你如何做到这一点。
//但基本上,如果你有forign键关系,那么你需要做一个连接
return View(list);

在您的视图中

  @model List< ClaimRecord> 
< table>
@foreach(模型中的var项)
{
< tr>
< td> @ item.Id< / td>
< td> @ item.ClaimName< / td>
< td> @ item.MemberName< / td>
< / tr>
}
< / table>

编辑根据评论
$ b


Claim有一个名为ClaimID的主键,Member和ID与名为ClaimID的外键相关。

$ b $

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

  var list =(from a in db.Claims 
join a.ClaimID上的db.Members中的b等于b.ClaimID
在a.ClaimID上的db.IDs中加入c等于c.ClaimID
选择新的ClaimRecord {
Id = a.ClaimID,//根据需要更新它们
MemberName = b.MemberName,
ClaimName = a.ClaimName})。ToList();

return View(list);

请用属性名称更新投影部分(我的代码假设成员表/实体具有MemberName列/属性和Claim表具有ClaimName属性。根据您的需要更新该部分。


In a razor view, how can I loop through different IEnumerables in a ViewModel and display their variables as columns in the same row?

I Return an instance of a viewmodel which is populated with IEnumerables of different models to a mvc view like so:

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; }

    }
}

My controller which return the view looks like this:

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);
        }
    }
}

Here is a snippet of my razor view where i loop through one of the IEnumerables in my viewmodel called 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>

This is a regular way of looping through one of the IEnumerables. Of course I don't need a ViewModel to accomplish this because I might as well just pass my Members IEnumerable straight into my view.

Now what logic do I have to apply in order to display data from the three different IEnumerables into columns of the same row? I imagine its possible with razor.

I need something like this:

@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>
}

However this will not insert my variables into the same rows but will stack all the members names next to one another and so on.

I am adding here thanks to comment below that every Claim has a Member and an ID. Claim has a primary key called ClaimID and Member and ID are related to it with foreign keys called ClaimID.

解决方案

Assuming all three collections has same item count and you want to show the nth item in all the lists on the nth row of the table in 3 columns, this should work.

<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>

While this solve your problem, I strongly suggest you change your approach. You should do a join in your controller and send a list of items with all these 3 properties and do a simple loop and display in your razor view.

So create a view model to represent your grid data

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

and in your action method, join the three data sets and project the needed results a collection of this class and send to the view

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);

and in your view

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

EDIT : As per the comment.

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

You can do a join with your LINQ expression.

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);

Please update the projection part with your property names.(My code assumes that Member table/Entity has a MemberName column/property and Claim table has a ClaimName property. Update that part according to your needs.

这篇关于用IEnumerable返回一个视图模型来查看和使用剃刀将变量循环到同一行的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆