提问人:Katie Lou 提问时间:10/22/2023 更新时间:10/23/2023 访问量:79
ASP.NET Core - Fetch API 不发布数据
ASP.NET Core - Fetch API doesn't post data
问:
我一直在尝试创建一个 ASP.NET 核心 Web 应用程序,以将页面上的数据输入发送到我的服务器。我有一个表,其中包含一行,前三列有下拉列表,第四列有一个复选框。我正在将 fetch API 与 HTTPPost 一起使用,但是有错误说找不到 api/saveData (404)。
这是我的代码:
CSHTML的
<table class="table">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Checkbox</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="form-control" id="column1Select">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</td>
<td>
<select class="form-control" id="column2Select">
<option>Option A</option>
<option>Option B</option>
<option>Option C</option>
</select>
</td>
<td>
<select class="form-control" id="column3Select">
<option>Choice X</option>
<option>Choice Y</option>
<option>Choice Z</option>
</select>
</td>
<td>
<input type="checkbox" id="checkboxInput" />
</td>
</tr>
<!-- You can add more rows here if needed -->
</tbody>
</table>
<button onclick="postData()">Submit</button>
function postData() {
var column1Value = document.getElementById("column1Select").value;
var column2Value = document.getElementById("column2Select").value;
var column3Value = document.getElementById("column3Select").value;
var isChecked = document.getElementById("checkboxInput").checked;
var data = {
column1: column1Value,
column2: column2Value,
column3: column3Value,
isChecked: isChecked
};
fetch('api/saveData', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response =\> response.json())
.then(responseData =\> {
console.log('Success:', responseData);
})
.catch(error =\> {
console.error('Error:', error);
});
}
客服
public class splitModel : PageModel {
[ApiController]
[Route("api/[controller]")]
public class DataController : ControllerBase
{
private readonly ApplicationDbContext _context;
public DataController(ApplicationDbContext context)
{
_context = context;
}
[HttpPost]
[Route("SaveData")]
public async Task<IActionResult> SaveData([FromBody] StockTable data)
{
if (data == null)
{
return BadRequest("Invalid data received");
}
Console.Write(data.Column1);
var newStockTable = new ApplicationDbContext.StockTable
{
Column1 = data.Column1,
Column2 = data.Column2,
Column3 = data.Column3,
IsChecked = data.IsChecked,
};
try
{
_context.StockTables.Add(newStockTable);
await _context.SaveChangesAsync();
return Ok("Data saved successfully");
}
catch (DbUpdateException ex)
{
// Log the exception details for troubleshooting
Console.WriteLine(ex.ToString());
return BadRequest("Error saving data: " + ex.Message);
}
}
public class StockTable
{
public int Id { get; set; } // Assuming this is your primary key column (integer type)
public string Column1 { get; set; } // Example: string column in your database
public string Column2 { get; set; } // Another string column
public string Column3 { get; set; } // Another string column
public bool IsChecked { get; set; } // Assuming this is a boolean column in your database
}
public class StockDataModel
{
public string Column1 { get; set; }
public string Column2 { get; set; }
public string Column3 { get; set; }
public bool IsChecked { get; set; }
}
}`
我试图将我的数据提取到“https://reqres.in/api/users/23”,它适用于以下响应
Success: {
"column1": "Option 1",
"column2": "Option B",
"column3": "Choice X",
"isChecked": true,
"id": "17",
"createdAt": "2023-10-22T09:30:31.259Z"}
答:
正如 Yong Shun 所说,你可以使用 ApiController 类作为根类。
DataController 类:
[Route("api/[controller]")]
[ApiController]
public class DataController : ControllerBase
{
private readonly ApplicationDbContext _context;
public DataController(ApplicationDbContext context)
{
_context = context;
}
[HttpPost]
[Route("SaveData")]
public async Task<IActionResult> SaveData([FromBody] StockTable data)
{...}
}
尝试修改你的 uri,例如: ,当你添加路由时。api/Data/SaveData
[Route("api/[controller]")]
如果删除 ,并且只使用 on SaveData 操作,则可以使用 uri ,例如: .[Route("api/[controller]")]
[Route("SaveData")]
SaveData
此外,请确保在 Progarm.cs 中具有 Api 控制器的控制器路由,例如:
builder.Services.AddControllers();
app.MapControllers();
并且,添加您的标题,例如:'Accept': 'application/json',
fetch('api/Data/saveData', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
})
.then(response => response.json())
.then(responseData => {
console.log('Success:', responseData);
})
.catch(error => {
console.error('Error:', error);
});
headers - 指定 Accept 和 Content-Type HTTP 请求标头。两个标头都设置为 application/json,以分别指定接收和发送的媒体类型。
可以查看教程:使用 JavaScript 调用 ASP.NET Core Web API 和教程:使用 ASP.NET Core 创建 Web API,了解详细信息。
评论
api/Data/SaveData
SplitModel
DataController