asp.net mvc 3 razor & html表。

[英]asp.net mvc 3 razor & html table


I have UsersClass wich never be more then 10 items. How i can display user class with table in view something like this?

我有UsersClass wich超過10項。如何在視圖中顯示帶有表的用戶類?

I want to show two rows with 10 cells

我想要顯示有10個單元格的兩行

2 个解决方案

#1


10  

As always and in every ASP.NET MVC application I recommend using a view model which is adapted to the requirements of the view. So in this view you mentioned a table in which you want to group those users by 5 elements per row:

一如既往,在每一個ASP。NET MVC應用程序我推薦使用一個適合視圖需求的視圖模型。在這個視圖中,你提到了一個表格你想把這些用戶按每行5個元素進行分組:

public class MyViewModel
{
    public int Key { get; set; }
    public IEnumerable<UsersClass> Users { get; set; }
}

and then in the controller action:

然后在控制器動作中:

public ActionResult Index()
{
    // that's your domain model => a list of UsersClass
    // could be coming from wherever you want
    var users = Enumerable.Range(1, 7).Select(x => new UsersClass
    {
        Id = x
    });

    // Now let's group those users into the view model:
    // We will have 5 elements per row
    var model = users
        .Select((u, index) => new { User = u, Index = index })
        .GroupBy(x => x.Index / 5)
        .Select(x => new MyViewModel
        {
            Key = x.Key,
            Users = x.Select(y => y.User)
        });
    return View(model);
}

and finally the strongly typed view is pretty trivial:

最后,強類型視圖非常簡單

@model IEnumerable<MyViewModel>
<table>
    @foreach (var item in Model)
    {
        <tr>
            @foreach (var user in item.Users)
            {
                <td>@user.Id</td>
            }

            <!-- That's just to fill the row with the remaining
                 td if we have less than 5 users. Obviously
                 depending on your requirements you could use
                 a single td with a calculated colspan or something else
            -->
            @for (int i = item.Users.Count(); i < 5; i++)
            {
                <td></td>
            }
        </tr>
    }
</table>

Obviously this view could be simplified even further using display templates:

顯然,使用顯示模板可以進一步簡化這個視圖:

@model IEnumerable<MyViewModel>
<table>
    @Html.DisplayForModel()
</table>

and in the corresponding display template:

在相應的顯示模板中:

@model MyViewModel
<tr>
    @Html.DisplayFor(x => x.Users)
    @for (int i = item.Users.Count(); i < 5; i++)
    {
        <td></td>
    }
</tr>

and the UsersClass display template:

和UsersClass顯示模板:

@model UsersClass
<td>@user.Id</td>

and the result:

結果:

enter image description here

#2


3  

Not sure if this is exactly what you're looking for, but if it's not exact, you should be able to modify it easily:

不確定這是否是你想要的,但如果不准確,你應該能夠很容易地修改:

@* Check to make sure your user class is not null *@
@if (Model.UserClass != null)
{
    <table>
    for (int i = 1; i <= 2; i++)
    {
        <tr>
        for (int j = 1; j <= 5; j++)
        {
            <td>if (Model.UserClass[(j*i)-1] != null) { Model.UserClass[(j*i)-1] }</td>
        }
        </tr>
    }
    </table>
}

I wrote this pretty quickly, but this should be close to what you need.

我寫得很快,但這應該接近你需要的。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2012/05/08/86b98c1152fd28b1d4ac86fe7427d86c.html



 
  © 2014-2022 ITdaan.com 联系我们: