How to modify default text field in Razor page

Question

My “Edit” view is scaffolded razor page with a form that populates values via the model.

one property

[DisplayName("MOVING DIRECTION")]
 public string Direction { get; set; } = null!;

so the user can enter text (either OUTWARD or INWARD) in the form.

I would like to enforce the input with dropdown choices to prevent incorrect input (spelling). Is there a way (in model, razor page) to display the options (e.g. OUTWARD or INWARD) rather then the single "current" value displayed in the field. Values are coming from a database.

Many thanks

Answer 1

I would like to enforce the input with dropdown choices to prevent incorrect input (spelling)

According to your scenario, it can be done using List<SelectListItem> DirectionOptions.

Within your model, keep the Direction property as is. In the PageModel class, add a DirectionOptions property and populate it with a list of SelectListItem objects in the OnGet method, either statically or from a database query.

Finally, in the Razor page, use the <select> element with asp-for to bind it to the Direction property and asp-items to bind the dropdown options.

Is there a way (in model, razor page) to display the options (e.g. OUTWARD or INWARD) rather then the single "current" value displayed in the field. Values are coming from a database.

Yeah, there's the way. To display the options (e.g., "OUTWARD" or "INWARD") in a dropdown in your Razor page, you can fetch the values from the database and bind them to the dropdown.

In order to simulate the scenario I am showing the static value binding within the List<SelectListItem> DirectionOptions But you can bind it from database.

Let's see the implementation in practice:

Model:

public class YourModel
{
    [DisplayName("MOVING DIRECTION")]
    public string Direction { get; set; } = null!;
}

Razor Page Model:

public class EnforceInputModel : PageModel
{
    [BindProperty]
    public YourModel YourModel { get; set; }

    public List<SelectListItem> DirectionOptions { get; set; }

    public void OnGet()
    {
        // Static list of dropdown options
        DirectionOptions = GetDirectionOptions(); 
    }

    
    private List<SelectListItem> GetDirectionOptions()
    {
        // Static list of dropdown options for testing
        return new List<SelectListItem>
            {
                new SelectListItem { Value = "OUTWARD", Text = "OUTWARD" },
                new SelectListItem { Value = "INWARD", Text = "INWARD" }
            };

        //You can also call them from databsae and return the value
    }
}

View:

@page
@model DemoRazorPageApp.Pages.EnforceInputModel

<form method="post">
    <div class="form-group">
        <label asp-for="YourModel.Direction" class="control-label"></label>
        <select asp-for="YourModel.Direction" class="form-control" asp-items="Model.DirectionOptions"></select>
        <span asp-validation-for="YourModel.Direction" class="text-danger"></span>
    </div>
    <br />
    <button type="submit" class="btn btn-primary">Submit</button>
</form>

Output: