ABP 極簡入門教程（二 MVC方式顯示數據）

增加顯示菜單

Sample.Web.MVC項目中找到startup目錄打開SampleNavigationProvider.cs，根據現有內容添加以下內容

.AddItem(
                    new MenuItemDefinition(
                        PageNames.Address,
                        L("Address"),
                        url: "Address",
                        icon: "fas fa-address-book"
                    )
                )

打開相同目錄的PageNames.cs增加頁面名稱

public const string Address = "Address";

如果需要多語言環境需要到Sample.core項目下Localization\SourceFiles\Sample-zh-Hans.xml增加一行

<text name="Address">聯系人</text>

在Models目錄下新建Address目錄並添加AddressListViewModel.cs視圖模型

using System.Collections.Generic;
using Sample.Northwind.Dto;

namespace Sample.Web.Models.Address
{
    public class AddressListViewModel
    {
        public IReadOnlyList<AddressDto> Address { get; set; }
    }
}

在MVC項目中增加Address控制器

using System.Threading.Tasks;
using Sample.Controllers;
using Sample.Northwind;
using Sample.Web.Models.Address;
using Microsoft.AspNetCore.Mvc;

namespace Sample.Web.Controllers
{
    public class AddressController : SampleControllerBase
    {
        private readonly IAddressAppService _addressAppService;

        public AddressController(IAddressAppService addressAppService)
        {
            _addressAppService = addressAppService;
        }
        public async Task<ActionResult> Index()
        {
            var result = (await _addressAppService.GetAllAsync()).Items;
            var model = new AddressListViewModel()
            {
                Address = result
            };
            return View(model);
        }
    }
}

添加視圖

@model Sample.Web.Models.Address.AddressListViewModel
@{
    ViewData["Title"] = "Index";
}

<div class="content-header">
    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-12">
                <h1 class="m-0 text-dark">@L("Address")</h1>
            </div>
        </div>
    </div>
</div>
<div class="content">
    <div class="container-fluid">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <table class="table table-bordered">
                            <tr>
                                <th>編號</th>
                                <th>姓名</th>
                                <th>郵箱</th>
                            </tr>
                            @foreach (var item in Model.Address)
                            {
                                <tr>
                                    <td>@item.Id</td>
                                    <td>@item.Name</td>
                                    <td>@item.Email</td>
                                </tr>
                            }
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

顯示效果如下