ASP.NET MVC中点击按钮时发起两个AJAX请求是否可行？

当然可以！在同一个搜索按钮点击事件里发起两个独立的AJAX请求完全可行，这也是处理这类多接口并行请求的常见场景。下面我给你一步步拆解实现思路和代码示例：

1. 前端AJAX实现（jQuery版本） #

假设你的首页搜索区域结构大概是这样：

<div class="search-container">
    <input type="text" id="searchKeyword" placeholder="输入关键词搜索..." />
    <button id="searchBtn">搜索</button>
</div>
<!-- 用来渲染结果的容器 -->
<div id="itemsResult"></div>
<div id="categoryResult"></div>

然后编写JS逻辑，监听按钮点击事件，同时发起两个AJAX请求：

$(document).ready(function() {
    $('#searchBtn').click(function(e) {
        e.preventDefault(); // 阻止表单默认提交行为（如果是表单包裹的话）
        var keyword = $('#searchKeyword').val().trim();
        
        if (!keyword) {
            alert('请输入搜索关键词');
            return;
        }

        // 发起第一个请求：获取Items部分视图
        $.ajax({
            url: '@Url.Action("SearchItems", "Home")', // 替换成你的控制器和Action路径
            type: 'GET',
            data: { keyword: keyword },
            beforeSend: function() {
                // 可选：显示加载状态
                $('#itemsResult').html('<p>加载中...</p>');
            },
            success: function(result) {
                $('#itemsResult').html(result);
            },
            error: function() {
                $('#itemsResult').html('<p>加载商品列表失败，请重试</p>');
            }
        });

        // 发起第二个请求：获取分类部分视图
        $.ajax({
            url: '@Url.Action("SearchCategory", "Home")', // 替换成你的控制器和Action路径
            type: 'GET',
            data: { keyword: keyword },
            beforeSend: function() {
                $('#categoryResult').html('<p>加载中...</p>');
            },
            success: function(result) {
                $('#categoryResult').html(result);
            },
            error: function() {
                $('#categoryResult').html('<p>加载分类列表失败，请重试</p>');
            }
        });

        // 如果你需要等待两个请求都完成后做一些操作（比如隐藏全局加载），可以用Promise.all
        var request1 = $.ajax({ url: '@Url.Action("SearchItems", "Home")', type: 'GET', data: { keyword: keyword } });
        var request2 = $.ajax({ url: '@Url.Action("SearchCategory", "Home")', type: 'GET', data: { keyword: keyword } });
        Promise.all([request1, request2]).then(function() {
            console.log('两个搜索请求都完成了');
            // 这里可以做全局的结束操作，比如隐藏顶部加载条
        });
    });
});

2. 后端Action方法实现 #

在你的控制器（比如HomeController）中编写两个Action，返回对应的PartialView：

public ActionResult SearchItems(string keyword)
{
    // 调用Elasticsearch查询获取Items数据
    var items = _elasticSearchService.SearchItems(keyword);
    // 返回部分视图，传递数据模型
    return PartialView("ItemsPartialView", items);
}

public ActionResult SearchCategory(string keyword)
{
    // 调用Elasticsearch查询获取分类数据
    var categories = _elasticSearchService.SearchCategories(keyword);
    // 返回部分视图，传递数据模型
    return PartialView("CategoryPartialView", categories);
}

注意事项 #

• 确保两个PartialView（ItemsPartialView.cshtml和CategoryPartialView.cshtml）已经创建，并且能正确接收模型数据进行渲染。
• 如果你的Elasticsearch查询比较耗时，考虑在后端做异步处理，把Action改成async Task<ActionResult>类型，避免阻塞请求。
• 可以根据需求添加防抖逻辑，比如用户连续点击搜索按钮时，取消之前的请求，防止重复请求。

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