如何从jQuery将选中候选人ID传递至ASP.NET Core 6 MVC控制器

一、先搞定前端表单的提交逻辑 #

你现在的jQuery已经限制了同一类复选框只能选一个，但要让控制器能拿到选中的候选人，得给复选框设置正确的name和value：

• 给CEO类的复选框统一设置name="SelectedCeoId"，value绑定候选人的数据库ID
• 产品经理类的复选框设置name="SelectedProductManagerId"，同样绑定ID

示例视图代码：

<form asp-action="SubmitVote" method="post">
    <h3>CEO候选人</h3>
    @foreach (var candidate in Model.CeoCandidates)
    {
        <div>
            <input type="checkbox" class="ceo" name="SelectedCeoId" value="@candidate.Id" />
            <label>@candidate.Name</label>
        </div>
    }

    <h3>产品经理候选人</h3>
    @foreach (var candidate in Model.ProductManagerCandidates)
    {
        <div>
            <input type="checkbox" class="productmanager" name="SelectedProductManagerId" value="@candidate.Id" />
            <label>@candidate.Name</label>
        </div>
    }

    <button type="submit">提交投票</button>
</form>

二、控制器接收参数并通过EF查询详情 #

注入你的DbContext，在提交方法里拿到选中的ID，直接查询数据库获取候选人信息：

控制器代码示例

public class VoteController : Controller
{
    private readonly ApplicationDbContext _dbContext;

    public VoteController(ApplicationDbContext dbContext)
    {
        _dbContext = dbContext;
    }

    // 展示投票页面
    public IActionResult Index()
    {
        var viewModel = new VoteViewModel
        {
            CeoCandidates = _dbContext.Candidates.Where(c => c.Position == "CEO").ToList(),
            ProductManagerCandidates = _dbContext.Candidates.Where(c => c.Position == "ProductManager").ToList()
        };
        return View(viewModel);
    }

    // 处理投票提交
    [HttpPost]
    public async Task<IActionResult> SubmitVote(int? SelectedCeoId, int? SelectedProductManagerId)
    {
        // 校验是否有选中项
        if (!SelectedCeoId.HasValue && !SelectedProductManagerId.HasValue)
        {
            ModelState.AddModelError("", "请至少选择一位候选人");
            var viewModel = new VoteViewModel
            {
                CeoCandidates = _dbContext.Candidates.Where(c => c.Position == "CEO").ToList(),
                ProductManagerCandidates = _dbContext.Candidates.Where(c => c.Position == "ProductManager").ToList()
            };
            return View("Index", viewModel);
        }

        // 查询选中的候选人
        Candidate selectedCeo = SelectedCeoId.HasValue ? await _dbContext.Candidates.FindAsync(SelectedCeoId.Value) : null;
        Candidate selectedProductManager = SelectedProductManagerId.HasValue ? await _dbContext.Candidates.FindAsync(SelectedProductManagerId.Value) : null;

        // 传递结果到视图
        var resultViewModel = new VoteResultViewModel
        {
            SelectedCeo = selectedCeo,
            SelectedProductManager = selectedProductManager
        };

        return View("VoteResult", resultViewModel);
    }
}

三、补充必要的实体和ViewModel #

候选人实体类

public class Candidate
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Position { get; set; }
    public string ImageUrl { get; set; } // 存储图片路径或URL
}

投票页面ViewModel

public class VoteViewModel
{
    public List<Candidate> CeoCandidates { get; set; }
    public List<Candidate> ProductManagerCandidates { get; set; }
}

投票结果ViewModel

public class VoteResultViewModel
{
    public Candidate SelectedCeo { get; set; }
    public Candidate SelectedProductManager { get; set; }
}

四、投票结果视图展示信息 #

创建VoteResult.cshtml，直接渲染选中候选人的图片和姓名：

<h2>投票结果</h2>

@if (Model.SelectedCeo != null)
{
    <div>
        <h3>您选中的CEO候选人</h3>
        <img src="@Model.SelectedCeo.ImageUrl" alt="@Model.SelectedCeo.Name" style="width:100px;height:100px;" />
        <p>@Model.SelectedCeo.Name</p>
    </div>
}

@if (Model.SelectedProductManager != null)
{
    <div>
        <h3>您选中的产品经理候选人</h3>
        <img src="@Model.SelectedProductManager.ImageUrl" alt="@Model.SelectedProductManager.Name" style="width:100px;height:100px;" />
        <p>@Model.SelectedProductManager.Name</p>
    </div>
}

五、优化前端脚本（可选） #

把重复的复选框处理逻辑封装成通用函数，减少冗余：

@section scripts {
<script type="text/javascript">
    $(document).ready(function () {
        // 通用处理同一类复选框单选逻辑
        function bindSingleCheckbox(className) {
            $(className).on("change", function () {
                const checkedCount = $(`${className}:checked`).length;
                if (checkedCount === 1) {
                    $(className).attr("disabled", "disabled");
                    $(`${className}:checked`).removeAttr("disabled");
                } else {
                    $(className).removeAttr("disabled");
                }
            });
        }

        bindSingleCheckbox(".ceo");
        bindSingleCheckbox(".productmanager");
    });
</script>
}

内容的提问来源于stack exchange，提问作者Sergiu BRC