Use Repeater or HTML table in ASP.NET Core MVC?-CodePudding

I'm going to take a few courses in ASP.NET Core MVC and for the frontend HTML stuff I am finding a varied number of examples on how a task should be completed.

The task in question is to display a list of products which contains an image, title, short description, price and View More or Add button for each product.

In webforms, I used to grab a repeater and then used the RowBound event to carry out other functionality.

When I first started to learn ASP.NET MVC, there were no repeaters or gridviews, but recently I have noticed these in the toolbox. The problem I found with these controls in webforms was it added a lot of additional Javascript so when it came to adding CSP we couldn't as these controls broke the page when certain events were triggered.

Fast forward to today and ASP.NET Core MVC can use a similar approach use a HTML table and maybe dataTable to do the same thing (I think from my research) using JQuery, Ajax etc.

My question is, are the available repeater/gridview controls in ASP.NET Core MVC any better/same as webforms? Should I invest in learning in other HTML/jQuery third party controls instead?

Going a little further forward, I would like whichever is the preferred method to also be inline with ASP.NET Core 6 so there isn't a huge learning curve so appreciate any answers someone can provide as to what they have done for controls such as repeater/gridview in ASP.NET Core MVC as I'm pretty confused what should be used.

CodePudding user response：

The fact that in modern asp.net applications is that we are using loops to render items. For instance, if you want to render a list you will have something like this:

@model IEnumerable<ViewComponentSample.Models.TodoItem>

<ul>
    @foreach (var todo in Model)
    {
        <li>@todo.Name</li>
    }
</ul>

Where you are rendering all items in the model defined at the top of the page. Which is being passed to the view from the controller.

And yes you can all kind of loops such as @for, @foreach, @while, and @do while based on your situation.

This allows you to render all kinds of items like rendering table rows, bootstrap cards, etc.

And even to make it enhance it furthermore you can create a partial and render items dynamically and improve the code readability and maintainability.

Partials are just a razor markup file that renders HTML output within another markup file's rendering output

@foreach (var product in Model.Products)
{
    <partial name="_ProductPartial" model="product" />
}

Read further at Microsoft docs: Create view component

Read further at Microsoft docs: Render partials in a loop

Read further at Microsoft docs: Looping in asp.net

CodePudding user response：

You can easily list your products using Asp.Net Core Razor.

In your .cshtml file you can use such a razor code.

        <ul>
        @foreach (var product in products) // 'products' is your Model
        { 
                <li>@product.Name</<li>>
                <li>@product.CreationDate</li>
                <li>@product.Description</li>
                <li><img src="~/img/@product.Picture" alt="[email protected]"/></li>
        }
        </ul>

CodePudding user response：

Here is an introduction about razor:

Razor is a markup syntax for embedding .NET based code into webpages. The Razor syntax consists of Razor markup, C#, and HTML. Files containing Razor generally have a .cshtml file extension. Razor is also found in Razor component files (.razor). Razor syntax is similar to the templating engines of various JavaScript single-page application (SPA) frameworks, such as Angular, React, VueJs, and Svelte.

As the introduction says, You can use c# code in razor page. For Example, You can use Looping like @for, @foreach, @while, and @do while in razor.

More details you can refer to Razor syntax reference for ASP.NET Core.