如何将jQuery获取的下拉框选中ID传递到后端Controller用于更新操作

1. 前端逻辑调整 #

首先补充全局变量声明避免作用域问题，新增保存按钮的点击事件发送请求，完整前端代码参考：

// 提前声明全局变量，避免作用域问题
let selectedRateId = '';

$.each(result.Data, function (key, value) {
    if (value.RateName === "")
        return;
    $('#AllRateList')
        .append($("<option></option>")
            .attr("value", value.Id)
            .text(value.RateName));
});

$('select').change(function () {
    selectedRateId = $(this).val()
    console.log(selectedRateId)
});

// 保存按钮点击事件，#saveBtn替换为你实际保存按钮的ID
$('#saveBtn').click(function() {
    // 基础校验：未选中费率时拦截提交
    if (!selectedRateId) {
        alert('请先选择费率方案');
        return;
    }
    // 构造请求参数，customerId替换为你项目实际的客户ID取值逻辑
    // 例：如果客户ID存在隐藏域中可以写为 $('#customerId').val()
    const params = {
        customerId: 你的实际客户ID,
        selectedRateId: selectedRateId
    };
    // 发送ajax请求到后端
    $.ajax({
        url: '/你的控制器名称/UpdateRatePlan', // 替换为实际后端接口路由
        type: 'POST',
        data: params,
        success: function() {
            alert('费率方案更新成功');
        },
        error: function() {
            alert('更新失败，请稍后重试');
        }
    });
});

2. 后端逻辑调整 #

首先新增接口接收前端传参，再修改原有业务方法补充更新逻辑：

控制器新增接口 #

[HttpPost]
public JsonResult UpdateRatePlan(int customerId, int selectedRateId)
{
    try
    {
        // 调用业务方法传入两个参数
        UpdateRatePlan(customerId, selectedRateId);
        return Json(new { success = true });
    }
    catch
    {
        return Json(new { success = false });
    }
}

修改原有业务方法 #

// 新增selectedRateId入参
public void UpdateRatePlan(int customerId, int selectedRateId)
{
    var updateProductVoices = (from product in productRepository.All()
                            join productVoice in productVoiceRepository.All()
                            on product.Id equals productVoice.Id
                            where product.CustomerId == customerId && product.Status == "A"
                            select productVoice).ToList();
    // 新增字段赋值逻辑，RatePlanId替换为你实际要更新的字段名
    foreach (var item in updateProductVoices)
    {
        item.RatePlanId = selectedRateId;
    }
    // 新增提交保存逻辑，根据你项目的仓储实现调整方法名
    productVoiceRepository.SaveChanges();
}

注意事项 #

• 前端代码中的保存按钮ID、客户ID取值逻辑、后端接口路由请和你项目的实际配置保持一致
• 后端赋值的字段名、仓储保存方法名请替换为你项目的实际实现
• 可根据业务需求补充参数合法性校验、权限校验等逻辑

内容的提问来源于stack exchange，提问作者kkami-sama