ASP.NET Core - Fetch API 不发布数据

ASP.NET Core - Fetch API doesn't post data

提问人:Katie Lou 提问时间:10/22/2023 更新时间:10/23/2023 访问量:79

问:

我一直在尝试创建一个 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"}
asp.net asp.net-core http-post fetch-api dbcontext

评论

2赞 Yong Shun 10/23/2023
可能 API 路由应该是:。或者检查发送的请求是否发送到正确的域和 URL 路径。您需要确认的一件事是控制器是否真的被放置在类中?如果是,我建议将 作为根类移动。它不应该放在 PageModel 中,我看这里不需要 PageModel。api/Data/SaveDataSplitModelDataController

答:

1赞 Qing Guo 10/23/2023 #1

正如 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,以分别指定接收和发送的媒体类型。

结果:enter image description here

可以查看教程:使用 JavaScript 调用 ASP.NET Core Web API 和教程:使用 ASP.NET Core 创建 Web API,了解详细信息。

评论

0赞 Qing Guo 10/25/2023
嗨,娄@Katie,有什么更新吗?如果我的回答能帮助您解决问题?如果没有,你能跟进让我知道吗?
0赞 Katie Lou 11/15/2023
对不起,这里的活动不频繁;代码成功运行!我发现我可能复制了数据控制器,我的控制器.cs类中的另一个。非常感谢您的帮助。@QingGuo