【发布时间】：2020-09-23 22:06:40
【问题描述】：
我正在开发一个测试应用程序来证明一些功能，我想要完成的部分工作涉及用户填写表单，一旦提交，就会下载包含表单中所有值的 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; }
}
控制器
public class HomeController : Controller
{
private readonly ILogger<HomeController> _logger;
public HomeController(ILogger<HomeController> logger)
{
_logger = logger;
}
public IActionResult Index()
{
TableDemo model = new TableDemo();
return View(model);
}
// This is where the user fills out the original form which downloads to their machine as a JSON file.
[HttpPost]
public IActionResult Index(TableDemo model)
{
string jsonString;
var options = new JsonSerializerOptions
{
WriteIndented = true
};
jsonString = JsonSerializer.Serialize(model, options);
byte[] jsonFileArray = Encoding.ASCII.GetBytes(jsonString);
return File(jsonFileArray, "application/json", "testJson.json");
}
// Where the second user inputs the file from the first user
[HttpGet]
public IActionResult ImportForm()
{
return View();
}
// the jsonString argument is always null here
[HttpPost]
public IActionResult ImportForm(string jsonString)
{
TableDemo model = JsonSerializer.Deserialize<TableDemo>(jsonString);
return View("IndexDeserialized", model);
}
}
查看（ImportForm.cshtml）
@section Scripts{
<script>
function showFile(input) {
let file = input.files[0];
let reader = new FileReader();
reader.readAsText(file);
reader.onload = () => {
console.log(reader.result);
let jsonContent = $('#jsonContent');
jsonContent.append(reader.result);
};
reader.onerror = function () {
console.log(reader.error);
};
};
</script>
}
<body>
<form name="form" method="post" enctype="multipart/form-data">
<div class="form-group">
<input type="file" class="form-control" name="file" onchange="readDocument(this)" />
</div>
<div id="jsonContent">
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
</body>
我从初始视图生成的 JSON 文件的内容
{
"Locations": [
{
"Street": "12345 Test Drive",
"City": "Chicago",
"State": "IL",
"Zip": "55555"
},
{
"Street": "12345 Test Drive",
"City": "ABC",
"State": "IL",
"Zip": "60441"
},
{
"Street": "1234",
"City": "asdasd",
"State": "asdasd",
"Zip": "asdasd"
}
],
"Users": [
{
"FirstName": "asdas",
"LastName": "dasdsa",
"PhoneNumber": "dasd"
},
{
"FirstName": "sadasd",
"LastName": "dsadas",
"PhoneNumber": "asdasd"
}
]
}
所以从这里我有点迷路了。我尝试了几种方法，在这些方法中我提交文件并为ImportForm 设置相应的HttpPost 操作，该操作将string 用于JSON 字符串，甚至IFormFile 用于仅提交要反序列化的整个文件一旦我记住了它。
我不想将文件保存在任何地方，我试图直接从文件中提取实际的 JSON 文本，将其反序列化回 TableDemo 对象并导航到填充值的新页面，但所有尝试导致我需要有文件路径的死胡同（我不想再将这些文件存储在任何地方），或者在尝试将 JSON 字符串发送到控制器操作时得到空对象。
如何简单地获取 JSON 文件的内容，反序列化回 TableDemo 对象并在新页面上显示这些值？
【问题讨论】：
-
@maytham-ɯɐɥʇʎɐɯ 所以说我只有一个简单的
@model string就我的观点而言，我如何能够将脚本中收集的字符串值从 JS FileReader 发送到控制器？ -
@maytham-ɯɐɥʇʎɐɯ 有时间的时候回答会很好。如果可以的话，显示这两种方法。我这样做是作为一个学习练习，我刚刚在这里被难住了，所以绝对感谢任何帮助。
-
yaa rignt 现在晚上 11:00 我的位置，所以我将开始 1-2 小时有其他事情要做。但希望在睡前，如果我的大脑继续工作的话。如果我稍后有问题，请保持联系。
-
你上传的那个json是你问题中的那个吗？
-
是的，它是从应用程序中其他视图的虚拟输入生成的 JSON 文件。我排除了这一点，以使问题的范围更加集中，因为该部分已经有效，并且问题出现在我获得文件之后。
标签： javascript c# json asp.net-core