Javascript 如何从文件输入反序列化JSON字符串

我正在开发一个测试应用程序来验证一些功能，我试图完成的部分工作包括用户填写表单，一旦提交，就会下载一个包含表单中所有值的JSON文件。在那里，用户然后将该JSON文件发送给另一方，该方将获取该文件并使用它在表单上填写附加信息，同时保留原始用户的选择

这是我到目前为止得到的

数据模型

public class TableDemo
{
    public List<Location> Locations { get; set; }
    public List<User> Users { get; set; }

    public TableDemo()
    {
        Locations = new List<Location>();
        Locations.Add(new Location());

        Users = new List<User>();
        Users.Add(new User());
    }
}

public class Location
{
    [Required]
    public string Street { get; set; }
    [Required]
    public string City { get; set; }
    [Required]
    public string State { get; set; }
    [Required]
    public string Zip { get; set; }
}

public class User
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string PhoneNumber { get; set; }
}

所以从这里我有点迷路了。我尝试了几种方法，提交文件，并为

ImportForm

执行相应的

HttpPost

操作，该操作对JSON字符串执行

string

，甚至执行

IFormFile

操作，以便在内存中获取整个文件后，提交反序列化

我不想把文件放在任何地方，我只是想直接从文件中提取实际的JSON文本，将其反序列化到

TableDemo

对象中，然后导航到一个新页面并填充值，但所有的尝试都会导致需要文件路径的任何一个死胡同（同样，我也不想将这些文件存储在任何地方）或者在尝试将JSON字符串发送到控制器操作时，会得到null对象

如何简单地获取JSON文件的内容，反序列化回

TableDemo

对象，并在新页面上显示这些值？

提供了一种简单的方法来满足您的要求

“提供将对象或值类型序列化为JSON以及将JSON反序列化为对象或值类型的功能。”

使用

JsonSerializer

API，可以使用返回

字符串的
Serialize（）
和返回
对象的
反序列化（）

一个简单的例子是：

TableDemo table = System.Text.Json.JsonSerializer.Deserialize(jsonInputString, typeof(TableDemo), options);

在这个API上

如果您使用的是.NET Framework（而不是.NET Core），则需要在package Manager控制台中安装NuGet软件包：

>Install Package System.Text.Json-Version 4.7.2
好的，这是我的答案。我检查了你的代码，发现问题不多。如果我需要为你解决所有问题，这需要一些时间。但是这里有一些建议，你可以将其提升到下一个级别

您正在尝试使用多部分表单更新文件，但正在尝试获取字符串。正确的做法是，该文件包含json字符串，但它仍然是一个文件。因此，我们需要处理该部分

所以你们都在尝试使用JavaScript和in-view来显示数据。在我的示例中，我重点介绍了在
IndexDeserialized
中显示数据，JavaScript部分留给了另一个问题

以下是我的做法和建议：

在控制器中，删除以下方法并将其替换为我发布的方法：

[HttpPost]
public IActionResult ImportForm(string jsonString)
{
    TableDemo model = JsonSerializer.Deserialize<TableDemo>(jsonString);
    return View("IndexDeserialized", model);
}

最后，我们将在
IndexDeserialized
中显示您的数据：

@model FileUploaderApp.Models.TableDemo
<p>Number for locations: @Model?.Locations?.Count</p>

@if (Model != null)
{
    foreach (var user in @Model.Users)
    {
        <p>@user.FirstName @user.LastName</p>
    }
}

@model FileUploaderApp.Models.TableDemo
位置编号：@Model？.locations？.Count

@如果（型号！=null）
{
foreach（var user in@Model.Users）
{
@user.FirstName@user.LastName

}
}

在前端使用JavaScript时，可以将数据显示为JSON对象，但我认为这一部分本身就是一个问题

记住这只是一个例子，你可以在上面做很多事情

最终结果如下所示：


对于我所做的，我从微软那里得到了一些关于检查文件上传的代码示例的信息。
嘿，谢谢你的回答。我已经阅读了那些文档。我遇到的问题是，当我尝试让一个接受JSON字符串的控制器动作时，它总是空的。我不知道我是否犯了一个愚蠢的错误，或者是什么我无法将JSON字符串发送到控制器。我将使用我试图处理的控制器操作之一编辑该问题。@maytham-ɯɐɥʇʎɐɯ因此，假设我的视图中只有一个简单的
@model string
，我如何才能将脚本中收集的字符串值从JS文件读取器发送到控制器？@maytham-如果你有时间的话，答案会很好。如果可以的话，展示这两种方法。我这样做是作为一种学习练习，我刚刚在这里被难住了，所以任何帮助都是非常感谢的。现在是晚上11:00，我的位置，所以我将开始1-2个小时有其他事情要做。但希望在睡觉前，如果我的大脑保持清醒的话正在工作。如果我稍后收到问题，请保持连接。您问题中的json是您上载的吗？是的，它是从应用程序中的另一个视图中的虚拟输入生成的json文件。我排除了它，以使问题的范围更加集中，因为该部分已经工作，并且问题在我获得文件后出现。嘿，谢谢。Th成功了。让我失望的一件事是，
ifformfile myFile
被设置为null。如果它没有在代码中使用，它甚至需要作为参数吗？相反，你只需要从
HttpContext.Request
中获取文件。我很高兴它对你有效。我的坏消息是，我使用了不同的示例，其中一个是ifformfile，所以我已经更新了代码，我已经更新了代码。但是概念上是一样的。
TableDemo table = System.Text.Json.JsonSerializer.Deserialize(jsonInputString, typeof(TableDemo), options);

[HttpPost]
public IActionResult ImportForm(string jsonString)
{
    TableDemo model = JsonSerializer.Deserialize<TableDemo>(jsonString);
    return View("IndexDeserialized", model);
}

[HttpPost]
public async Task<IActionResult> ImportFormOnPost()
{
    string jsonString = string.Empty;

    if (HttpContext.Request.Form.Files[0] != null)
    {
        var file = HttpContext.Request.Form.Files[0];
        await using (MemoryStream ms = new MemoryStream())
        {
            await file.CopyToAsync(ms);
            jsonString = Encoding.UTF8.GetString(ms.ToArray());
        }
    }


    TableDemo model = JsonSerializer.Deserialize<TableDemo>(jsonString);
    return View("IndexDeserialized", model);
}

<form name="form" method="post" enctype="multipart/form-data" action="ImportFormOnPost">
    <div class="form-group">
        <input type="file" class="form-control" name="file" />
    </div>
    <div id="jsonContent">

    </div>

    <div class="form-group">
        <button type="submit" class="btn btn-primary">Submit</button>
    </div>

    <div style="margin-top:15px">
        <output form="uploadForm" name="result"></output>
    </div>
</form>

@model FileUploaderApp.Models.TableDemo
<p>Number for locations: @Model?.Locations?.Count</p>

@if (Model != null)
{
    foreach (var user in @Model.Users)
    {
        <p>@user.FirstName @user.LastName</p>
    }
}