C# Web復(fù)選框與后端邏輯同步

在C# Web應(yīng)用程序中，實現(xiàn)復(fù)選框與后端邏輯同步通常涉及以下幾個步驟：

1. 創(chuàng)建復(fù)選框：在前端頁面上創(chuàng)建一個復(fù)選框，允許用戶選擇多個選項。

<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函數(shù)：創(chuàng)建一個JavaScript函數(shù)，用于收集復(fù)選框的值并將其發(fā)送到后端。

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. 創(chuàng)建后端API：在后端創(chuàng)建一個API，用于接收復(fù)選框的值并處理邏輯。這里以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)
    {
        // 處理復(fù)選框值
        foreach (var option in options)
        {
            Console.WriteLine(option);
            // 在這里執(zhí)行相應(yīng)的邏輯
        }

        return Ok("復(fù)選框值已成功接收");
    }
}

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();
    });
}

現(xiàn)在，當(dāng)用戶選擇復(fù)選框并點擊提交按鈕時，前端會將選中的值發(fā)送到后端API，后端接收到值后執(zhí)行相應(yīng)的邏輯。