点击按钮后SQL查询未执行,图片未按搜索内容更新问题
问题:点击搜索按钮后卡片图片未根据输入更新
你的代码核心问题是:点击搜索后,虽然执行了搜索查询,但页面渲染用的还是初始的热门卡片数据,完全没用到搜索结果。
错误原因
在IsPost分支里,你把搜索结果存到了searching变量,但页面循环渲染依赖的是output变量,而output始终执行的是初始的SELECT * FROM Cards WHERE isPopular <> 0查询,和搜索逻辑没有关联。
修复后的代码
@using WebMatrix.Data @{ var db = Database.Open("MTGDecks"); var sql = "SELECT * FROM Cards WHERE isPopular <> 0"; var searchSQL = "SELECT * FROM Cards WHERE cardName LIKE CONCAT ('%', @0, '%')"; var searchValue = Request.Form["searchBox"]; var output = db.Query(sql); // 初始加载热门卡片 if (IsPost) { // 直接把搜索结果赋值给output,覆盖初始数据 output = db.Query(searchSQL, searchValue); } } <link href="~/Content/Site.css" rel="stylesheet" /> <h2>All Cards</h2> <form method="post" action="/Home/Index"> <input type="text" name="searchBox" /> <button type="submit" class="btn">Search</button> <a href="/Management/CreateDeck" class="btn">Make New Deck</a> <div class="row"> <div class="row justify-content-center"> @foreach (var row in output) { <div class="col-4"> <div class="card"> <img src="@row.imageURL" class="card-img-top" alt="@row.cardName"> <div class="card-body"> <h5 class="card-title">@row.cardName</h5> <p class="card-text">@row.oracleText</p> <a href="/Home/Details?id=@row.cardID" class="btn btn-primary">Details</a> </div> </div> </div> } </div> </div> </form>
关键改动说明
- 调整
output的赋值逻辑:初始加载热门卡片,POST请求时用搜索结果直接覆盖output - 移除无用的
searching变量,复用output存储查询结果 - 优化图片
alt属性,用卡片名称替代默认文本,提升页面可访问性
可选优化(处理空搜索)
如果想在搜索框为空时仍返回热门卡片,而非全量匹配,可以在POST分支添加判断:
if (IsPost) { if (!string.IsNullOrEmpty(searchValue)) { output = db.Query(searchSQL, searchValue); } // 搜索值为空时,保持初始的热门卡片数据 }
内容的提问来源于stack exchange,提问作者Angelo Juanico
相关产品推荐
相关产品推荐

