如何通过Ajax调用Controller获取数据并绑定展示到前端视图？

1. View 层改造：预留结果展示位置 #

在原有搜索表单的结构中，于搜索输入框所在的input-group下方新增专门的结果承载容器，同时调整父级元素的定位样式，保证结果列表和输入框对齐，修改后的View核心代码：

@using (Html.BeginForm("Dashboard", "FileManagement", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
    <div class="container" style="margin-top: 30px;">
        <!-- 父级加相对定位，作为结果容器的定位参考 -->
        <div class="form-group" style="position: relative;">
            <div class="input-group">
                <span class="input-group-addon"><i class="glyphicon glyphicon-search"></i></span>
                <input type="text" id="searchId" placeholder="Search" class="form-control" onInput="edValueKeyPress()" />
            </div>
            <!-- 新增：搜索结果展示容器，悬浮在输入框下方 -->
            <div id="searchResultContainer" 
                 class="list-group" 
                 style="width: 100%; margin-top: 2px; max-height: 400px; overflow-y: auto; background: #fff; border-radius: 0 0 4px 4px; box-shadow: 0 2px 6px rgba(0,0,0,0.15);">
            </div>
        </div>
    </div>
}

2. Ajax 逻辑改造：完善success回调渲染 #

调整原有的Ajax代码，接收后端返回的JSON数据，动态拼接DOM结构插入到预留的结果容器中，同时增加简单的输入防抖、空输入拦截逻辑，避免无效请求。注意：原代码中GET请求附加的contentType参数为冗余配置，可直接删除，避免请求头异常，修改后的完整JS代码：

// 防抖定时器，避免连续输入频繁发请求
let searchDebounceTimer = null;
function edValueKeyPress() {
    const searchInput = document.getElementById("searchId");
    const searchContainer = document.getElementById("searchResultContainer");
    // 清除上一次的定时器
    clearTimeout(searchDebounceTimer);
    // 输入为空时，直接清空结果，不发请求
    if (!searchInput.value.trim()) {
        searchContainer.innerHTML = "";
        return;
    }
    // 300ms 无输入才发请求，降低服务器压力
    searchDebounceTimer = setTimeout(function() {
        $.ajax({
            type: "GET",
            url: '/FileManagement/GetTerm',
            data: { searchText: searchInput.value.trim() },
            dataType: "json",
            success: function (res) {
                // 先清空容器里的旧结果，避免上一次搜索内容残留
                searchContainer.innerHTML = "";
                // 无匹配结果的提示
                if (!res || res.length === 0) {
                    searchContainer.innerHTML = '<div class="list-group-item text-muted">未找到匹配的文件</div>';
                    return;
                }
                // 遍历返回的列表，拼接结果项
                res.forEach(item => {
                    // 单条结果项结构：包含缩略图、文件名、分类名
                    const listItem = document.createElement("a");
                    listItem.className = "list-group-item list-group-item-action";
                    listItem.innerHTML = `
                        <div class="d-flex align-items-center">
                            <img src="${item.Imagename}" alt="缩略图" style="width:40px; height:40px; object-fit:cover; margin-right:15px;">
                            <div>
                                <div style="font-weight:500;">${item.FileName}</div>
                                <div style="font-size:12px; color:#666;">所属分类：${item.CategoriesName}</div>
                            </div>
                        </div>
                    `;
                    // 把拼接好的项插入到容器
                    searchContainer.appendChild(listItem);
                });
            },
            error: function (errormessage) {
                // 错误提示直接显示在结果容器内，不打断用户操作
                searchContainer.innerHTML = '<div class="list-group-item text-danger">搜索请求出错，请稍后重试</div>';
            }
        });
    }, 300);
}

3. 冗余代码优化 #

• 原Controller中的IEnumerable<FileDetails> fileDetails = new List<FileDetails>();为未使用的冗余变量，可直接删除，不影响接口运行逻辑。
• 注：如果数据库存储的文件名称、分类名称包含用户可提交的自定义内容，拼接DOM时建议对展示文本做转义处理，避免脚本注入风险。

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