Dynamically Bind Input Values from TextBox

Question

User-713372499 posted

I'm trying to figure out the best approach for dynamically binding values to inputs based on the value entered into another input. Scenario is I have a view with three textbox inputs (Email, First Name, Last Name). When the user enters the email address I want to check the database to determine if the email already exists and if it does return the First and Last Name values and bind them to the appropriate input. 

I've seen code for doing cascading drop downs and I can go down this route if necessary,  but I hoping there are some more elegant (easier) solutions. I utilize the "Remote" validation logic to determine if the email address already exists in the database, so I'm hoping there is something like it or a way to extend it to populate the other input controls.

Answer 1

User475983607 posted

harrinbw

I'm trying to figure out the best approach for dynamically binding values to inputs based on the value entered into another input. Scenario is I have a view with three textbox inputs (Email, First Name, Last Name). When the user enters the email address I want to check the database to determine if the email already exists and if it does return the First and Last Name values and bind them to the appropriate input. 

Very simple.  Make an AJAX request (or fetch) on blur (lost focus) to an action that returns the first and last name if they exists.  Populate the textboxes with the response.

harrinbw

I've seen code for doing cascading drop downs and I can go down this route if necessary,  but I hoping there are some more elegant (easier) solutions. I utilize the "Remote" validation logic to determine if the email address already exists in the database, so I'm hoping there is something like it or a way to extend it to populate the other input controls.

MVC has a remote validation feature but this is used to validate inputs and handle error messages. It is not designed to populate a user input.   Although you might be able to hak somehting together I would just do an HTTP request from JavaScript as it is pretty simple and easy to do.

Answer 2

User-854763662 posted

Hi harrinbw ,

As mgebhard said , the ajax request is the easiest way, the following is a working simple demo 

Controller

public async Task<IActionResult> CheckUser(string email)
{
       var user = await context.User.Where(u=>u.Email==email).SingleOrDefaultAsync();
       if(user==null)
       {
           return Json(new User());
       }
       return Json(user);
}

View

<form id="frm"  method="post">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="Email" class="control-label"></label>
        <input asp-for="Email" class="form-control" id="txtEmail" onchange="CheckUser()"/>
        <span asp-validation-for="Email" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="FirstName" class="control-label"></label>
        <input asp-for="FirstName" class="form-control" id="txtFirstName"/>
        <span asp-validation-for="FirstName" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="LastName" class="control-label"></label>
        <input asp-for="LastName" class="form-control" id="txtLastName"/>
        <span asp-validation-for="LastName" class="text-danger"></span>
    </div>
    <div class="form-group">
        <input type="button" class="btn btn-primary" value="Create" />
    </div>
</form>

@section Scripts
{
<script>
    function CheckUser() {
        var email = document.getElementById("txtEmail").value;
        $.ajax({
            type: "post",
            url: "/Home/CheckUser?email=" + email,
            dataType: "json",
            success: function (result) {
                $("#txtFirstName").val(result.firstName);
                $("#txtLastName").val(result.lastName);
            }
        });
    }
</script>
}

Result

Best Regards,

Sherry