ASP.NET MVC视图中显示SQL Server存储过程数据的问题

核心问题分析 #

1. 视图模型类型不匹配：控制器返回的是List<TarjetasInformativas>集合，但视图声明的模型是单个TarjetasInformativas对象，导致集合数据无法正确绑定到视图。
2. 数据显示方式错误：Html.LabelFor()的作用是输出属性的显示名称（默认是属性变量名），而非属性存储的实际数据。

解决方案步骤 #

1. 修改视图的模型声明 #

将视图顶部的模型类型改为集合类型，匹配控制器传递的数据：

@model List<WebPlantillaOpexLTE.Models.TarjetasInformativas>

2. 遍历集合显示每条数据 #

因为控制器返回的是多条数据的集合，需要用循环遍历每个对象，直接输出属性值而非使用LabelFor：

@foreach (var item in Model)
{
    <div class="col-lg-3 col-6">
        <!-- small box -->
        <div class="small-box bg-info">
            <div class="inner">
                <h3>@item.PrimerNombre</h3>
                <p>@item.PrimerMonto.ToString("C")</p> <!-- 可选：格式化货币显示 -->
            </div>
            <div class="icon">
                <i class="ion ion-android-locate"></i>
            </div>
        </div>
    </div>
}

补充说明 #

如果存储过程只返回单条数据，也可以修改控制器返回单个TarjetasInformativas对象（比如取集合的第一个元素），此时视图保持单个模型类型，直接用属性值显示即可：

// 控制器修改示例
public ActionResult ObtenerNombres()
{
    DatosTarjetasInformativas objDTTarjetas = new DatosTarjetasInformativas();
    List<TarjetasInformativas> objTarjetas = objDTTarjetas.RetornarNombres();
    // 取第一条数据
    return View(objTarjetas.FirstOrDefault());
}

对应的视图显示代码：

@model WebPlantillaOpexLTE.Models.TarjetasInformativas
<div class="col-lg-3 col-6">
    <!-- small box -->
    <div class="small-box bg-info">
        <div class="inner">
            <h3>@Model.PrimerNombre</h3>
            <p>@Model.PrimerMonto.ToString("C")</p>
        </div>
        <div class="icon">
            <i class="ion ion-android-locate"></i>
        </div>
    </div>
</div>

内容的提问来源于stack exchange，提问作者Mendel Aguilar