複数の行を1行と複数の列にする

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> 

まだそれらをお互いの下に重ねて表示します。私は周りのすべてをrejiggingしようとしたし、私はそれが欲しいだけではできません！

ああ、インラインスタイルを無視して、私は視覚的に援助するだけです！

私は答えを探していますが、私が間違ったことについての簡単な説明も役立ちます！以下

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モデル

の例です210

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>

最終結果