在Razor Pages中使用API更新自定义字段，C#

[ApiController]
[Route("api/[controller]")]
public class CustomFieldsController : ControllerBase
{
    private readonly ApplicationDbContext _context;

    public CustomFieldsController(ApplicationDbContext context)
    {
        _context = context;
    }

    [HttpPut("{id}")]
    public async Task<IActionResult> UpdateCustomField(int id, [FromBody] CustomField customField)
    {
        if (id != customField.Id)
        {
            return BadRequest();
        }

        _context.Entry(customField).State = EntityState.Modified;

        try
        {
            await _context.SaveChangesAsync();
        }
        catch (DbUpdateConcurrencyException)
        {
            if (!CustomFieldExists(id))
            {
                return NotFound();
            }
            else
            {
                throw;
            }
        }

        return NoContent();
    }

    private bool CustomFieldExists(int id)
    {
        return _context.CustomFields.Any(e => e.Id == id);
    }
}

@page
@model UpdateCustomFieldModel
@{
    ViewData["Title"] = "Update Custom Field";
}

<h1>Update Custom Field</h1>

<form id="updateForm">
    <input type="hidden" id="id" name="id" value="@Model.CustomField.Id" />
    <input type="text" id="value" name="value" value="@Model.CustomField.Value" />
    <button type="button" onclick="updateCustomField()">Update</button>
</form>

<script>
    async function updateCustomField() {
        const id = document.getElementById('id').value;
        const value = document.getElementById('value').value;

        const response = await fetch(`/api/customfields/${id}`, {
            method: 'PUT',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ id: parseInt(id), value: value })
        });

        if (response.ok) {
            alert('Custom field updated successfully!');
        } else {
            alert('Failed to update custom field.');
        }
    }
</script>