无法使用Material UI时间选择器，因为它不满足DateTime格式

Question

编辑 所以我已经将我的数据类型从DateTime更改为TimeSpan，我知道这是正确的，因为我有一个工作的MVC版本，它已经使用了它，时间以HH:MM格式发布。所以问题仍然存在，这是我的Axios设置上的头问题，还是我的API上的CORS设置问题**

我已经用头撞墙大约一天了，试图弄清楚如何解决这个问题。

对于那些使用过Material UI的人，你可以使用使用标准组件的标准日期选择器，也可以使用他们的特殊日期选择器，但由于某种原因，这是一个丑陋的模拟时钟，这意味着我的手被迫使用本地时间选择器。

我遇到的问题是，当我保存表格时，我会张贴两次，但格式是"；HH:MM"；。我的C#.NET 5 API拒绝此操作，因为它无法将该格式转换为DateTime类型。

我在Postman上测试过，如果我把时间格式设置为：YYYY:MM:DDTHH:MM:SS，我会得到200 OK。然而，我知道这一点，因为React正在跟踪字段值，所以我不能创建一个中间件来像这样格式化我的日期，因为时间选择器希望格式是HH:MM。

我从Mediator后端收到一个415不支持的媒体类型错误。有人能提出建议吗？

import React, { ChangeEvent, FormEventHandler, SyntheticEvent, useState } from 'react';
import { Box, Button, Checkbox, FormControlLabel, Modal, Stack, TextField, Typography } from '@mui/material';
import { Formik } from 'formik';
import AdapterLuxon from '@mui/lab/AdapterLuxon';
import LocalizationProvider from '@mui/lab/LocalizationProvider';
import { DatePicker, TimePicker } from '@mui/lab';
import { useStore } from '../../app/stores/store';
import { observer } from 'mobx-react-lite';
import { Check } from '@mui/icons-material';
export default observer(function LogForm(){
const { logStore, userStore } = useStore();
const { editMode, setEditing, selectedLog, createLog } = logStore;
const { hourlyRate } = userStore;
const initialState = selectedLog ?? {
id: '',
date: '',
startTime: '',
endTime: '',
hourlyRate: 0,
totalCharged: 5,
is_overtime: false
};
const [log, setLog] = useState(initialState);
const [priceOverride, setPriceOverride] = useState(false);
const handleInputChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
const { name, value } = e.target;
setLog({
...log,
[name]:value
});
}
const handleSubmit = (e: SyntheticEvent) => {
e.preventDefault();
log.startTime = `${log.date}T${log.startTime}:00`;
log.endTime = `${log.date}T${log.endTime}:00`;
createLog(log);
}
// createLog(date, startTime, finishTime, 8)
return(
<Modal
open={editMode}
onClose={() => setEditing(false)}
aria-labelledby="modal-modal-title"
aria-describedby="modal-modal-description"
>
<Box sx={{ backgroundColor: 'white', width: '85%', margin: '5em auto' }}>
<Box sx={{width: '90%', margin: "0px auto", paddingTop:"1.5em", paddingBottom:"1.5em"}}>
<form onSubmit={e => handleSubmit(e)} autoComplete="off">
{/* <Formik initialValues={log} onSubmit={values => console.log(values)}>
{({values, handleChange, handleSubmit}) => ( */}
<LocalizationProvider dateAdapter={AdapterLuxon}>
<Stack spacing={2}>
<Typography variant={"h5"} sx={{fontWeight:"bold"}}>Add Entry</Typography>
<TextField
id="date"
label="Date"
type="date"
name="date"
value={log.date}
InputLabelProps={{
shrink: true,
}}
onChange={handleInputChange}
/>
<TextField
id="startTime"
label="Start Time"
type="time"
name="startTime"
value={log.startTime}
onChange={handleInputChange}
InputLabelProps={{
shrink: true,
}}
inputProps={{
step: 300, // 5 min
}}
/>
<TextField
id="endTime"
label="End Time"
type="time"
name="endTime"
value={log.endTime}
onChange={handleInputChange}
InputLabelProps={{
shrink: true,
}}
inputProps={{
step: 300, // 5 min
}}
/>
<FormControlLabel label="Override Hourly Price" control={
<Checkbox 
value={priceOverride}
onChange={(newValue) => {
setPriceOverride(newValue.target.checked);
}}
name="overridePrice"
/>
} />
<TextField id="hourlyRate" label="Hourly Rate" variant="outlined" value={log.hourlyRate} onChange={handleInputChange} disabled={priceOverride ? false : true} name="hourlyRate" />
<Button variant="contained" type="submit" color="success" endIcon={<Check />}>Submit</Button>
</Stack>
</LocalizationProvider>
{/* )}
</Formik> */}
</form>
</Box>
</Box>
</Modal>
);
});

有人对这个框架有什么好的想法或经验吗？？

Answer 1

好的，基本上我已经解决了。有一些问题实际上与我的主题完全无关，所以我很抱歉，但这仍然有用。

所以第一个问题，我需要在控制器操作参数中指定[FromBody]属性。这设置了我接收JSON正文的请求。

第二个问题是.NET中内置的标准串行化包无法将字符串转换为TimeSpan类型。为了纠正这一点，我不得不下载Microsoft Newtonsoft软件包，并在启动时添加该软件包。在这样做的过程中，控制器使用这个串行器，并且解析发生得非常好！

内置的WebAPI模板没有提供正确的工具，或者可能我在设置过程中误解了一些东西，这似乎有点违背直觉。

最重要的是它已经解决了！