You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

ASP.NET Core MVC 6输入准考证号查询SQL Server学生数据问题

现有代码核心问题

你当前的实现存在4个明确问题,导致无法按准考证号精准查询、默认返回全量数据:

  • AJAX请求获取了输入框的准考证号,但没有将该参数传递给后端接口
  • 后端Details动作没有编写按准考证号筛选的逻辑,默认返回成绩表的全部数据
  • jQueryeach遍历写法错误,回调函数的第一个参数是数据索引而非数据对象,根本读取不到学生的成绩字段
  • 原Details动作返回的是完整HTML视图而非结构化数据,AJAX拿到完整页面后直接拼接会导致内容渲染异常

正确实现步骤

1. 编写后端查询接口

确保项目已完成SQL Server连接配置、Result实体类和数据库上下文定义后,在ResultController中新增专门供AJAX调用的接口,仅返回匹配准考证号的学生数据,格式为JSON:

using Microsoft.AspNetCore.Mvc;
using Microsoft.EntityFrameworkCore;

public class ResultController : Controller
{
    private readonly AppDbContext _db; // 替换为你自己的数据库上下文类名
    public ResultController(AppDbContext db)
    {
        _db = db;
    }

    // 加载查询页面的动作
    public IActionResult Index()
    {
        return View();
    }

    // 处理成绩查询的POST接口
    [HttpPost]
    public async Task<IActionResult> QueryScore(string hallTicketNum)
    {
        // 空参数直接返回空结果
        if (string.IsNullOrWhiteSpace(hallTicketNum))
        {
            return Json(new List<Result>());
        }
        // 仅查询匹配传入准考证号的记录,不返回全表数据
        var targetStudent = await _db.Results // 替换为你自己的成绩表DbSet属性名
            .AsNoTracking()
            .Where(r => r.hallTicketNum == hallTicketNum.Trim())
            .ToListAsync();
        return Json(targetStudent);
    }
}

注意:代码中AppDbContext、Results两个占位符需要替换为你项目中实际的数据库上下文类名、成绩表对应的DbSet属性名。原返回全量数据的Details动作如果没有其他用途可以删除,避免路由冲突。

2. 修正前端查询页面

将Index视图替换为以下代码,修正AJAX传参、数据遍历逻辑,新增输入校验和无结果提示:

@{
    ViewData["Title"] = "学生成绩查询";
}

<div class="mb-3">
    <input id="txtHallTicket" type="text" class="form-control" style="width:350px" placeholder="请输入准考证号"/>
</div>
<div class="mb-3">
    <button id="btnQuery" type="button" class="btn btn-primary" style="width:350px">查询成绩</button>
</div>

<div>
    <table id="scoreTable" class="table table-bordered table-striped" style="width:100%">
        <thead>
            <tr>
                <th>名</th>
                <th>姓</th>
                <th>准考证号</th>
                <th>科目1</th>
                <th>科目2</th>
                <th>科目3</th>
                <th>科目4</th>
                <th>科目5</th>
                <th>总分</th>
                <th>百分比</th>
            </tr>
        </thead>
        <tbody></tbody>
    </table> 
    <div id="noResult" class="text-danger mt-2" style="display:none">未查询到对应准考证号的成绩信息,请核对输入后重试</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function(){
    // 按钮点击查询
    $("#btnQuery").click(function(){
        var ticketNum = $("#txtHallTicket").val().trim();
        if(!ticketNum){
            alert("请先输入准考证号");
            return;
        }
        $.ajax({
            type: "POST",
            url: "/Result/QueryScore",
            data: {hallTicketNum: ticketNum}, // 将准考证号传给后端
            success: function(res){
                var $tbody = $("#scoreTable tbody");
                var $tip = $("#noResult");
                $tbody.empty();
                $tip.hide();

                if(!res || res.length === 0){
                    $tip.show();
                    return;
                }
                // 遍历数据渲染行,each第二个参数才是当前数据对象
                $.each(res, function(index, item){
                    $tbody.append(`
                        <tr>
                            <td width="10%">${item.fName}</td>
                            <td width="10%">${item.lName}</td>
                            <td width="10%">${item.hallTicketNum}</td>
                            <td width="10%">${item.sub1}</td>
                            <td width="10%">${item.sub2}</td>
                            <td width="10%">${item.sub3}</td>
                            <td width="10%">${item.sub4}</td>
                            <td width="10%">${item.sub5}</td>
                            <td width="10%">${item.total}</td>
                            <td width="10%">${item.percent}</td>
                        </tr>
                    `);
                })
            },
            error: function(){
                alert("查询请求失败,请检查网络后重试");
            }
        })
    })

    // 支持输入框按回车触发查询
    $("#txtHallTicket").keydown(function(e){
        if(e.keyCode === 13){
            $("#btnQuery").click();
        }
    })
})
</script>

3. 功能验证

修改完成后启动项目可直接验证效果:

  • 未输入准考证号点击查询会弹出提示,不会发起无效请求
  • 输入不存在的准考证号会显示无匹配结果提示,不会渲染空行
  • 输入正确的准考证号仅返回对应学生的成绩数据,不会加载全表记录

内容的提问来源于stack exchange,提问作者Sam

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.08.30 13:15:36