1

我有 3 个用于用户 ID、用户名和电子邮件的输入文本；

<input type="text" name="UserID" class="form-control" id="input-loader" placeholder="User ID">
<input type="text" name="UserName" class="form-control" id="user-show" placeholder="User Name">
<input type="text" name="Email" class="form-control" id="email-show" placeholder="Email">

在我的数据库中：

用户 ID（字符串）| 用户名（字符串） | 电子邮件（字符串）

萨特里奥德维| Satrio DwiHuripto | sdwihripto@lala.com

  1. 显示文本框用户 ID，但隐藏文本框用户名和电子邮件
  2. 当我在 userID 和 focusOut 中键入 satriodwih（单击选项卡或单击文本框外部）时，显示文本框用户名和电子邮件，它们的值来自数据库。

我有 jquery for focusout 像这样：

$(function () {
$body = $("body"),
$("#user-show").hide(),
$("#email-show").hide(),
$(function () {
    $("#input-loader").focusout(function () {
        var UserIDc = document.getElementById("#input-loader");
        $(function () {
            $.get("/mockjax", function () {
                $("#user-show").show(),
                $("#email-show").show(),
            });
        });
    });
});
$(document).on({
    ajaxStart: function () { $body.addClass("loading"); },
    ajaxStop: function () { $body.removeClass("loading"); }
});});

我必须做什么？卡得太久了。

4

2 回答 2

2

您需要创建一个控制器操作方法，该方法返回包含 UserName 和 Email 的 json，如下所示：

[HttpGet]
public ActionResult GetUserData(string userID)
{
    string userName = ...; // get user name from database here
    string email = ""; // get email from database here

    return Json(new { ID = userID, UserName = userName, Email = email }, JsonRequestBehavior.AllowGet);
}

然后将您的脚本部分更改为：

$(function () {
    $body = $("body");
    $("#user-show").hide();
    $("#email-show").hide();
    $(function () {
        $("#input-loader").focusout(function () {

            // get value from input-loader textbox
            var UserIDc = $(this).val();

            $(function () {
                // call /home/getuserdata and pass the user id from input-loader textbox
                $.get("/home/getuserdata?userID=" + UserIDc, function (result) {

                    // set user name and email textbox value 
                    $('#user-show').val(result.UserName);
                    $('#email-show').val(result.Email);

                    // show user name and email textbox
                    $("#user-show").show();
                    $("#email-show").show();
                });
            });
        });
    });
    $(document).on({
        ajaxStart: function () { $body.addClass("loading"); },
        ajaxStop: function () { $body.removeClass("loading"); }
    });
});

请注意，我/home/getuserdata在上面的代码中使用了 url，因为我假设GetUserDataaction 方法在HomeController.cs. 如果GetUserData在不同的控制器中，那么您必须更改 url，即/users/getuserdata如果它在UsersController.cs.

于 2014-07-17T05:14:01.580 回答
1

为什么你有很多功能在一起？

问题是使用#in document.getElementById("#input-loader");。你应该删除它。

$(function () {
    $body = $("body"),
    $("#user-show").hide(),
    $("#email-show").hide(),

    $("#input-loader").blur(function () {
        // you should not use # here:
        // var UserIDc = document.getElementById("input-loader"); 
        // and also it's simpler to use:
        var UserIDc = $("#input-loader");

        $.get("/mockjax", function () {
            $("#user-show").show(),
            $("#email-show").show(),
        });

    });

    $(document).on({
        ajaxStart: function () { $body.addClass("loading"); },
        ajaxStop: function () { $body.removeClass("loading"); }
    });
});
于 2014-07-17T04:48:52.157 回答