多行分为单行和多列

Question

我是一名年轻的学徒，希望在MVC中构建他的第一个应用程序。我目前正在尝试构建一个管理页面，该页面将显示员工技能矩阵的结果。

所以我试图显示信息的方式如下..

问题是......信息在表格中如下......

我不能为我的生活弄清楚我是如何做到的。

这是我目前的表格代码。

 <div class="tblOverFlow">
        <table class="table">
            <thead class="thead-default">
                <tr>
                    <th>User</th>
                    <th>Skill</th>
                </tr>
                <tr>
                    <th></th>
                    @foreach (var tableRefDbSet in Model)
                    {
                        <th>@tableRefDbSet.Skill </th>
                        <th>Interested?</th>
                    }
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <td>@item.User</td>
                    <tr>
                            <td>@item.SkillLevel</td>
                            if (item.Interested == true)
                            {
                                <td Style="background-color: green;">Y</td>
                            }
                            else
                            {
                                <td style="background-color: Red;">N</td>
                            }
                    </tr>
                }
            </tbody>
        </table>
    </div>
</div>

它仍然只是将它们堆叠在一起。我已经尝试过重新调整周围的一切，它不会像我想要的那样做！

哦，忽略内联样式，它们只是在视觉上帮助我！

虽然我正在寻找答案，但我对错误做法的简要解释也会有所帮助！

Answer 1

下面是一个例子

<强>控制器

public class UserController : Controller
{
    // GET: User
    public ActionResult Index()
    {
        var users = new Users();

        users.Add(CreateUser("Bob", 2, true, 3, false, 1, true));
        users.Add(CreateUser("Sue", 1, true, 1, true, 0, false));
        users.Add(CreateUser("Margaret", 1, true, 1, false, 2, true));

        return View(users);
    }

    private User CreateUser(string name,
                            int coffeeSkillLevel, bool coffeeInterested,
                            int typingSkillLevel, bool typingInterested,
                            int searchSkillLevel, bool searchInterested)
    {
        const string skillCoffee = "Coffee";
        const string skillTyping = "Typing";
        const string skillSearching = "Google Search";

        var user = new User() { Name = name };
        var userBobSkillCofeeMaking = new UserSkill
        {
            Skill = skillCoffee,
            SkillLevel = coffeeSkillLevel,
            IsInterested = coffeeInterested
        };

        var userBobSkillTyping = new UserSkill
        {
            Skill = skillTyping,
            SkillLevel = typingSkillLevel,
            IsInterested = typingInterested
        };

        var userBobSkillGoogleSearching = new UserSkill
        {
            Skill = skillSearching,
            SkillLevel = searchSkillLevel,
            IsInterested = searchInterested
        };

        user.UserSkills[skillCoffee] = userBobSkillCofeeMaking;
        user.UserSkills[skillTyping] = userBobSkillTyping;
        user.UserSkills[skillSearching] = userBobSkillGoogleSearching;

        return user;
    }

}

用户模型

public class User
{
    public User()
    {
        UserSkills = new Dictionary<string, UserSkill>();
    }

    public string Name { get; set; }
    public Dictionary<string, UserSkill> UserSkills { get; set; }

    public List<string> UniqueSkills
    {
        get { return UserSkills.Values.Select(x => x.Skill).Distinct().ToList(); }
    }
}

public class Users : List<User>
{
    public List<string> UniqueSkills
    {
        get
        {
            var retVal = new List<string>();

            foreach (var user in this)
            {
                retVal.AddRange(user.UniqueSkills);
            }

            return retVal.Distinct().OrderByDescending(x => x).ToList();
        }
    }

    public int ColSpan => (UniqueSkills.Count * 2);
}

UserSkill模型

public class UserSkill
{
    public string Skill { get; set; }
    public int SkillLevel { get; set; }
    public bool IsInterested { get; set; }

    public string Interested => IsInterested ? "Y" : "N";
}

<强> CSHTML

 table, td, th {
        border: 1px solid black;
    }

    table {
        border-collapse: collapse;
        width: 100%;
    }

    th {
        text-align: center;
    }

<div>
    <table class="table-bordered">
        <thead>
            <tr>
                <th>User</th>
                <th colspan="@Model.ColSpan">Skill</th>
            </tr>
        </thead>
        <tbody>
            <tr style="font-weight: bold">
                <td></td>

                @foreach (var skill in Model.UniqueSkills)
                {
                    <td>@skill</td>
                    <td>Interested</td>
                }
            </tr>
            @foreach (var user in Model)
            {
                <tr>
                    <td>@user.Name</td>

                    @foreach (var skill in Model.UniqueSkills)
                    {

                        <td>@user.UserSkills[skill].SkillLevel.ToString()</td>
                        <td>@user.UserSkills[skill].Interested</td>
                    }
                </tr>
            }
        </tbody>
    </table>
</div>

最终结果