Fill inputs as option selection

Question

Hello!

I have this View where I update the value and quantity of a product in the Database by selecting it in Viewbag, works perfectly.

I populate this Viewbag as follows in Controller:

ViewData["ProductId"] = new SelectList(_context.Product, "Id", "ProductName");

Product table has Id, Productname, Productquantity and Productprice.

My problem is:

I want to put two more inputs (or something similar) on that screen, which show the current quantity(Productquantity) and price(Productprice) according to the selected product, more or less like this:

The view code (with the inputs I want to fill in) is here:

<form asp-action="AddRemoveProduct">

    <div class="row">
        <div class="col-md-12">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="ProductId" class="control-label"></label>
                <select id="idProduto" asp-for="ProductId" class="idProduto form-control" asp-items="ViewBag.ProductId"></select>
                <input class="control-label"type="text" placeholder="Quantidade atual aqui" />
                <input class="control-label" type="text"placeholder="Preço atual aqui"/>
                <span asp-validation-for="ProductId" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Quantity" class="control-label"></label>
                <input asp-for="Quantity" class="form-control" placeholder="Quandidade a Adicionar ou Remover" />
                <span asp-validation-for="Quantity" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Price" class="control-label"></label>
                <input asp-for="Price" class="form-control" placeholder="Alterar Valor do Produdo" />
                <span asp-validation-for="Price" class="text-danger"></span>
            </div>
        </div>
    </div>
    <div>
        <input type="submit" value="Confirmar" class="btn btn-success" />
    </div>
</form>

How could I do that? It would be with Javascript, with some Razor feature... I’ve done all my research and I can’t find anything to solve my problem.

Please, before you vote negative, tell me what I’m missing in the question or what I could do. I’m starting as a programmer and I’ve been racking my brain for days on this.

Answer 1

I was able to solve it this way:

I created a function with Javascript to store in a variable o value of select where it shows the product name and assigns this value to two id:

$(document).ready(function () {
            $("#idProduto").change(function () {
                var select = document.getElementById('idProduto');
                document.getElementById('productPrice').value = select.value;
                document.getElementById('productQuantity').value = select.value;
            });
        });

I created two more Viewdata in the Controller receiving the Id, but one showing the value and another the quantity, this way:

ViewData["ProductName"] = new SelectList(_context.Product, "Id", "ProductName");
ViewData["ProductQuantity"] = new SelectList(_context.Product, "Id", "ProductQuantity");
ViewData["ProductPrice"] = new SelectList(_context.Product, "Id", "ProductPrice");

After that, I created two more selects, who receive the value of the first select, by the Javascript function:

This is what html looks like:

<form asp-action="AddRemoveProduct">
    <div class="row">
        <div class="col-md-12">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="ProductId" class="control-label"></label>
                <select id="idProduto" asp-for="ProductId" class="idProduto form-control" asp-items="ViewBag.ProductName"></select>
                <span asp-validation-for="ProductId" class="text-danger"></span>
            </div>      
                <div class="row">
                    <div class="col-6">
                        <label >Quantidade Atual</label>
                        <select disabled id="productQuantity" asp-for="ProductId" class="form-control" asp-items="ViewBag.ProductQuantity"></select>                        
                    </div>
                    <div class="col-6">
                        <label>Preço Atual</label>
                        <select disabled id="productPrice" asp-for="ProductId" class="form-control" asp-items="ViewBag.ProductPrice"></select>
                    </div>
                </div>               
            <hr />
            <div class="form-group">
                <label class="control-label">Quantidade Adicionar/Remover</label>
                <input asp-for="Quantity" class="form-control" placeholder="Informe a quantidade" />
                <span asp-validation-for="Quantity" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label class="control-label">Novo Preço</label>
                <input asp-for="Price" class="form-control" placeholder="Informe o novo valor do produdo" />
                <span asp-validation-for="Price" class="text-danger"></span>
            </div>
        </div>
    </div>
    <div>
        <input type="submit" value="Confirmar" class="btn btn-success" />
    </div>
</form>

@section Scripts {

    <script>
        $(document).ready(function () {
            $("#idProduto").change(function () {
                var select = document.getElementById('idProduto');
                document.getElementById('productPrice').value = select.value;
                document.getElementById('productQuantity').value = select.value;
            });
        });
    </script>
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

The screen looked like this:

I do not know if there is an easier or more correct way, but in this case solved my problem, I hope you help someone else.