.NET Core 3.1 MVC局部视图无法嵌入主视图，全屏显示问题求助

问题现象 #

• 主视图可将参数提交至控制器的PartialViewResult方法
• 控制器方法能正确返回局部视图及数据
• 局部视图显示数据时会占据整个屏幕，无法嵌入主视图内

问题根源 #

核心问题是未指定AJAX请求的目标更新容器，且可能缺少必要的无侵入式AJAX脚本，导致表单提交后直接跳转渲染局部视图，而非异步更新主视图内的指定区域。

解决方案 #

1. 引入必要的AJAX脚本 #

ASP.NET Core MVC的data-ajax属性依赖jquery.unobtrusive-ajax.js，需在主视图或布局页中添加以下引用：

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-ajax-unobtrusive/jquery.unobtrusive-ajax.min.js"></script>

2. 修改主视图：添加局部视图容器并指定AJAX更新目标 #

在主视图中新增用于渲染局部视图的容器，并为表单添加data-ajax-update属性指定该容器：

修改后的主视图代码：

@model Compliance.Recordings.Models.ViewModels.SearchViewModel;
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

@{
    var durationValues = new List<string> { "--", "1", "5", "15", "20", "30", "40", "50", "60", "70", "80", "90", "100", "150", "200", "250", "300", "500", "1000", "5000", "10000", "100000" };
    var durationList = new SelectList(durationValues);
    var extensionValues = new List<string> { "All", "MP3", "WAV", "PDF" };
    var extensioList = new SelectList(extensionValues);
}

<form asp-action="SearchRecordings" asp-controller="Player"
      data-ajax="true" data-ajax-method="POST"
      data-ajax-begin="OnBegin" data-ajax-failure="OnFailure"
      data-ajax-success="OnSuccess" data-ajax-complete="OnComplete"
      data-ajax-update="#recordingResults"> <!-- 指定局部视图渲染容器 -->
    <table class="table">
        <thead>
            <tr>
                <th colspan="4" scope="col">Recording Search</th>
            </tr>
        </thead>
        <tr>
            <td>File Name</td>
            <td><input type="text" name="FileName"></td>
            <td>Phone</td>
            <td><input type="text" name="phoneFromFileName"></td> <!-- 修正参数名称匹配控制器 -->
        </tr>
        <tr>
            <td>Duration Start</td>
            <td>@Html.DropDownList("DurationStart", durationList)</td>
            <td>Duration End</td>
            <td>@Html.DropDownList("DurationEnd", durationList)</td>
        </tr>
        <tr>
            <td>Start Date</td>
            <td><input type="date" name="StartDate"></td>
            <td>End Date</td>
            <td><input type="date" name="EndDate"></td>
        </tr>
        <tr>
            <td>Partner</td>
            <td>
                @(Html.DropDownListFor(m => m.PartnerList,
        new SelectList(Model.PartnerList, "Id", "Name", Model.PartnerList),
        "All"))
            </td>
            <td>File Extension</td>
            <td>@Html.DropDownList("Extension", extensioList)</td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td><input type="submit"></td>
        </tr>
    </table>
</form>

<div id="progress"></div>
<!-- 新增局部视图渲染容器 -->
<div id="recordingResults"></div>

<script>
    // 实现AJAX回调函数（若不需要可删除）
    function OnBegin() {
        $("#progress").html("加载中...");
    }
    function OnSuccess() {
        $("#progress").html("");
    }
    function OnFailure() {
        $("#progress").html("加载失败");
    }
    function OnComplete() {
        // 完成后的自定义操作
    }
</script>

3. 控制器参数匹配优化（可选） #

确保表单输入框的name属性与控制器方法参数名称完全一致，比如原主视图中Phone输入框的name需改为phoneFromFileName，否则参数绑定会失败。

关键说明 #

• data-ajax-update="#recordingResults"：指定AJAX请求成功后，将局部视图内容插入到对应ID的容器中，实现主视图内的局部更新。
• jquery.unobtrusive-ajax.js：是ASP.NET Core MVC无侵入式AJAX的核心依赖，缺失会导致data-ajax系列属性失效。

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