ASP.NET Core Model Binding: Using Dropdown List as Label

Question

I am making an ASP.NET Core Mvc web app and am working on a search form. In the form, a user can be looked up by first name, last name, zip, and either ID, email, or phone. Whether a user is inputting ID, email, or phone is determined by a drop down list. I want to bind this to the User model I have but am not sure how to do it dynamically with the dropdown list. I am able to bind first name, last name, and zip just fine since they are not dynamic fields. Code for what I have so far for the form is below:

<form asp-action="Search">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label for="sel1">Search By:</label>
            @* The dropdown menu to choose input type *@
            <select class="form-control" id="sel1">
                <option>ID</option>
                <option>Email</option>
                <option>Phone</option>
            </select>
     </div>
     @* Where users would input information for the dropdown field *@
     <div class="form-group">
         <label for="id">Value:</label>
         <input type="text" class="form-control clearable" id="id" Placeholder="0123456789">
    </div>
    <div class="form-group">
        <label asp-for="FirstName">First Name:</label>
        <input asp-for="FirstName" type="text" class="form-control clearable" id="firstName" Placeholder="Jane">
        <span asp-validation-for="FirstName" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="LastName">Last Name:</label>
        <input asp-for="LastName" type="text" class="form-control clearable" id="lastName" Placeholder="Doe">
        <span asp-validation-for="LastName" class="text-danger"></span>
    </div>
    <div class="form-group">
        <label asp-for="Zip">Zip Code:</label>
        <input asp-for="Zip" type="text" class="form-control clearable" id="zipCode" Placeholder="55555">
        <span asp-validation-for="Zip" class="text-danger"></span>
    </div>
    <div class="form-group">
        <input type="submit" value="Search" class="btn btn-default" id="search" />
    </div>
</form>

Then the code where the model is bound on the Search function:

public async Task<IActionResult> Search([Bind("FirstName, LastName, Zip")] Consumer consumer)
    {
        // Code....
    }

Is there a way to dynamically bind the input for the text input with id="id" based on the dropdown menu selection? Thanks in advance.

Answer 1

There's two options:

1. Render all the fields to the page (first, last, zip, etc.), and then use JavaScript to hide/show those fields based on the selection in the drop down list. For example, if you select "First Name", then show the FirstName input and hide the others. The user then enters their keywords in that input, and when they post, it will bind to FirstName naturally.

2. Post the value of the drop down and a generic text input. In your action, you can then simply switch on the value of the drop down and query the right property:

    IQueryable<Foo> query = db.Foos; switch (model.MyDropDownSelection) { case "FirstName": query = query.Where(x => x.FirstName.Contains(keyword)); break; // etc. }