CODEWITHSUNDEEP
asp.net-corerazor-pages
OJB1
OJB1

Reputation: 2785

ASP.NET Core 2.2. Razor Pages - How to populate a form control based on another field

I have a form control "ConnectorType" which I turned into a dropdown list with pre-defined values (just 3qty currently)

When the user selects and item from this dropdown list, depending on the value selected I then want to populate another text box form control underneath.

To better explain, please see image below:

Screeshot

Example, if TCP Server IN is selected then the form control underneath (textbox)should automatically say "Inbound"

Ideally this text box should also have an attribute/configuration that prevents the user from entering their own text, grayed out perhaps. Once the create form is submitted, the textbox that contains this value "Inbound" will then be added to the SQL Table using Enitity Framework.

The solution requires that this field dynamically changes each time a new item is selected from the list.

Current code for the drop down list:

Page Model Class:

 public IEnumerable<SelectListItem> ConnectorTypeList { get; private set; } // temp

    public IActionResult OnGet()
    {
        // prepare the list in here
        ConnectorTypeList = new SelectListItem[]
        {
            new SelectListItem ("TCP Server IN", "TCP Server IN"),
            new SelectListItem ("TCP Server OUT", "TCP Server OUT"),
            new SelectListItem ("SMTP Server IN", "SMTP Server IN")
        };

        return Page();
    }

Page View:

 <div class="form-group">
            <label asp-for="ConnectorModel.ConnectorType" class="control-label"></label>
            <select asp-for="ConnectorModel.ConnectorType" class="form-control" asp-items="@Model.ConnectorTypeList"></select>
            <span asp-validation-for="ConnectorModel.ConnectorType" class="text-danger"></span>
        </div>
        <div class="form-group">
                <label asp-for="ConnectorModel.DataFlow" class="control-label"></label>
                <input asp-for="ConnectorModel.DataFlow" class="form-control" />
                <span asp-validation-for="ConnectorModel.DataFlow" class="text-danger"></span>
            </div>

Note the current form-control I'm wanting to modify is the "ConnectorModel.DataFlow" in the above page view code. At the moment it's just a simple textbox that the user can enter their own choice of text.

I'm going round in circles having read up on page handlers etc. It seems there is a onchange event but unsure how to implement this and somehow link it back to the page model class, run a method then postback the result. I'm not looking for a JQuery script as it seems this should not be required in the newer framework, not sure I just don't want a complicated long solution given I will be using a lot of these throughout the app. Thanks in advance...

Upvotes: 4

Views: 2263

Answers (1)

Ryan
Ryan

Reputation: 20116

The easiest way is to use onchange() on your <select> tag and assign data to input using js.(Add id attribute for <select> and <input> before)

If you would like to prevent the user from entering their own text, just use readonly attribute for you input.

<input asp-for="DataFlow" id="dataFlow" class="form-control" readonly/>

The Sample Page View:

<div class="row">
    <div class="col-md-4">
        <form method="post">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="ConnectorModel.ConnectorType" class="control-label"></label>
                <select asp-for="ConnectorModel.ConnectorType" id="connectorTypeList" class="form-control" asp-items="@Model.ConnectorTypeList" onchange="assignData()">
                    <option>Select ConnectorType</option>
                </select>
                <span asp-validation-for="ConnectorModel.ConnectorType" class="text-danger"></span>

            </div>
            <div class="form-group">
                <label asp-for="ConnectorModel.DataFlow" class="control-label"></label>
                <input asp-for="ConnectorModel.DataFlow" id="dataFlow" class="form-control" readonly />
                <span asp-validation-for="ConnectorModel.DataFlow" class="text-danger"></span>
            </div>
            <div class="form-group">
                <input type="submit" value="Create" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

@section Scripts{ 
    <script>
        function assignData() {
            var contentType = $("#connectorTypeList").val();
            if (contentType == "TCP Server IN") {
                $("#dataFlow").val("Inbound");
            }


        }
    </script>
}

Upvotes: 4

Related Questions