如何将jQuery Tabs视图中的@Html.Action转换为Ajax调用？

我来给你详细讲讲怎么把原来的服务器端直接渲染的Tab内容改成Ajax异步加载，这样能提升页面初始加载速度，还能实现懒加载效果：

第一步：修改视图的HTML结构 #

先把原来@Html.Action所在的div改成空容器，因为我们要通过Ajax动态填充内容：

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Obituaries</a></li>
    <li><a href="#tabs-2">Naturalizations</a></li>
    <li><a href="#tabs-3">Censuses</a></li>
  </ul>
  <!-- 空div，等待Ajax加载内容 -->
  <div id="tabs-1"></div>
  <div id="tabs-2"></div>
  <div id="tabs-3"></div>
</div>

第二步：序列化Model参数 #

因为原来的@Html.Action需要传递Model参数，我们先把视图的Model序列化成JavaScript对象，方便Ajax传递：

@{
    // 将Model序列化为JSON字符串
    var serializedModel = Json.Serialize(Model);
}
<script>
    // 转换为可在JS中使用的对象
    var searchModel = @Html.Raw(serializedModel);
</script>

第三步：初始化jQuery Tabs并实现Ajax加载 #

我们可以利用jQuery UI Tabs的事件，实现懒加载（只有当用户点击Tab时才加载对应内容），同时处理默认加载第一个Tab的逻辑：

$(function() {
    // 初始化Tabs组件
    $("#tabs").tabs({
        // 当Tab切换前触发的事件
        beforeActivate: function(event, ui) {
            const targetTab = ui.newPanel;
            const tabId = targetTab.attr("id");
            
            // 根据Tab ID匹配对应的Action地址
            let actionUrl = "";
            switch(tabId) {
                case "tabs-1":
                    actionUrl = "@Url.Action("Search", "Obituary")";
                    break;
                case "tabs-2":
                    // 替换成你实际的Naturalizations对应的Controller名称
                    actionUrl = "@Url.Action("Search", "Naturalization")";
                    break;
                case "tabs-3":
                    // 替换成你实际的Censuses对应的Controller名称
                    actionUrl = "@Url.Action("Search", "Census")";
                    break;
            }
            
            // 只有当Tab内容为空时才发起请求，避免重复加载
            if(targetTab.html().trim() === "") {
                // 显示加载提示（可选）
                targetTab.html("<p>Loading content...</p>");
                
                // 发起Ajax请求
                $.ajax({
                    url: actionUrl,
                    type: "GET",
                    data: { parameters: searchModel }, // 传递序列化后的Model参数
                    success: function(response) {
                        // 将Action返回的视图内容填充到Tab中
                        targetTab.html(response);
                    },
                    error: function() {
                        targetTab.html("<p>Oops, failed to load content.</p>");
                    }
                });
            }
        }
    });

    // 可选：页面加载完成后默认加载第一个Tab的内容
    const firstTab = $("#tabs-1");
    firstTab.html("<p>Loading content...</p>");
    $.ajax({
        url: "@Url.Action("Search", "Obituary")",
        type: "GET",
        data: { parameters: searchModel },
        success: function(response) {
            firstTab.html(response);
        },
        error: function() {
            firstTab.html("<p>Oops, failed to load content.</p>");
        }
    });
});

简化版：使用$.load()替代$.ajax #

如果你不需要复杂的错误处理和加载状态，也可以用更简洁的$.load()方法：

$(function() {
    $("#tabs").tabs({
        beforeActivate: function(event, ui) {
            const targetTab = ui.newPanel;
            const tabId = targetTab.attr("id");
            let actionUrl = "";
            
            switch(tabId) {
                case "tabs-1":
                    actionUrl = "@Url.Action("Search", "Obituary")";
                    break;
                case "tabs-2":
                    actionUrl = "@Url.Action("Search", "Naturalization")";
                    break;
                case "tabs-3":
                    actionUrl = "@Url.Action("Search", "Census")";
                    break;
            }
            
            if(targetTab.html().trim() === "") {
                targetTab.load(actionUrl, { parameters: searchModel });
            }
        }
    });

    // 默认加载第一个Tab
    $("#tabs-1").load("@Url.Action("Search", "Obituary")", { parameters: searchModel });
});

注意事项 #

• 确保你的Controller的Search Action能够正确接收parameters参数，参数类型要和你的Model一致。
• 如果Model结构比较复杂，建议检查JSON序列化/反序列化是否正常，必要时可以拆分参数传递。
• 懒加载逻辑可以根据需求调整，比如如果希望所有Tab都预加载，直接在页面初始化时遍历所有Tab发起请求即可。

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