求助：通过AJAX/JSON加载带模型的Partial View并筛选数据库数据

你的核心问题在于：浏览器端的JavaScript无法解析ASP.NET的Razor语法（比如<partial>标签）。Razor标签是服务器端渲染时才会处理的代码，浏览器根本不认识它，直接把它插入DOM自然会抛出异常。另外你的循环逻辑也有问题——每次调用$('#locatieLijstAfter').html()都会覆盖容器里的内容，最后只会显示最后一条数据。

下面给你两种可行的解决方案：

方案1：让控制器直接渲染Partial View并返回HTML #

这种方式更符合ASP.NET MVC的设计思路，让服务器负责渲染Partial View的HTML，前端只需要把返回的HTML插入容器即可。

步骤1：修改控制器Action #

把原来返回Json的Action改成返回PartialView：

[HttpPost]
public PartialViewResult Test2(int id)
{
    List<Location> locations = _context.Locations.Where(x => x.CategoryId.Equals(id)).ToList();
    // 传入模型到Partial View，这里假设你的Partial View路径是~/Views/Shared/_LocationItemPartial.cshtml
    return PartialView("_LocationItemPartial", locations);
}

步骤2：更新Partial View #

让_LocationItemPartial.cshtml接收列表模型，并循环渲染每个Location项：

@model List<Location>

@foreach (var location in Model)
{
    <div class="location-item">
        <!-- 这里根据你的Location模型属性渲染内容，示例如下 -->
        <h4>@location.Name</h4>
        <p>@location.Address</p>
        <span>分类ID: @location.CategoryId</span>
    </div>
}

步骤3：简化JavaScript代码 #

AJAX成功后直接把返回的HTML插入容器：

function yoo(id) {
    $.ajax({
        type: 'POST',
        url: '/Home/Test2',
        data: { 'id': id },
        success: function(result){
            // 直接用返回的HTML替换容器内容
            $('#locatieLijstAfter').html(result);
        }
    })
}

方案2：前端基于JSON数据手动拼接HTML #

如果更倾向于前端处理DOM构建，可以保持控制器返回Json，然后在JS里循环拼接HTML结构：

步骤1：保留原控制器代码（返回Json） #

步骤2：修改JavaScript代码 #

先拼接好所有HTML内容，再一次性插入容器（避免循环中反复覆盖内容）：

function yoo(id) {
    $.ajax({
        type: 'POST',
        url: '/Home/Test2',
        data: { 'id': id },
        success: function(result){
            var htmlContent = '';
            // 循环遍历所有返回的Location数据
            for (var i = 0; i < result.length; i++) {
                var loc = result[i];
                // 拼接每个Location的HTML结构
                htmlContent += `
                    <div class="location-item">
                        <h4>${loc.Name}</h4>
                        <p>${loc.Address}</p>
                        <span>分类ID: ${loc.CategoryId}</span>
                    </div>
                `;
            }
            // 一次性插入到容器中
            $('#locatieLijstAfter').html(htmlContent);
        }
    })
}

两种方案都能解决你的问题，方案1更适合复杂的视图结构，后续维护Partial View更方便；方案2则更灵活，适合简单的DOM结构。

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