ASP.NET MVC 直接访问HttpGet的JsonResult接口如何渲染带数据的视图

问题本质 #

你当前的Action固定返回JsonResult类型，所有请求都会直接返回JSON字符串，浏览器识别到响应内容类型是JSON时就会直接展示纯文本，不会加载渲染你的视图页面。

方案1：单Action适配不同请求类型 #

同一个Action根据请求来源返回不同响应：AJAX请求返回JSON，普通浏览器地址栏访问返回带数据的视图，复用逻辑无需拆分代码。

控制器代码修改 #

[HttpGet]
// 把返回类型从JsonResult改成通用的ActionResult
public ActionResult Action(string ID)
{
    var Info = new List<MyModel>();
    //此处为数据库操作逻辑

    // 判断是否为AJAX请求
    if (Request.IsAjaxRequest())
    {
        return Json(Info, JsonRequestBehavior.AllowGet);
    }
    // 普通页面请求返回视图，同时把查询到的列表数据传给视图
    return View(Info);
}

视图端修改 #

在你的现有视图中新增页面加载逻辑，直接复用你之前写好的表格填充方法，不需要重写渲染逻辑：

// 页面DOM加载完成后自动执行
window.addEventListener('load', function() {
    // 将Razor序列化后的模型数据转为JS对象
    const tableData = @Html.Raw(Newtonsoft.Json.JsonConvert.SerializeObject(Model));
    // 直接调用你原有按钮点击后用于填充表格的JS方法即可
    yourExistingRenderTableMethod(tableData);
});

方案2：拆分视图路由与数据接口（更推荐） #

将页面渲染和数据查询的职责拆分，结构更清晰，后续维护成本更低。

1. 新增视图返回Action #

[HttpGet]
public ActionResult Action(string ID)
{
    // 仅传递ID参数给视图，不处理数据查询
    ViewBag.QueryID = ID;
    return View();
}

2. 原有JSON接口改名独立 #

[HttpGet]
public JsonResult GetTableData(string ID)
{
    var Info = new List<MyModel>();
    //此处为数据库操作逻辑
    return Json(Info, JsonRequestBehavior.AllowGet);
}

3. 视图端新增自动请求逻辑 #

window.addEventListener('load', function() {
    const queryId = '@ViewBag.QueryID';
    // 复用你原有按钮点击的AJAX请求逻辑，页面加载时自动触发获取数据
    fetch('/MyController/GetTableData?ID=' + queryId)
        .then(res => res.json())
        .then(data => yourExistingRenderTableMethod(data));
});

两种方案对比 #

• 方案1适合业务逻辑简单、不想额外新增接口的场景，后端代码改动最小
• 方案2遵循前后端分离的职责划分原则，接口复用性更高，后续迭代维护更方便，更推荐使用

内容的提问来源于stack exchange，提问作者Nguyen Q Nam