Is there a way to change how data is presented in an MVC view page?

Reply

AppDev01

Member

126 Points

541 Posts

Is there a way to change how data is presented in an MVC view page?

Jan 21, 2020 04:20 PM|AppDev01|LINK

So I was attempting to use telerik thinking that it would be easy to change how my page looks.

But it appears telerik looks just about the same as he default visual studio wizard pages.

Actually it look much more bland.

I am not sure what I was expecting from Telerik... I thought it was some type of fancy overlay that allowed users to do fancy view and stuff.

Look Like I was wrong.

So anyway what I am wanting to know is there an easy way to change a row-wise view to a column wise view without having to do all that <tr></tr> stuff.

Or us that the only way?

Here is what I have and its Row-wise

@*@model IEnumerable<JobsOpeningBackendSite.JOBS_POST_TBL>*@


@{
    Layout = "";
}


@model IEnumerable<JobsOpeningBackendSite.VIEW_MODELS.JobsIndex_ViewModel_Class>

@{
//ViewBag.Title = "Index";
}

@*<h2>Index</h2>*@

<p>
    @*@Html.ActionLink("Create New", "Create")*@
</p>
<table class="table">
    <tr>
        <th>
            @*@Html.DisplayNameFor(model => model.POSIT_POSTING_DATE)*@
        </th>
        <th>
            @*@Html.DisplayNameFor(model => model.POSIT_CLOSING_DATE)*@
        </th>
        <th>
            @Html.DisplayNameFor(model => model.POSIT_NUMBER)
        </th>
        <th>
            @*@Html.DisplayNameFor(model => model.POSIT_DESCRIPTION)*@
        </th>
        @*<th>
            @Html.DisplayNameFor(model => model.POSIT_POST_STATUS)
        </th>*@
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
    <tr>
        <td>
            @*@Html.DisplayFor(modelItem => item.POSIT_POSTING_DATE)*@
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.POSIT_DESCRIPTION)
        </td>

        <td>
            @Html.DisplayFor(modelItem => item.POSIT_NUMBER)
        </td>
        
        <td>
            @Html.DisplayFor(modelItem => item.POSIT_CLOSING_DATE)
        </td>

        <td>
            @*@Html.DisplayFor(modelItem => item.POSIT_POST_STATUS)*@
        </td>
        <td>
            @*@Html.ActionLink("Edit", "Edit", new { id = item.PRID }) |
            @Html.ActionLink("Details", "Details", new { id = item.POSIT_NUMBER }) |
            @Html.ActionLink("Delete", "Delete", new { id = item.PRID })*@
        </td>
    </tr>
    }

</table>

Are there tools made for razor that would allow me to do this quickly?

At present my data displays like this:

        Position Number		
New Job	1234	01/30/2020		
This is the Second Job Listed	2343	02/15/2020		
This is an old Job Posting	3422	12/31/2019

I would Like it to display Like THis:

	
New Job	
Position Number	1234	
01/30/2020		

This is the Second Job Listed	
Position Number	2343	
02/15/2020
		
This is an old Job Posting
Position Number	3422	
12/31/2019

Thanks in advance!

Reply

mgebhard

All-Star

45921 Points

19996 Posts

Re: Is there a way to change how data is presented in an MVC view page?

Jan 21, 2020 04:44 PM|mgebhard|LINK

Basic HTML.

@foreach (var item in Model)
{
	<div>
		<div>@Html.DisplayFor(modelItem => item.POSIT_DESCRIPTION)</div>
		<div>@Html.DisplayFor(modelItem => item.POSIT_NUMBER)</div>
		<div>@Html.DisplayFor(modelItem => item.POSIT_CLOSING_DATE)</div>
	</div>
	<hr />
}

It is up to you apply styles to the <div> tags or whatever HTML you decide is appropriate. Maybe the bootstrap grid system, for example, which you can learn by reading the Bootstrap docs.

https://getbootstrap.com/docs/4.0/layout/grid/