如何让API返回的数据正常显示在ASP.NET应用的详情页中？

1. 补全Controller中缺失的Details Action方法 #

你目前只实现了返回产品列表的Index方法，点击详情跳转的路由对应Action完全没有实现，无法将指定ID的产品数据传递给详情视图。你需要在Controller中添加如下代码：

// 注意路由需和跳转路径匹配，若你的Controller名为ProductsController，列表页跳转链接应改为/Products/Details/@item.Id
public async Task<ActionResult> Details(int id)
{
    var http = new HttpClient();
    // 调用你的API单产品查询接口，传入id获取对应产品数据
    var product = await http.GetFromJsonAsync<Product>($"你的API单产品查询地址/{id}");
    // 将产品数据传递给详情视图
    return View(product);
}

2. 修正详情页的Html辅助方法调用错误 #

你当前详情页全使用了@Html.DisplayNameFor()方法，该方法的作用是输出模型属性的名称（比如Name属性就输出"Name"），这就是你页面只展示字段名不展示实际数据的原因。你需要替换为和列表页一致的@Html.DisplayFor()来输出属性的实际值，修正后的核心代码如下：

<div class="card-body">
    <img src="@Html.DisplayFor(model => model.ImageUrl)" class="card-img-top" alt="产品图片">
    <h5 class="card-title">@Html.DisplayFor(model => model.Name)</h5>
    <p class="card-text">
        <b></b> <br>@Html.DisplayFor(model => model.Description)
    </p>
    <div class="d-flex justify-content-between align-items-center">
        <p class="text-danger price pt-3">@Html.DisplayFor(model => model.Price):-</p>
        <button class="btn btn-outline-secondary">
            Beställ
            <i class="fas fa-shopping-cart me-2"></i>
        </button>
    </div>
</div>

可选优化建议 #

• 不要在每个Action中重复new HttpClient，建议通过依赖注入注入IHttpClientFactory创建HttpClient实例，避免出现套接字耗尽的问题
• 页面跳转链接尽量用@Url.Action("Details", "Products", new { id = item.Id })生成，不要硬编码路径，避免后续路由规则修改后链接失效

内容的提问来源于stack exchange，提问作者Pourya Yarahmadi