jQuery 函数在 mvc 文本更改事件中未被调用

Question

我在 jQuery 使用 mvc 应用程序时遇到这种奇怪的行为。

下面是我在其中实现了文本更改事件的 MVC 视图，

 @Html.TextBoxFor(m => m.UserId, new { @class = "form-control" })
                            @Html.ValidationMessageFor(m => m.UserId, "", new { @class = "text-danger" })

    $("#UserId").change(function () {
        var UserId = $(this).val();
        //$("#txtName").val(emailId);
        $.ajax({
            url: 'GetValidUserName',
            type: 'POST',
            data: JSON.stringify({ UserId: UserId }),
            dataType: 'json',
            contentType: 'application/json',
            success: function (data) {
                if (!$.trim(data)) {
                    alert("User does not exist in system. Please enter valid User Id.");
                    $(':input[type="submit"]').prop('disabled', true);
                }
                else {
                    $("#UserId").val(data);
                    $("#UserId").focus();
                    $(':input[type="submit"]').prop('disabled', false);
                }
            }
        });
    });

当我第一次直接加载索引视图时调试应用程序时，jQuery 函数被调用并正确调用控制器操作。http://localhost:51012/UserApplication/Index

但是当我再次加载视图时，jQuery 函数没有被调用。

控制器代码，

 public JsonResult GetValidUserName(string userId)
    {
        LMTUsage objLMT = new LMTUsage();
        LMTDAL objLMTDAL = new LMTDAL();

        string UserID = "";

        objLMT.UserList = objLMTDAL.GetAll_User("", 0, "6");

        var AllUsersInDatabase = from p in objLMT.UserList
                                 where p.UserId == userId
                                 select new
                                 {
                                     Name = p.UserName,
                                     Id = p.UserId,
                                 };

        foreach (var user in AllUsersInDatabase)
        {
            if (user.Name != null)
            {
                UserID = user.Id;
            }
        }
        return Json(UserID, JsonRequestBehavior.AllowGet);
    }

Answer 1

AJAX回调有几个问题：

1) type: 'POST' 选项需要 [HttpPost] 属性。如果该属性不存在于操作方法中，请改用 type: 'GET'。

2) 您不需要 JSON.stringify() 来传递包含简单类型（数字和字符串值）的单个参数。一个简单的{ userId: UserId }应该没问题。

3) 控制器动作的参数名必须与AJAX回调发送的参数名完全匹配。

因此，您的 AJAX 回调应遵循以下示例：

$(function () {
    $("#UserId").change(function () {
        var UserId = $(this).val();

        $.ajax({
            url: '@Url.Action("GetValidUserName", "ControllerName")',
            type: 'GET',
            data: { userId: UserId },
            dataType: 'json',
            success: function (data) {
                if (!$.trim(data)) {
                    alert("User does not exist in system. Please enter valid User Id.");
                    $(':input[type="submit"]').prop('disabled', true);
                }
                else {
                    $("#UserId").val(data);
                    $("#UserId").focus();
                    $(':input[type="submit"]').prop('disabled', false);
                }
            }
        });
    });
});