Simple scrollable list in ASP.NET Core MVC

huangapple go评论47阅读模式
英文:

Simple scrollable list in ASP.NET Core MVC

问题

我刚刚开始尝试进行Web应用程序开发,特别是ASP.NET Core MVC。

我想要创建一个简单的列表,其中每个项目只是一个字符串,并且它有两个可能的图标之一,就像屏幕截图上的那样。

我尝试了自己进行研究,但似乎有很多不同的方法来创建不同类型的列表,我不知道该选择哪种方法,也不知道哪种方法适合我的目的。我会感激一些关键字或示例。

Simple scrollable list in ASP.NET Core MVC

英文:

I've just started playing with web-app development, ASP.NET Core MVC in particular.

I want to make a simple list, where every item is just a string, and it has one of two possible icons assigned, like on the screenshot.

I tried researching this by myself, but there seem to be so many ways to make different lists, that I don't know what to choose and what is appropriate for the purpose. I'd appreciate some keywords or examples.

Simple scrollable list in ASP.NET Core MVC

答案1

得分: 1

以下是您要翻译的内容:

RowItem.cs:

public class RowItem
{
    public string Description { get; set; }
    public bool IsSuccess { get; set; }
}

HomeController.cs:

public HomeController : Controller
{
    [HttpGet]
    public IActionResult Index()
    {
        // retrieve items from your db
        List<RowItem> items = _service.GetItems();

        return View(items);
    }
}

Index.cshtml:

@model List<RowItem>

<ul>
    @foreach (var item in Model)
    {
        <li>
            @if (item.IsSuccess)
            {
                <i class="arrow-up"></i> @item.Description
            }
            else
            {
                <i class="arrow-down></i> @item.Description
            }
        </li>
    }
</ul>

当然,您需要添加适当的样式和图标以实现您想要的外观。

英文:

Very basic example:

RowItem.cs:

public class RowItem
{
    public string Description { get; set; }
    public bool IsSuccess { get; set; }
}

HomeController.cs:

public HomeController : Controller
{
    [HttpGet]
    public IActionResult Index()
    {
        // retrieve items from your db
        List<RowItem> items = _service.GetItems();

        return View(items);
    }
}

Index.cshtml:

@model List<RowItem>

<ul>
    @foreach (var item in Model)
    {
        <li>
            @if (item.IsSuccess)
            {
                <i class="arrow-up"></i> @item.Description
            }
            else
            {
                <i class="arrow-down></i> @item.Description
            }
        </li>
    }
</ul>

Of course you need to add the appropriate styles and icons to achieve the look you desire.

huangapple
  • 本文由 发表于 2023年3月7日 04:32:04
  • 转载请务必保留本文链接:https://go.coder-hub.com/75655557.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定