ASP.NET视图中Json Result转List方法求助，附联系页代码

看起来你想通过表单提交subid，然后从外部API获取Json数据，再把它转换成List展示在视图里。我分两种常见场景给你梳理解决方案：

场景1：同步提交表单，控制器处理Json并传递List到视图 #

这种方式是表单提交后，控制器获取Json数据并反序列化为强类型List，再传递给视图渲染。

第一步：定义匹配Json结构的模型类 #

首先你需要创建一个和外部API返回的Json结构对应的模型类，比如假设API返回的是这样的Json数组：

[
    {"Id": 1, "Name": "张三", "Email": "zhangsan@example.com"},
    {"Id": 2, "Name": "李四", "Email": "lisi@example.com"}
]

那对应的模型类就是：

public class Subscriber
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Email { get; set; }
}

第二步：完善控制器的Post方法 #

你需要使用Newtonsoft.Json（NuGet包，需要先安装）来反序列化Json字符串为List<Subscriber>，然后把这个List传递给视图：

using Newtonsoft.Json;
using System.Net;

public class YourController : Controller
{
    [HttpGet]
    public ActionResult Contact()
    {
        return View();
    }

    [HttpPost]
    public ActionResult Contact(string subid)
    {
        try
        {
            var webClient = new WebClient();
            // 替换成你的实际API地址，带上subid参数
            var apiUrl = $"https://your-api-url.com/data?subid={subid}";
            var jsonString = webClient.DownloadString(apiUrl);
            
            // 反序列化Json到List<Subscriber>
            var subscriberList = JsonConvert.DeserializeObject<List<Subscriber>>(jsonString);
            
            // 把List传递给视图
            return View(subscriberList);
        }
        catch (Exception ex)
        {
            // 捕获异常并传递给视图显示
            ViewBag.ErrorMessage = $"获取数据失败：{ex.Message}";
            return View();
        }
    }
}

第三步：修改视图接收并展示List #

更新你的Contact视图，声明模型类型为List<Subscriber>，然后遍历展示数据：

@model List<Subscriber>

@using (Html.BeginForm("Contact", "YourController", FormMethod.Post))
{
    <fieldset>
        <div class="form-group">
            <input class="form-control" placeholder="E-mail" name="subid" autofocus="" />
        </div>
        <!-- 注意把button的href去掉，改成submit类型 -->
        <button type="submit" class="btn btn-gm btn-success">View</button>
    </fieldset>
}

<!-- 显示错误信息（如果有） -->
@if (!string.IsNullOrEmpty(ViewBag.ErrorMessage))
{
    <div class="alert alert-danger mt-3">@ViewBag.ErrorMessage</div>
}

<!-- 显示List数据 -->
@if (Model != null && Model.Any())
{
    <h3 class="mt-3">订阅者列表</h3>
    <table class="table table-striped">
        <thead>
            <tr>
                <th>ID</th>
                <th>姓名</th>
                <th>邮箱</th>
            </tr>
        </thead>
        <tbody>
            @foreach (var subscriber in Model)
            {
                <tr>
                    <td>@subscriber.Id</td>
                    <td>@subscriber.Name</td>
                    <td>@subscriber.Email</td>
                </tr>
            }
        </tbody>
    </table>
}

场景2：异步Ajax提交，前端直接处理Json转List #

如果不想页面刷新，用Ajax异步获取数据并在前端渲染，这种体验会更好：

第一步：修改视图为Ajax提交 #

<form id="contactForm">
    <fieldset>
        <div class="form-group">
            <input class="form-control" placeholder="E-mail" name="subid" id="subidInput" autofocus="" />
        </div>
        <button type="button" class="btn btn-gm btn-success" onclick="fetchSubscriberData()">View</button>
    </fieldset>
</form>

<!-- 用于展示结果的容器 -->
<div id="resultContainer" class="mt-3"></div>

<script>
function fetchSubscriberData() {
    const subid = document.getElementById('subidInput').value;
    if (!subid) {
        document.getElementById('resultContainer').innerHTML = '<div class="alert alert-warning">请输入邮箱</div>';
        return;
    }

    fetch('/YourController/GetSubscriberList', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: `subid=${encodeURIComponent(subid)}`
    })
    .then(response => {
        if (!response.ok) throw new Error('请求失败');
        return response.json();
    })
    .then(data => {
        if (data.error) {
            document.getElementById('resultContainer').innerHTML = `<div class="alert alert-danger">${data.error}</div>`;
            return;
        }

        // 这里的data就是前端的List（JavaScript数组），直接遍历渲染
        let resultHtml = `
            <h3>订阅者列表</h3>
            <table class="table table-striped">
                <thead>
                    <tr><th>ID</th><th>姓名</th><th>邮箱</th></tr>
                </thead>
                <tbody>
        `;
        data.forEach(item => {
            resultHtml += `<tr><td>${item.Id}</td><td>${item.Name}</td><td>${item.Email}</td></tr>`;
        });
        resultHtml += `</tbody></table>`;
        document.getElementById('resultContainer').innerHTML = resultHtml;
    })
    .catch(error => {
        document.getElementById('resultContainer').innerHTML = `<div class="alert alert-danger">${error.message}</div>`;
    });
}
</script>

第二步：控制器添加返回JsonResult的方法 #

[HttpPost]
public JsonResult GetSubscriberList(string subid)
{
    try
    {
        var webClient = new WebClient();
        var apiUrl = $"https://your-api-url.com/data?subid={subid}";
        var jsonString = webClient.DownloadString(apiUrl);
        var subscriberList = JsonConvert.DeserializeObject<List<Subscriber>>(jsonString);
        
        return Json(subscriberList);
    }
    catch (Exception ex)
    {
        return Json(new { error = $"获取数据失败：{ex.Message}" });
    }
}

注意事项 #

• 确保安装了Newtonsoft.Json NuGet包（右键项目→管理NuGet程序包搜索安装）。
• 替换代码中的API地址、控制器名称、模型属性为你实际的内容。
• 原代码中的<button>标签不要用href=""，否则会导致页面跳转，改成type="submit"（同步场景）或type="button"（异步场景）。

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