ASP.NET MVC实现星级评分并保存至SQL Server的问题求助

核心问题分析 #

1. JS无法获取星级值：用$("#puntuacion").val()获取的是div元素的值，逻辑错误，需取选中的单选框值
2. 表单绑定错误：JS监听的是#fmEmpleado的submit事件，但原form未添加该ID；提交按钮在form外部，无法触发表单提交
3. 控制器SQL参数不匹配：JS传递了id_emp参数，但SQL语句中ID_emp写死为NULL，未使用该参数，且可能未执行SQL命令

1. 修正CSHTML代码 #

给form添加指定ID，将提交按钮移入form内部，确保能触发submit事件：

<form id="fmEmpleado">
    <!-- 补充JS用到的员工ID输入框，根据实际场景调整类型 -->
    <input type="hidden" id="empleado" value="目标员工ID">
    <textarea id="comentario" placeholder="请输入评价内容..." rows="3"></textarea>
    
    <div id="puntuacion">
        <p class="clasificacion">
            <input id="radio1" type="radio" name="estrellas" value="5">
            <label for="radio1">★</label>
            <input id="radio2" type="radio" name="estrellas" value="4">
            <label for="radio2">★</label>
            <input id="radio3" type="radio" name="estrellas" value="3">
            <label for="radio3">★</label>
            <input id="radio4" type="radio" name="estrellas" value="2">
            <label for="radio4">★</label>
            <input id="radio5" type="radio" name="estrellas" value="1">
            <label for="radio5">★</label>
        </p>
    </div>

    <button id="btnGuardar" class="d-block mx-auto my-3 btn btn-success" type="submit">Guardar</button>
</form>

2. 修正JS代码 #

修改星级值获取逻辑，补全回调函数，添加选中校验：

$("#fmEmpleado").on("submit", function (e) {
    e.preventDefault();

    let id_emp = $("#empleado").val();
    let comentario = $("#comentario").val();
    let puntuacion = $("input[name='estrellas']:checked").val();

    // 校验是否选中星级
    if (!puntuacion) {
        alert("请选择星级评分");
        return;
    }

    let datos = new URLSearchParams();
    datos.append("id_emp", id_emp);
    datos.append("puntuacion", puntuacion);
    datos.append("comentario", comentario);

    fetch("Calificacion/GuardarComentario", { method: "POST", body: datos })
        .then(resultado => resultado.json())
        .then(function (resultado) {
            console.log(resultado);
            if (resultado.estatus) {
                alert("评价保存成功");
                $("#fmEmpleado")[0].reset(); // 重置表单
            } else {
                alert("保存失败，请重试");
            }
        })
        .catch(error => {
            console.error("请求出错：", error);
            alert("网络请求失败");
        });
});

关键修改：用$("input[name='estrellas']:checked").val()获取选中的星级值，添加参数校验和错误处理

3. 修正控制器代码 #

匹配SQL参数，完善数据库操作逻辑：

public ActionResult GuardarComentario(string id_emp, string comentario, int puntuacion)
{
    try
    {
        // 替换为你的数据库连接字符串
        using (SqlConnection conn = new SqlConnection("Server=你的服务器名;Database=你的库名;Trusted_Connection=True;"))
        {
            conn.Open();
            string sql = "INSERT INTO RESEÑA_COMIDA (ID_emp, Comentario, Puntuacion, Fecha) " +
                         "VALUES (@id_emp, @comentario, @puntuacion, GETDATE())";
            
            using (SqlCommand cmd = new SqlCommand(sql, conn))
            {
                cmd.Parameters.AddWithValue("@id_emp", id_emp);
                cmd.Parameters.AddWithValue("@comentario", comentario);
                cmd.Parameters.AddWithValue("@puntuacion", puntuacion);
                
                int rows = cmd.ExecuteNonQuery();
                return Json(new { estatus = rows > 0 });
            }
        }
    }
    catch (Exception ex)
    {
        // 可根据需求添加日志记录
        return Json(new { estatus = false, msg = ex.Message });
    }
}

*关键修改：

• 将SQL中ID_emp的NULL改为@id_emp，对应JS传递的参数
• 使用using语句自动释放数据库连接，避免资源泄漏
• 执行ExecuteNonQuery()并通过受影响行数判断操作是否成功
• 添加异常捕获，返回错误状态*

额外注意事项 #

• 确保数据库连接字符串正确配置在Web.config中
• 若RESEÑA_COMIDA表的ID_emp是自增主键，可删除该参数，由数据库自动生成；若为外键，需保证传递的id_emp在关联表中存在
• 可给星级单选框添加CSS样式，实现选中时星星高亮的交互效果

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