c# - 焦点移出后从文本输入获取值并显示该值的数据

Question

我有 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) sdwihuripto@lala.com

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

我有像这样的 jquery 焦点:

$(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"); }
});});

我必须做什么？卡住时间太长了。

Answer 1

您需要创建一个 Controller 操作方法，该方法返回包含用户名和电子邮件的 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"); }
    });
});

请注意，我在上面的代码中使用了 url /home/getuserdata，因为我假设 GetUserData 操作方法位于 HomeController.cs 中>。如果 GetUserData 位于不同的 Controller 中，则必须更改 url，即 /users/getuserdata(如果它位于 UsersController.cs 中)。