Vertical table header in ASP.NET MVC 5

Question

Vertical table header in ASP.NET MVC 5

Can anyone recommend how to reposition Headers from the top to the left column vertically? I would also like to know if there are any jQuery plugins available for directly editing tables from a grid with examples :) Since I am new to this...

<table class="table table-striped table-hover">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Age)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Country)
        </th>

        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Age)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.Country)
            </td>

            <td>
                @Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
                @Html.ActionLink("Details", "Details", new { id = item.Id }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.Id })
            </td>
        </tr>
    }

</table>

https://i.sstatic.net/mhWYL.png

jquery css asp.net asp.net-mvc

Answer 1

Answer №1

Give this a shot...

<table class="table table-striped table-hover">
    <tr>
        <td>
            @Html.DisplayNameFor(model => model.Name)
        </td>
        @foreach (var item in Model)
        {
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
        }
    </tr>
    <tr>
        <td>
            @Html.DisplayNameFor(model => model.Age)
        </td>
        @foreach (var item in Model)
        {
            <td>
                @Html.DisplayFor(modelItem => item.Age)
            </td>
        }
    </tr>
    <tr>
        <td>
            @Html.DisplayNameFor(model => model.Country)
        </td>
        @foreach (var item in Model)
        {
            <td>
                @Html.DisplayFor(modelItem => item.Country)
            </td>
        }
    </tr>
    <tr>
        <td>
            &nbsp;
        </td>
        @foreach (var item in Model)
        {
            <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.Id })
            @Html.ActionLink("Details", "Details", new { id = item.Id })
            @Html.ActionLink("Delete", "Delete", new { id = item.Id })
            </td>
        }
    </tr>
</table>

Answer 2

Give this a shot...

<table class="table table-striped table-hover">
    <tr>
        <td>
            @Html.DisplayNameFor(model => model.Name)
        </td>
        @foreach (var item in Model)
        {
            <td>
                @Html.DisplayFor(modelItem => item.Name)
            </td>
        }
    </tr>
    <tr>
        <td>
            @Html.DisplayNameFor(model => model.Age)
        </td>
        @foreach (var item in Model)
        {
            <td>
                @Html.DisplayFor(modelItem => item.Age)
            </td>
        }
    </tr>
    <tr>
        <td>
            @Html.DisplayNameFor(model => model.Country)
        </td>
        @foreach (var item in Model)
        {
            <td>
                @Html.DisplayFor(modelItem => item.Country)
            </td>
        }
    </tr>
    <tr>
        <td>
            &nbsp;
        </td>
        @foreach (var item in Model)
        {
            <td>
            @Html.ActionLink("Edit", "Edit", new { id = item.Id })
            @Html.ActionLink("Details", "Details", new { id = item.Id })
            @Html.ActionLink("Delete", "Delete", new { id = item.Id })
            </td>
        }
    </tr>
</table>

Answer 3

Answer №2

If you want to display the data in a table horizontally, you need to ensure that the data is selected in a list format. To achieve this, you will have to adjust the structure of your ViewModel as follows:

public class TestViewModel
{
    public List<string> Name {get; set;}
    public List<int> Age {get; set;}
    public List<string> Country {get; set;}
}

For displaying the data in the View using a table:

@model ProjectName.Models.ViewModels.TestViewModel

<table class="table table-striped table-hover">

    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        @foreach (var item in Model.Name)
        {
         @Html.DisplayFor(modelItem => item.Name)
        }
    </tr>

    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Age)
        </th>
        @foreach (var item in Model.Age)
        {
            @Html.DisplayFor(modelItem => item.Age)
        }
    </tr>

    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Country)
        </th>
        @foreach (var item in Model.Country)
        {
            @Html.DisplayFor(modelItem => item.Country)
        }
    </tr>
</table>

Answer 4

If you want to display the data in a table horizontally, you need to ensure that the data is selected in a list format. To achieve this, you will have to adjust the structure of your ViewModel as follows:

public class TestViewModel
{
    public List<string> Name {get; set;}
    public List<int> Age {get; set;}
    public List<string> Country {get; set;}
}

For displaying the data in the View using a table:

@model ProjectName.Models.ViewModels.TestViewModel

<table class="table table-striped table-hover">

    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Name)
        </th>
        @foreach (var item in Model.Name)
        {
         @Html.DisplayFor(modelItem => item.Name)
        }
    </tr>

    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Age)
        </th>
        @foreach (var item in Model.Age)
        {
            @Html.DisplayFor(modelItem => item.Age)
        }
    </tr>

    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Country)
        </th>
        @foreach (var item in Model.Country)
        {
            @Html.DisplayFor(modelItem => item.Country)
        }
    </tr>
</table>

Vertical table header in ASP.NET MVC 5

Answer №1

Answer №2

Similar questions

Is it possible to achieve impersonation all the way from an ASP.NET website to a WCF service?

Form-check radio buttons within the form-check-inline class of Bootstrap 4.1.1

How come my blocks are spilling over into other blocks?

The sorting order is not preserved by the asmSelect jQuery plugin

Incorporate external visuals into printed materials

Unable to add items to the global JavaScript array variable

Creating a static menu icon and implementing a wide dropdown menu in Bootstrap 4

No reply received from the RESTful web service triggered by jQuery using JSON

Utilizing JQuery to extract the image title and render it as HTML code

Unable to horizontally center ul element within Materialize navigation content

Having trouble with the jQuery select2 AJAX functionality?

Click event dynamically bound to list items

Tips for utilizing javascript to reset the heightline of the preceding keyword during a keyword search

Tips for implementing Validator controls with controls in addition to TextBox?

Creating a tournament bracket in HTML using a table structure

Challenges with handling Ajax responses in Ruby on Rails

Discovering if a div element has children using Selenium IDE

Creating a reusable component in Angular with a shared selector

Interactive canvas feature in a browser window with scrolling capabilities (drag and drop functionality)

Creating JavaScript Objects from HTML Form data with the help of serializeJSON