Convert List rows into columns in c#

Question

I have a list of data. I need to convert the list rows into columns. I searched a lot for this but couldn't find a solution for this.

My Action Method:

public ActionResult Index()
{
    var obj = JsonConvert.DeserializeObject<XLDataManager>(new DataUploadService().GetDataUpload(1, 1));
    XLDataManager excelData = (XLDataManager)obj;
    List<Design> listData = new List<Design>() 
    { 
        excelData.CurrentPlan,
        excelData.Design1,
        excelData.Design2,
        excelData.Design3,
        excelData.Design4
    };

    foreach (var items in ListDesign)
    {

        DesignViewModel objDesignViewModel = new DesignViewModel()
        {
            TotalPMPMCost_29 = items.TotalPMPMCost_29,
            PlanType_30 = items.PlanType_30,
            ServicesCoveredDeductible_31 = items.ServicesCoveredDeductible_31,
            ContributionType_32 = items.ContributionType_32,
            ContributionAmount_33 = items.ContributionAmount_33,
            MedicalDeductible_36 = items.MedicalDeductible_36,
            MedicalCoinsurance_37 = items.MedicalCoinsurance_37,
            MedicalOutofPocketMax_38 = items.MedicalOutofPocketMax_38

        };

        DesignViewModelList.Add(objDesignViewModel);
    }

    return View(DesignViewModelList);
}

Model Class:

public class DesignViewModel
    {
        public float TotalPMPMCost_29 { get; set; }
        public string PlanType_30 { get; set; }
        public string ServicesCoveredDeductible_31 { get; set; }
        public string ContributionType_32 { get; set; }
        public float ContributionAmount_33 { get; set; }
        public float MedicalDeductible_36 { get; set; }
        public float MedicalCoinsurance_37 { get; set; }
        public float MedicalOutofPocketMax_38 { get; set; }

    }

View:

@model IEnumerable<HealthAppDesign.ViewModel.DesignViewModel> 
@{

    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.TotalPMPMCost_29)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.PlanType_30)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ServicesCoveredDeductible_31)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ContributionType_32)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.ContributionAmount_33)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.MedicalDeductible_36)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.MedicalCoinsurance_37)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.MedicalOutofPocketMax_38)
        </th>

    </tr>

@foreach
    (var item in Model) {
    <tr>

        <td>
            @Html.DisplayFor(modelItem => item.TotalPMPMCost_29)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.PlanType_30)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ServicesCoveredDeductible_31)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ContributionType_32)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.ContributionAmount_33)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.MedicalDeductible_36)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.MedicalCoinsurance_37)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.MedicalOutofPocketMax_38)
        </td>

    </tr>
}

</table>

I just need to display the data like below:

                        Current Plan    Design 1        Design 2        Design 3        Design 4
Total PMPM Cost         $1,000.00       $988.87         $1,254.39       $1,155.83       $1,201.74
Plan Type               HMO             PPO             PPO             HMO             HMO
Services Covered        All Services    All Services    All Services    All Services    All Services
Contribution Type       Dollar          Percent         Dollar          Dollar          Dollar
Contribution Amount     450             0.3             200             400             300
Deductible              $1,500          $4,000          $2,000          $1,500          $1,500
Coinsurance             20%             20%             0%              0%              0%
Out of Pocket Maximum   $3,000          $8,000          $4,000          $3,000          $3,000

Currently it is displaying rows as columns..

An immediate help will be appreciated. Kindly let me know if any more code is required.

Thanks

Answer 1

You will need to iterate through the list of view models for every row:

<table>
    <thead>
        <tr>
            <th><!-- Empty column for labels --></th> 
            @foreach (var item in Model) {
                <th>@Html.DisplayNameFor(model => model.Name)</th>
            }
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Total PMPM Cost</td>
            @foreach (var item in Model) {
                <td>@Html.DisplayFor(modelItem => item.TotalPMPMCost_29)</td>
            }
        </tr>
        <tr>
            <td>Plan Type</td>
            @foreach (var item in Model) {
                <td>@Html.DisplayFor(modelItem => item. PlanType_30)</td>
            }
        </tr>
        <!-- Repeat for all model properties -->
    </tbody>
</table>