Web Forms项目客户端移除Listbox项后提交时控件值为null求助

问题原因 #

你遇到的问题是浏览器表单提交规则和当前逻辑的冲突导致的：

1. 浏览器默认提交规则：<select> 元素只有存在至少一个被选中的 <option> 时，才会将该字段加入POST请求。如果所有选项都未选中，或者列表为空，该字段不会被提交，Request.Form 读取到的对应值就是null。
2. 你的JS逻辑特性：添加项的时候是克隆原列表选中的项，克隆后的选项会保留selected属性，因此新增后的lstAssignedCaseLoad存在选中项，提交可以正常拿到值；而移除项的时候是删掉当前选中的项，剩下的选项都处于未选中状态，自然提交时不会携带该字段。

额外注意：你当前的实现只能拿到列表中选中项的值，如果你的需求是保存lstAssignedCaseLoad里的所有项（不管是否选中），当前逻辑本身就存在漏洞，就算没有这次的移除问题，后续也可能出现数据丢失。

推荐解决方案（最稳妥，不受选中状态影响） #

用隐藏域同步lstAssignedCaseLoad的所有值，完全避开表单提交规则的限制：

1. 前端新增服务器隐藏域控件

<asp:HiddenField ID="hfAssignedCaseLoads" runat="server" />

2. 修改JS逻辑，每次增删操作后同步更新隐藏域的值

// 新增同步方法，每次增删后调用
function syncAssignedCaseLoads() {
    const values = [];
    $("[id*=lstAssignedCaseLoad] option").each(function() {
        values.push($(this).val());
    });
    $("[id*=hfAssignedCaseLoads]").val(values.join(','));
}

// 修改添加逻辑
$("#btnAddCaseLoad").bind("click", function () {
    var options = $("[id*=lstCaseLoad] option:selected");
    $("[id*=lstAssignedCaseLoad]").append($(options).clone());
    $(options).remove();
    syncAssignedCaseLoads();
    return false;
});

// 修改移除逻辑
$("#btnRemoveCaseLoad").bind("click", function () {
    var options = $("[id*=lstAssignedCaseLoad] option:selected");
    $("[id*=lstCaseLoad]").append($(options).clone());
    $(options).remove();
    syncAssignedCaseLoads();
    return false;
});

3. 后端直接读取隐藏域的值即可

else
{
    // 空列表也会返回空字符串，不会出现null
    string strCaseLoad = hfAssignedCaseLoads.Value;
    userCaseLoadList = ProcessListString(strCaseLoad, lstAssignedCaseLoad);
}

快速修复方案（不推荐，仅做临时验证用） #

如果不想改动太多代码，可以在提交前自动选中lstAssignedCaseLoad的所有选项，保证字段可以正常提交：

1. 给提交按钮添加客户端点击事件

<asp:Button ID="btnSubmit" runat="server" Text="提交" OnClick="EditUser_Click" OnClientClick="selectAllAssigned()" />

2. 新增对应的JS方法

function selectAllAssigned() {
    $("[id*=lstAssignedCaseLoad] option").prop('selected', true);
}

该方案的缺点是如果用户手动取消了所有选项的选中状态，提交依然会出现null问题，因此只建议临时验证使用。

内容的提问来源于stack exchange，提问作者Jeff Hidalgo