How to create a dynamic table in ASP.NET MVC

Question

I am creating a fantasy football website. A user can select up to 5 players on one page and the click "Compare" so see a more detailed comparison of those particular players. I've pulled in stats from NFl's API page which lists the stats in 91 different categories. However, not all stat categories apply to all kinds of players (e.g. a kicker doesn't use "passing yards").

When a user reaches the "Compare" page, I want the table of stats to be created with only the pertinent statistics. I currently have a view model which contains all 91 categories and in my controller I run one of 4 different queries for the stats, based on which position the player plays. But how to I then only show the specific/appropriate stats for that player in the view?

One option I can think of is to load all of the columns and then hide those which don't apply using jQuery, but is there a better way of doing this with C#?

public class PlayerIndexViewModel
{
    public Player player { get; set; }
    public PlayerBackground playerBackground { get; set; }
    public Team team { get; set; }
    public WeekStat weekStat { get; set; }

    public PlayerIndexViewModel() { }
    public PlayerIndexViewModel(Player p, PlayerBackground pb, Team t, WeekStat w)
    {
        player = p;
        playerBackground = pb;
        team = t;
        weekStat = w;
    }

    //  QB stats  1-19, 30-32
    //  RB stats  1, 13-27, 30-32
    //  WR stats  1, 13-27, 30-32
    //  TE stats  1, 13-27, 30-32
    //  K stats   1, 33-44
    //  DEF stats 1, 45-69

    // GP
    [Display(Name = "GP")]
    public double statCat_1 { get; set; }
    [Display(Name = "Pass Att")]
    public double statCat_2 { get; set; }
    [Display(Name = "Pass Comp")]
    public double statCat_3 { get; set; }
    ...

In my controller:

[HttpPost]
public ActionResult Compare(FormCollection f)
{
    ...
    if (position == "QB")
    {
        var statAggs = from sw in db.WeekStats
                       where sw.season == 2014
                       group sw by sw.playerId into ps
                       select new //WeekStat
                       {
                           playerId = ps.Key,
                           statCat_1 = ps.Sum(x => x.statCat_1),
                           statCat_2 = ps.Sum(x => x.statCat_2),
                           statCat_3 = ps.Sum(x => x.statCat_3),
                           statCat_4 = ps.Sum(x => x.statCat_4),
                           statCat_5 = ps.Sum(x => x.statCat_5),
              ...

In my view:

<div class="row">
<div class="col-lg-12 col-md-12 " style="display: inline-block; overflow-x:scroll; padding:0px;">
    <table class="table table-striped table-hover " id="tablePlayers" style="margin-bottom:0px;" >
        <thead>
            <tr>
                <th ></th>
                <th >
                    @Html.DisplayNameFor(model => model.player.playerName)
                </th>
                <th >
                    @Html.DisplayNameFor(model => model.player.position)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.team.teamName)
                </th>               
                <th>
                    @Html.DisplayNameFor(model => model.statCat_1)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.statCat_2)
                </th>
            ...

Basically, how do i dynamically create the table with only the appropriate statistics for that particular player's position?

Answer 1

I'm just thinking out loud here, but can't you create a new html helper? Instead of @Html.DisplayNameFor(), something like @Html.DisplayStatHeader()? Put the <th></th> generation in that method as well.

For the model, maybe you could use nullable types? Such as:

public double? statCat_1 { get; set; }

The idea is that property will only be initialized if the stat exists. Therefore you check for nulls in @Html.DisplayStatHeader() to determine if a category should be shown.