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.

I don't see another way of doing this without having a custom Model Binder. You can send the "field" and the value and the model binder can map them accordingly. You could also have the fixed drop down columns as an Enum, so you don't use magic strings. You can see the example here on how to create a Custom Model Binder: learn.microsoft.com/en-us/aspnet/core/mvc/advanced/… — jpgrassi
– jpgrassi, Commented Feb 27, 2018 at 17:19

Chris Pratt · Accepted Answer · 2018-02-27 17:56:07Z

2

There's two options:

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.

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.
}

answered Feb 27, 2018 at 17:56

Chris Pratt

240k37 gold badges414 silver badges469 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

jollyroger23 Over a year ago

Went with the Javascript solution. Thanks!

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related