ASP.NET Web Form实现院校偏好优先级选择功能方案咨询

实现方案 #

1. 前端页面结构调整 #

把GridView中原下拉框的模板列替换为隐藏域+自定义选择框的结构，代码如下：

<asp:GridView ID="gdvAcadSelec" runat="server" AutoGenerateColumns="False"
            DataKeyNames="acad_Id" DataSourceID="srcAcademy"
            OnRowDataBound="gdvAcadSelec_RowDataBound"
            CssClass="table table-striped table-bordered"
            EnableViewState="False">
            <Columns>
                <asp:BoundField DataField="acad_name"
                    HeaderText="Academy" SortExpression="acad_name" />
                <asp:TemplateField HeaderText="优先级选择">
                    <ItemTemplate>
                        <!-- 存储院校ID和优先级的隐藏域，未选中时优先级值为0 -->
                        <asp:HiddenField ID="hfAcadId" runat="server" Value='<%# Eval("acad_Id") %>' />
                        <asp:HiddenField ID="hfPriority" runat="server" Value="0" />
                        <!-- 模拟复选框的可点击选择框 -->
                        <div class="priority-box" data-acad-id='<%# Eval("acad_Id") %>'></div>
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
</asp:GridView>
<asp:ObjectDataSource ID="srcAcademy"
    TypeName="dataAccessLayer"
    SelectMethod="getAcademy"
    runat="server" />
<!-- 提交保存按钮 -->
<asp:Button ID="btnSave" runat="server" Text="保存选择" OnClick="btnSave_Click" CssClass="btn btn-primary mt-3" />

补充对应的样式代码，实现选择框的基础样式：

.priority-box {
    width: 24px;
    height: 24px;
    border: 1px solid #999;
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: #fff;
    user-select: none;
    font-size: 14px;
}
.priority-box.selected {
    background: #165DFF;
    color: #fff;
    border-color: #165DFF;
}

2. 交互逻辑实现 #

引入jQuery后添加以下JS代码，实现自动分配优先级、自动补空缺的逻辑：

$(function(){
    // 维护已选优先级的集合，空缺位置用null占位
    let priorityList = [];

    // 如果有历史已选数据，初始化集合
    $(".priority-box.selected").each(function(){
        const priority = parseInt($(this).text());
        const acadId = $(this).data("acad-id");
        priorityList[priority - 1] = acadId;
    })

    // 绑定选择框点击事件
    $(".priority-box").click(function(){
        const $box = $(this);
        const $hfPriority = $box.siblings("[id$=hfPriority]");
        const currentPriority = parseInt($hfPriority.val());

        // 未选中状态，点击后执行选中逻辑
        if(currentPriority === 0){
            // 查找最小的空缺优先级
            let newPriorityIndex = priorityList.findIndex(val => val === null);
            if(newPriorityIndex === -1){
                // 没有空缺就追加到末尾
                newPriorityIndex = priorityList.length;
                priorityList.push($box.data("acad-id"));
            }else{
                // 有空缺就填充空缺
                priorityList[newPriorityIndex] = $box.data("acad-id");
            }
            const showPriority = newPriorityIndex + 1;
            $box.text(showPriority).addClass("selected");
            $hfPriority.val(showPriority);
        }
        // 已选中状态，点击后执行取消逻辑
        else{
            // 对应优先级位置留空
            const index = currentPriority - 1;
            priorityList[index] = null;
            $box.text("").removeClass("selected");
            $hfPriority.val(0);
        }
    })
})

3. 后端保存逻辑 #

提交时遍历GridView行获取选中数据，写入tblAcademy_selection表即可：

protected void btnSave_Click(object sender, EventArgs e)
{
    // 替换为当前登录用户的学生ID
    int currentStudentId = 1;
    // 先删除当前学生的原有选择，避免重复数据
    DeleteStudentOldSelection(currentStudentId);

    foreach (GridViewRow row in gdvAcadSelec.Rows)
    {
        HiddenField hfAcadId = row.FindControl("hfAcadId") as HiddenField;
        HiddenField hfPriority = row.FindControl("hfPriority") as HiddenField;
        int priority = Convert.ToInt32(hfPriority.Value);
        if (priority > 0)
        {
            int acadId = Convert.ToInt32(hfAcadId.Value);
            // 执行插入操作，写入stud_id、Acad_id、order_preference三个字段
            InsertAcademySelection(currentStudentId, acadId, priority);
        }
    }
}

// 如果有编辑场景，在RowDataBound事件中初始化历史选择的选中状态即可
protected void gdvAcadSelec_RowDataBound(object sender, GridViewRowEventArgs e)
{
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // 此处可以查询当前学生的已选数据，给hfPriority赋值、给priority-box加selected类和优先级文本
    }
}

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