ASP.NET Core 2.1 MVC中点击搜索按钮加载部分视图问题求助

嘿，我来帮你搞定这个问题！看起来你在Ajax调用、路由匹配和页面初始化这几个地方踩了小坑，咱们一步步把问题捋顺：

1. 先解决页面加载时的queryId空值异常 #

你说加载searchQuery.cshtml时出现空值异常，这大概率是因为你的页面绑定的模型（比如SearchQueryViewModel）里的QueryId是值类型（int），但你的SearchQuery控制器动作直接返回View()，没有初始化模型，导致Razor渲染asp-for="QueryId"时找不到模型实例，抛出异常。

修正控制器代码：

[Route("searchQuery")] // customer/searchQuery
public IActionResult SearchQuery() {
    // 替换成你实际使用的模型类名，确保初始化空模型
    return View(new YourSearchQueryModel());
}

2. 修正Ajax与控制器路由的匹配问题 #

你的ViewQuery控制器动作用了路径式路由约束（[Route("[controller]/viewQuery/{queryId:int}")]），但你的Ajax是通过data参数把queryId放在URL的QueryString里，这就导致路由不匹配，控制器拿不到参数，进而出现空值问题。

这里给你两种可选的修正方式：

方式1：调整Ajax URL，把queryId放到路径中 #

这种方式适配你现有的控制器路由，修改ShowResult函数里的Ajax配置：

function ShowResult() {
 var queryId = $("#QueryId").val();
 // 先做简单的输入验证，避免无效提交
 if (!queryId || isNaN(queryId)) {
     alert("请输入有效的数字QueryId！");
     return;
 }
 $.ajax({
     type: 'GET',
     // 把queryId拼接进URL路径，匹配控制器的路由规则
     url: '../query/viewQuery/' + queryId,
     success: function (response) {
         // 后面会把这里的逻辑改成插入到页面容器，而非模态框
         $("#queryResultContainer").html(response);
     },
     error: function (xhr, status, error) {
         // 更友好的错误提示
         $("#queryResultContainer").html("<div class='alert alert-danger'>加载失败：" + error + "</div>");
     }
 });
}

方式2：修改控制器路由，支持QueryString传参 #

如果你更习惯用data参数传值，可以调整控制器的路由和参数绑定：

// 去掉路径里的queryId约束，改用QueryString接收参数
[Route("[controller]/viewQuery")]
public async Task<IActionResult> ViewQuery([FromQuery]int queryId) {
 // Retrieve Data from api using HttpClient ....
 return PartialView("ViewQuery", qVM);
}

这种情况下，你原来Ajax里的data: { queryId: queryId }就可以正常生效，不需要修改URL。

3. 准备页面容器，实现结果在按钮下方展示 #

既然你不想用模态框，那咱们在搜索按钮下方加一个专门的容器用来展示结果：

<div>
 <div class="col-md-6">
 <dl class="dl-horizontal">
 <dt> @Html.DisplayNameFor(model => model.QueryId) </dt>
 <dd>
 <input asp-for="QueryId" class="form-control" />
 </dd>
 </dl>
 </div>
 <input type="submit" value="Show" />
 <a href="#" class="btn btn-primary" onclick="ShowResult()">Search</a>
 <!-- 新增这个容器，用来展示查询结果 -->
 <div id="queryResultContainer" class="mt-3"></div>
</div>

然后把Ajax的success回调改成把返回的PartialView内容插入这个容器（前面的JS代码已经改好了），这样点击搜索按钮后，结果就会直接显示在按钮下方了。

4. 确保返回的是PartialView #

你的控制器已经返回PartialView("ViewQuery", qVM)，这一步是对的！PartialView不会包含布局页（Layout）的内容，只会返回你需要的结果片段，插入到页面里不会出现重复的导航栏、页脚等冗余内容。

现在你可以测试一下：输入有效的queryId，点击Search按钮，应该就能在按钮下方看到viewQuery.cshtml渲染的结果了。

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