C# MVC 无法在 Bootstrap 选项卡中加载部分视图答案

【问题标题】：C# MVC Can't load partial view in Bootstrap tabC# MVC 无法在 Bootstrap 选项卡中加载部分视图
【发布时间】：2021-02-01 18:03:18
【问题描述】：

我根本无法加载部分视图。我试图从我的索引视图的一部分的控制器操作中加载部分视图，但代码没有做任何事情。它甚至不会出错或触发控制器中的任何功能。到目前为止，这是我的相关代码

HomeController.cs

        public IActionResult Index()
        {
            return View();
        }
        
        [HttpGet]
        public PartialViewResult PartialBlock()
        {
            var dataItems = _db.Data
                .OrderBy(t => t.Title)
                .ToList();

            return PartialView("_PartialBlock", dataItems);
        }

Views/Home/Index.cshtml

<div id="partialViewContainer"  class="card-deck">
  <div class="row">
    <a id="loadView" asp-action="PartialBlock"></a>;  
  </div>
</div>

<script>
$('#loadView').on('load', function() {
    $.ajax({
        type: "GET"
        url: '/Home/PartialBlock',
        success: function (data, textStatus, jqXHR) {
            $('#partialViewContainer').html(data);
        }
    });
});
</script>

Views/Home/PartialBlock.cshtml

@model List<Data>

@foreach (var dataitem in Model)
{
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">@dataitem.Title</h5>
            <p class="card-text">@dataitem.Info</p>
            <p class="card-text"><small class="text-muted">More Text</small></p>
        </div>
    </div>
    </div>
}

【问题讨论】：

您已经为 url Home/Featured 映射到 PartialBlock() 操作的路由？如果没有，那么你应该使用Home\PartialBlock
哦，对不起，这是我的错，出于安全原因，我修改了代码 sn-p 以将其从原始代码中更改。让我在我的帖子中编辑它以解决这个问题。
这个文件的名称：Views/Home/PartialBlock.cshtml 应该是 Views/Home/_PartialBlock.cshtml 吗？（部分视图名称前的前导下划线）
@Roger 抱歉我复制错了，是的，应该是 Views/Home/_PartialBlock.cshtml 谢谢！

标签： c# ajax asp.net-mvc asp.net-core razor

【解决方案1】：

$('#loadView').on('load', function() {

此方法无法正确触发加载。可以使用jQuery的加载方法：

$('#loadView').load('/Home/PartialBlock', function (data) {
       $('#partialViewContainer').html(data);
 })

【讨论】：