如何用Javascript $.get调用ASP.NET MVC Action方法并打印返回值？

我来帮你把这个冰淇淋口味组合验证的功能落地，结合ASP.NET MVC后端和jQuery前端的最佳实践，把你提到的代码片段补全并整理成可运行的完整方案：

第一步：后端Controller实现 #

首先得在你的Controller里写好IsFavoriteIceCreamCombo这个接口方法，用来判断用户输入的组合是不是你喜爱的：

public class IceCreamController : Controller
{
    // 这里定义你喜爱的口味组合，顺序不影响的话正反都要加哦
    private readonly HashSet<(string, string)> _favoriteCombos = new HashSet<(string, string)>
    {
        ("巧克力", "香草"),
        ("香草", "巧克力"),
        ("草莓", "薄荷"),
        ("薄荷", "草莓")
        // 可以继续添加更多你爱的组合
    };

    [HttpGet]
    public JsonResult IsFavoriteIceCreamCombo(string flavor1, string flavor2)
    {
        // 先处理用户输入的大小写和空格问题，避免误判
        var cleanFlavor1 = flavor1?.Trim().ToLower() ?? string.Empty;
        var cleanFlavor2 = flavor2?.Trim().ToLower() ?? string.Empty;

        // 检查是否在喜爱组合列表里，正反顺序都要考虑
        bool isFavorite = _favoriteCombos.Contains((cleanFlavor1, cleanFlavor2)) || 
                          _favoriteCombos.Contains((cleanFlavor2, cleanFlavor1));

        return Json(isFavorite, JsonRequestBehavior.AllowGet);
    }
}

第二步：前端JavaScript补全 #

你提到的onblur逻辑我帮你补上了，确保两个输入框都失去焦点后才发起请求，避免频繁调用接口：

$(document).ready(function() {
    // 标记两个输入框是否已经失去过焦点
    let hasFlavor1Blurred = false;
    let hasFlavor2Blurred = false;

    // 绑定第一个输入框的blur事件
    $('#Flavor1').on('blur', function() {
        hasFlavor1Blurred = true;
        checkFavoriteCombo();
    });

    // 绑定第二个输入框的blur事件
    $('#Flavor2').on('blur', function() {
        hasFlavor2Blurred = true;
        checkFavoriteCombo();
    });

    // 核心验证函数
    function checkFavoriteCombo() {
        // 只有两个输入框都失去过焦点才进行验证
        if (!hasFlavor1Blurred || !hasFlavor2Blurred) return;

        const flavor1 = $('#Flavor1').val().trim();
        const flavor2 = $('#Flavor2').val().trim();

        // 先判断输入是否有效，避免空值请求
        if (!flavor1 || !flavor2) {
            $('#ValidationResult').text('请输入两种不同的冰淇淋口味哦').css('color', 'orange');
            return;
        }

        // 调用后端接口
        $.get('/IceCream/IsFavoriteIceCreamCombo', {
            flavor1: flavor1,
            flavor2: flavor2
        }, function(response) {
            // 根据返回结果给用户反馈
            if (response) {
                $('#ValidationResult').text('哇塞！这是我最爱的冰淇淋组合🥳').css('color', 'green');
            } else {
                $('#ValidationResult').text('这个组合也不错，但不是我的最爱哦😉').css('color', 'gray');
            }
        });
    }
});

第三步：视图页面（Razor）示例 #

对应的视图页面可以这么写，把输入框和结果提示区域都放进去：

@{
    ViewBag.Title = "冰淇淋口味组合测试";
}

<div class="container mt-5">
    <h2>分享你的冰淇淋口味组合</h2>
    <div class="row mt-3">
        <div class="col-md-6">
            <label for="Flavor1" class="form-label">第一种口味</label>
            <input type="text" id="Flavor1" class="form-control" placeholder="比如：巧克力">
        </div>
        <div class="col-md-6">
            <label for="Flavor2" class="form-label">第二种口味</label>
            <input type="text" id="Flavor2" class="form-control" placeholder="比如：香草">
        </div>
    </div>
    <div id="ValidationResult" class="mt-3 fs-5"></div>
</div>

@section Scripts {
    <!-- 确保引入jQuery -->
    <script src="~/Scripts/jquery-3.6.4.min.js"></script>
    <!-- 上面的JavaScript代码可以放在这里，或者单独的.js文件中引用 -->
}

几个关键细节提醒 #

• 输入处理：后端统一转小写和去除空格，避免用户输入" 巧克力 "或者"Chocolate"导致判断错误
• 接口安全：ASP.NET MVC中用[HttpGet]特性配合JsonRequestBehavior.AllowGet（MVC 5及以上），允许GET请求返回JSON
• 用户体验：添加了输入为空的提示，避免无效请求；返回结果用友好的文字和颜色反馈给用户

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