CSHTML页面加载时展示Controller返回JSON数据及异常问题解决

问题1：直接访问GetByKey接口仅返回JSON不渲染视图的修复 #

该问题的核心原因是GetByKey是纯数据接口，返回类型为JsonResult，本身就不会返回视图页面。你需要新增一个负责返回视图的Action：

1. 在FirmModelsController中新增如下代码：

public ActionResult Details(int? id)
{
    if (id == null) return HttpNotFound();
    ViewBag.FirmId = id;
    // 此处返回的视图对应你写的CSHTML页面，将CSHTML命名为Details.cshtml，放到Views/FirmModels目录下
    return View();
}

2. 后续访问页面请使用视图地址：https://localhost:44334/FirmModels/Details/2，而非接口地址。

问题2：$.getJSON回调不触发的修复 #

该问题由多个常见错误叠加导致，逐一修复即可：

• 不要使用jQuery slim版本：slim版移除了AJAX相关API，将你的jQuery引用替换为完整版：

<script src="~/Scripts/jquery-3.4.1.min.js"></script>

• 原请求未传id参数、路径易出错、未加错误回调排查问题，同时后端返回的JSON字段是帕斯卡命名（首字母大写），和你JS里写的小写开头字段不匹配，修改后的JS代码如下：

$(document).ready(function () {
    const firmId = @ViewBag.FirmId;
    // 用Url.Action生成规范的接口地址，传入id参数
    $.getJSON("@Url.Action("GetByKey", "FirmModels")", {id: firmId})
    .done(function (json) {
        // 先判断接口返回的错误提示
        if(json.success === false){
            alert(json.responseText);
            return;
        }
        // 确定只有单条数据，直接取第一条即可，不需要循环
        const firmData = json[0];
        $('#lbl_firmName').text(firmData.FirmName);
        // 注意后端返回的业主名字段是PropName，对应修改
        $('#lbl_ownerName').text(firmData.PropName);
        // 其余字段按照相同格式补充即可
    })
    .fail(function (err) {
        // 错误回调方便排查请求异常
        console.log("请求异常：", err);
    });
});

更简单的优化方案（无需AJAX） #

如果不需要异步加载，完全可以直接在视图Action中查询数据，直接渲染页面，无需额外写JS请求接口：

1. 修改Details Action代码：

public ActionResult Details(int? id)
{
    if (id == null) return HttpNotFound();
    var firmData = db.FirmModels.FirstOrDefault(z => z.FirmId == id);
    if (firmData == null) return HttpNotFound();
    // 直接把数据传给视图
    return View(firmData);
}

2. 修改CSHTML代码，顶部加模型声明，直接渲染字段即可：

@model 你的项目命名空间.FirmModel
@{
    ViewBag.Title = "Customer Details";
}

<div class="d-flex p-2">
    <div style="float:left;">
        <input type="text" id="i_nimitta" class="myDivClass" />
        <input type="checkbox" id="c_nimitta" />
    </div>
</div>
<br />
<div id="d_firmContent">
This firm <div id="lbl_firmName" style="display:inline;">@Model.FirmName</div> belongs to Mr./Mrs. <div id="lbl_ownerName" style="display:inline;">@Model.PropName</div>
@* 其余字段直接用@Model.字段名渲染即可 *@
</div>

该方案性能更好，也不会出现AJAX相关的异常问题。

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