英文:
Simple scrollable list in ASP.NET Core MVC
问题
我刚刚开始尝试进行Web应用程序开发,特别是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.
答案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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。



评论