C# Web复选框与后端逻辑同步

在C# Web应用程序中，实现复选框与后端逻辑同步通常涉及以下几个步骤：

1. 创建复选框：在前端页面上创建一个复选框，允许用户选择多个选项。

<form id="checkboxForm">
    <input type="checkbox" name="options" value="Option1"> Option1<br>
    <input type="checkbox" name="options" value="Option2"> Option2<br>
    <input type="checkbox" name="options" value="Option3"> Option3<br>
    <button type="button" onclick="submitForm()">Submit</button>
</form>

2. 编写JavaScript函数：创建一个JavaScript函数，用于收集复选框的值并将其发送到后端。

function submitForm() {
    var checkboxes = document.getElementsByName('options');
    var checkedValues = [];

    for (var i = 0; i < checkboxes.length; i++) {
        if (checkboxes[i].checked) {
            checkedValues.push(checkboxes[i].value);
        }
    }

    var xhr = new XMLHttpRequest();
    xhr.open('POST', '/api/submit', true);
    xhr.setRequestHeader('Content-Type', 'application/json;charset=UTF-8');
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            console.log(xhr.responseText);
        }
    };
    xhr.send(JSON.stringify({ options: checkedValues }));
}

3. 创建后端API：在后端创建一个API，用于接收复选框的值并处理逻辑。这里以ASP.NET Core为例：

using Microsoft.AspNetCore.Mvc;
using System.Threading.Tasks;

[ApiController]
[Route("api/[controller]")]
public class SubmitController : ControllerBase
{
    [HttpPost]
    public async Task<IActionResult> Post([FromBody] string[] options)
    {
        // 处理复选框值
        foreach (var option in options)
        {
            Console.WriteLine(option);
            // 在这里执行相应的逻辑
        }

        return Ok("复选框值已成功接收");
    }
}

4. 配置路由：确保在Startup.cs或Program.cs中正确配置了API路由。

// 在Startup.cs中
public void ConfigureServices(IServiceCollection services)
{
    services.AddControllers();
}

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }

    app.UseRouting();

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

现在，当用户选择复选框并点击提交按钮时，前端会将选中的值发送到后端API，后端接收到值后执行相应的逻辑。