MVC中Ajax+Jquery实现无刷新提交至Categories表问题排查

嘿，我来帮你排查下问题所在，你遇到的点击无响应、请求没进入Create方法的情况，主要有几个关键原因，咱们一步步来解决：

1. 防伪令牌缺失，请求被ASP.NET拦截 #

你的控制器方法加了[ValidateAntiForgeryToken]特性，这是ASP.NET的安全机制，但你的Ajax POST请求里完全没携带这个令牌，导致请求直接被拒绝，根本到不了Create方法。

修复方法：

• 在视图里添加防伪令牌隐藏域：@Html.AntiForgeryToken()
• 在Ajax请求的data里带上令牌值

2. jQuery重复引用引发冲突 #

你在<head>里同时加载了jquery-1.12.4.js和jquery-1.12.4.min.js，这会导致jQuery被重复初始化，可能引发事件绑定失效、方法无法调用等问题。

修复方法：删掉其中一个引用，推荐保留min版（压缩版）用于生产环境。

3. 错误分支的DOM选择器写错了 #

失败逻辑里的$("div-alerta")少了ID选择器的#符号，应该是$("#div-alerta")，不然找不到目标元素，自然没法修改提示样式。

4. 提示容器初始状态与样式缺失 #

你的#div-alerta初始没有Bootstrap的alert基础类，而且默认是显示状态，slideDown效果会失效，样式也不符合规范。

修复方法：给提示div添加alert类，并设置初始隐藏：style="display:none;"

视图 create.html #

<head>
    <!-- 只保留一个jQuery引用 -->
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
</head>
<body>
    <!-- 优化提示容器的初始样式与状态 -->
    <div id="div-alerta" class="alert" style="display:none;">
        <label id="mensaje-alerta"></label>
    </div>
    <hr />
    @Html.LabelFor(model => model.v_Nombre, htmlAttributes: new { @class = "control-label col-md-2" })
    <div class="col-md-10">
        <input class="form-control" type="text" id="txtNombre" />
    </div>
    <!-- 添加防伪令牌 -->
    @Html.AntiForgeryToken()
    <div class="form-group">
        <div class="col-md-offset-2 col-md-10">
            <input type="button" value="Crear" id="btnCrearCategoria" class="btn btn-outline-success btn-lg" />
        </div>
    </div>
</body>
</html>
@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    <script>
        $(function () {
            $("#btnCrearCategoria").click(function () {
                var url = "@Url.Action("Create", "Categorias")";
                var nombre = $("#txtNombre").val();
                // 获取防伪令牌值
                var token = $('input[name="__RequestVerificationToken"]').val();
                
                var data = {
                    __RequestVerificationToken: token,
                    v_Nombre: nombre
                };

                $.post(url, data)
                .done(function (response) {
                    var alertDiv = $("#div-alerta");
                    if (response.Ok) {
                        alertDiv.removeClass("alert-danger").addClass("alert-success");
                    } else {
                        // 修正选择器错误
                        alertDiv.removeClass("alert-success").addClass("alert-danger");
                    }
                    $("#mensaje-alerta").html(response.Mensaje);
                    alertDiv.slideDown(100);
                    // 可选：清空输入框提升用户体验
                    $("#txtNombre").val('');
                })
                // 增加请求失败的捕获逻辑，方便调试
                .fail(function(xhr, status, error) {
                    var alertDiv = $("#div-alerta");
                    alertDiv.removeClass("alert-success").addClass("alert-danger");
                    $("#mensaje-alerta").html("请求失败：" + error);
                    alertDiv.slideDown(100);
                });
            });
        });
    </script>
}

控制器（可选优化） #

可以增加模型验证逻辑，把前端的验证错误也反馈给用户：

[HttpPost]
[ValidateAntiForgeryToken]
public JsonResult Create(Categoria categoria)
{
    var resultado = new BaseRespuesta();
    try
    {
        if (ModelState.IsValid)
        {
            db.Categorias.Add(categoria);
            db.SaveChanges();
            resultado.Mensaje = "Categoria creada correctamente";
            resultado.Ok = true;
        }
        else
        {
            // 收集模型验证错误信息
            var errors = ModelState.Values.SelectMany(v => v.Errors).Select(e => e.ErrorMessage);
            resultado.Mensaje = string.Join(" ", errors);
            resultado.Ok = false;
        }
    }
    catch (Exception ex)
    {
        resultado.Mensaje = ex.Message;
        resultado.Ok = false;
    }
    return Json(resultado);
}

另外，你不需要加载局部视图，因为这里只是通过JSON返回状态和提示文本，直接用JSON数据更新页面元素就足够了。

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