ASP.NET Core MVC 6输入准考证号查询SQL Server学生数据问题
现有代码核心问题
你当前的实现存在4个明确问题,导致无法按准考证号精准查询、默认返回全量数据:
- AJAX请求获取了输入框的准考证号,但没有将该参数传递给后端接口
- 后端
Details动作没有编写按准考证号筛选的逻辑,默认返回成绩表的全部数据 - jQuery
each遍历写法错误,回调函数的第一个参数是数据索引而非数据对象,根本读取不到学生的成绩字段 - 原
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
相关产品推荐
相关产品推荐

