Получить значение из текстового ввода после фокуса и отобразить данные из этого значения

Question

У меня есть 3 ввода текста для UserID, UserName и электронной почты;

<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">

в моей базе данных:

UserID (строка) | Имя пользователя (строка) | адрес электронной почты (строка)

сатриодвих | Сатрио ДвиХурипто | [e-mail]

1. Текстовое имя пользователя отображается, но текстовое имя пользователя и адрес электронной почты скрыты
2. Когда я набираю satriodwih в userID и focusOut(щелкните вкладку или щелкните за пределами текстового поля), отображаются имя пользователя текстового поля и адрес электронной почты, а их значение берется из базы данных.

И у меня есть jquery для 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"); }
});});

Что я должен сделать? Застрял слишком долго.

Answer 1

Вам нужно создать метод действия контроллера, который возвращает 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 находится в другом контроллере, то вы должны изменить URL, т.е. /users/getuserdata если это в UsersController.cs,

Answer 2

Почему у вас много функций вместе?

Проблема заключается в использовании # в 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"); }
    });
});