Json post 到 asp.net 核心剃须刀页面模型 return 空
Json post to asp.net core razor pages Model return null
尝试了很多在线解决方案和修复但没有进展，研究了一遍又一遍，我需要你们的帮助
这是我将学生成绩推送到页面模型的Js脚本，当我检查学生成绩时，它有值
<script>
if (btnTakeScore) {
btnTakeScore.onclick = function (e) {
e.preventDefault();
var rows = document.querySelectorAll('tbody tr');
let studentScores = [];
for (let i = 0; i < rows.length; i++) {
let studentId = rows[i].getAttribute('studentId');
studentScores.push({
studentId: studentId,
sessionId: cboSession.value,
termId: cboTerms.value,
classId: cboClass.value,
subjectScores: []
})
let tds = rows[i].querySelectorAll('td input[type="number"]');
for (let j = 0; j < tds.length; j++) {
// Simulate missing score instead of a 0;
let ctrl = tds[j];
if (ctrl.value !== '') {
studentScores[i].subjectScores.push({
studentId: studentId,
subjectId: tds[j].getAttribute('subjectId'),
score: ctrl.value,
scoreTypeId: cboScoreType.value
});
}
}
}
// call server here to post the data
//const serverUrl = 'https://localhost:44301/api/SaveStudentScores';
const serverUrl = '@Url.Page("/Teacher/StudentScore")?handler=SaveScore';
let r = new XMLHttpRequest();
r.open('post', serverUrl);
r.setRequestHeader('content-Type', 'application/json');
r.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
r.send(JSON.stringify(studentScores));
r.onload = function () {
if (r.status === 200) {
var res = JSON.parse(this.responseText);
if (res.status === true) {
alert(res.message);
// clear the fields.
var inputs = document.querySelectorAll('table#scoreEntry input[type="number"]');
inputs.forEach(d => d.value = '0'); // reset the scores to Zero
}
}
}
}
}
<script>
这是我的 PageModel OnPost。当它来到这里时，分数值变为 null
public async Task<JsonResult> OnPostSaveScore([FromBody]IEnumerable<StudentScoreContainer> scores)
{
try
{
// Code to push date to the database
}
return new JsonResult(new { status = true, messsage = "Student(s) score saved!" });
}
catch (Exception ex)
{
return new JsonResult(new { status = false, message = ex.Message });
}
}
public struct StudentScoreContainer
{
public int studentId { get; set; }
public int classId { get; set; }
public int sessionId { get; set; }
public int termId { get; set; }
public int scoreTypeId { get; set; }
public IEnumerable<SubjectScoreContainer> subjectScores { get; set; }
}
public struct SubjectScoreContainer
{
public int studentId { get; set; }
public int subjectId { get; set; }
public int score { get; set; }
}
这是我的 Html 代码
<div class="card-body">
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label>Class Room<span class="text-danger">*
</span></label>
<select id="classRoom" class="select" form="searchForm" required="required" asp-items="@(new SelectList(Model.Classess, "Class.Id","Class.Name"))">
<option value="">Select ClassRoom</option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>Session<span class="text-danger">*</span></label>
<select id="session" class="select" required="required" asp-items="@(new SelectList(Model.Sessions, "Id","Name"))">
<option value="">Select Session</option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>Term<span class="text-danger">*</span></label>
<select id="term" class="select" required="required" asp-items="@(new SelectList(Model.Terms, "Id","Name"))">
<option value="">Select Term</option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>Score Types<span class="text-danger">*</span></label>
<select id="cboScoreType" class="select" required="required" asp-items="@(new SelectList(Model.ScoreTypes, "Id","Name"))">
<option value="">Select ScoreType</option>
</select>
</div>
</div>
<div class="col-md-3">
<label></label>
<p></p>
<button id="btnSearch" type="submit" class="btn btn-success btn-block"> Search </button>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="table-responsive">
<table class="table table-striped custom-table table-nowrap mb-0" id="studentList">
<thead>
<tr>
<th>Student</th>
@foreach (var s in Model.SubjectsByTeacher)
{
<th style="text-align:center">@s.Subject.Name</th>
}
</tr>
</thead>
<tbody>
@foreach (var student in Model.Students)
{
<tr studentId="@student.StudentID">
<td>@(student.FirstName.Trim() + " " + student.LastName.Trim())</td>
@foreach (var subject in Model.SubjectsByTeacher)
{
<td style="text-align:center"><input type="number" min="0" max="100" class="form-control" studentId="@student.StudentID" subjectId="@subject.Subject.Id" /></td>
}
</tr>
}
</tbody>
</table>
<br />
</div>
</div>
<div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<button id="btnTakeScore" class="btn btn-primary">
<i class="fa fa-pen"></i> <b>Take Scores</b>
</button>
</div>
</div>
</div>
</div>
非常感谢您的帮助。
根据你的js和razor page代码，我发现你是直接读取getAttribute的值，然后post传给page方法
由于studentId等属性都是int类型，而html代码得到的值是字符串。这就是页面模型不能很好绑定值的原因。
我建议你可以在 js 中将 rows[i].getAttribute('studentId') 转换为 int。
如下所示：
由于我没有完整的js代码和pagemodel的class，我只是创建一个测试js模型来测试它。
您可以尝试按照以下代码替换您已有的js代码。
学生成绩：
studentScores.push({
studentId: +studentId,
sessionId: +cboSession.value,
termId: +cboTerms.value,
classId: +cboClass.value,
subjectScores: []
})
主题分数：
studentScores[i].subjectScores.push({
studentId: +studentId,
subjectId: +tds[j].getAttribute('subjectId'),
score: +ctrl.value,
scoreTypeId: +cboScoreType.value
});
正如@Joseph Ebenezer 评论的那样，我们也可以使用 NewtonsoftJson 而不是 System.Text.Json 来解决这个问题。
更多详情，您可以参考以下代码：
从下方安装 Microsoft.AspNetCore.Mvc.NewtonsoftJson url:
https://www.nuget.org/packages/Microsoft.AspNetCore.Mvc.NewtonsoftJson
将以下代码添加到startup.cs配置服务方法中：
services.AddRazorPages().AddNewtonsoftJson();
尝试了很多在线解决方案和修复但没有进展，研究了一遍又一遍，我需要你们的帮助
这是我将学生成绩推送到页面模型的Js脚本，当我检查学生成绩时，它有值
<script>
if (btnTakeScore) {
btnTakeScore.onclick = function (e) {
e.preventDefault();
var rows = document.querySelectorAll('tbody tr');
let studentScores = [];
for (let i = 0; i < rows.length; i++) {
let studentId = rows[i].getAttribute('studentId');
studentScores.push({
studentId: studentId,
sessionId: cboSession.value,
termId: cboTerms.value,
classId: cboClass.value,
subjectScores: []
})
let tds = rows[i].querySelectorAll('td input[type="number"]');
for (let j = 0; j < tds.length; j++) {
// Simulate missing score instead of a 0;
let ctrl = tds[j];
if (ctrl.value !== '') {
studentScores[i].subjectScores.push({
studentId: studentId,
subjectId: tds[j].getAttribute('subjectId'),
score: ctrl.value,
scoreTypeId: cboScoreType.value
});
}
}
}
// call server here to post the data
//const serverUrl = 'https://localhost:44301/api/SaveStudentScores';
const serverUrl = '@Url.Page("/Teacher/StudentScore")?handler=SaveScore';
let r = new XMLHttpRequest();
r.open('post', serverUrl);
r.setRequestHeader('content-Type', 'application/json');
r.setRequestHeader("XSRF-TOKEN",
$('input:hidden[name="__RequestVerificationToken"]').val());
r.send(JSON.stringify(studentScores));
r.onload = function () {
if (r.status === 200) {
var res = JSON.parse(this.responseText);
if (res.status === true) {
alert(res.message);
// clear the fields.
var inputs = document.querySelectorAll('table#scoreEntry input[type="number"]');
inputs.forEach(d => d.value = '0'); // reset the scores to Zero
}
}
}
}
}
<script>
这是我的 PageModel OnPost。当它来到这里时，分数值变为 null
public async Task<JsonResult> OnPostSaveScore([FromBody]IEnumerable<StudentScoreContainer> scores)
{
try
{
// Code to push date to the database
}
return new JsonResult(new { status = true, messsage = "Student(s) score saved!" });
}
catch (Exception ex)
{
return new JsonResult(new { status = false, message = ex.Message });
}
}
public struct StudentScoreContainer
{
public int studentId { get; set; }
public int classId { get; set; }
public int sessionId { get; set; }
public int termId { get; set; }
public int scoreTypeId { get; set; }
public IEnumerable<SubjectScoreContainer> subjectScores { get; set; }
}
public struct SubjectScoreContainer
{
public int studentId { get; set; }
public int subjectId { get; set; }
public int score { get; set; }
}
这是我的 Html 代码
<div class="card-body">
<div class="row">
<div class="col-sm-2">
<div class="form-group">
<label>Class Room<span class="text-danger">*
</span></label>
<select id="classRoom" class="select" form="searchForm" required="required" asp-items="@(new SelectList(Model.Classess, "Class.Id","Class.Name"))">
<option value="">Select ClassRoom</option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>Session<span class="text-danger">*</span></label>
<select id="session" class="select" required="required" asp-items="@(new SelectList(Model.Sessions, "Id","Name"))">
<option value="">Select Session</option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>Term<span class="text-danger">*</span></label>
<select id="term" class="select" required="required" asp-items="@(new SelectList(Model.Terms, "Id","Name"))">
<option value="">Select Term</option>
</select>
</div>
</div>
<div class="col-sm-2">
<div class="form-group">
<label>Score Types<span class="text-danger">*</span></label>
<select id="cboScoreType" class="select" required="required" asp-items="@(new SelectList(Model.ScoreTypes, "Id","Name"))">
<option value="">Select ScoreType</option>
</select>
</div>
</div>
<div class="col-md-3">
<label></label>
<p></p>
<button id="btnSearch" type="submit" class="btn btn-success btn-block"> Search </button>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="table-responsive">
<table class="table table-striped custom-table table-nowrap mb-0" id="studentList">
<thead>
<tr>
<th>Student</th>
@foreach (var s in Model.SubjectsByTeacher)
{
<th style="text-align:center">@s.Subject.Name</th>
}
</tr>
</thead>
<tbody>
@foreach (var student in Model.Students)
{
<tr studentId="@student.StudentID">
<td>@(student.FirstName.Trim() + " " + student.LastName.Trim())</td>
@foreach (var subject in Model.SubjectsByTeacher)
{
<td style="text-align:center"><input type="number" min="0" max="100" class="form-control" studentId="@student.StudentID" subjectId="@subject.Subject.Id" /></td>
}
</tr>
}
</tbody>
</table>
<br />
</div>
</div>
<div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<button id="btnTakeScore" class="btn btn-primary">
<i class="fa fa-pen"></i> <b>Take Scores</b>
</button>
</div>
</div>
</div>
</div>
非常感谢您的帮助。
根据你的js和razor page代码，我发现你是直接读取getAttribute的值，然后post传给page方法
由于studentId等属性都是int类型，而html代码得到的值是字符串。这就是页面模型不能很好绑定值的原因。
我建议你可以在 js 中将 rows[i].getAttribute('studentId') 转换为 int。
如下所示：
由于我没有完整的js代码和pagemodel的class，我只是创建一个测试js模型来测试它。
您可以尝试按照以下代码替换您已有的js代码。
学生成绩：
studentScores.push({
studentId: +studentId,
sessionId: +cboSession.value,
termId: +cboTerms.value,
classId: +cboClass.value,
subjectScores: []
})
主题分数：
studentScores[i].subjectScores.push({
studentId: +studentId,
subjectId: +tds[j].getAttribute('subjectId'),
score: +ctrl.value,
scoreTypeId: +cboScoreType.value
});
正如@Joseph Ebenezer 评论的那样，我们也可以使用 NewtonsoftJson 而不是 System.Text.Json 来解决这个问题。
更多详情，您可以参考以下代码：
从下方安装 Microsoft.AspNetCore.Mvc.NewtonsoftJson url:
https://www.nuget.org/packages/Microsoft.AspNetCore.Mvc.NewtonsoftJson
将以下代码添加到startup.cs配置服务方法中：
services.AddRazorPages().AddNewtonsoftJson();