How to populate strongly-typed text box based on drop-down selection

user_9617001 0
Viewed 65

I have an idea, and I thought it would be as straight-forward as adding JavaScript to populate a text box based on calling a method from my drop-down lists onchange event (Shown Below):

            <div class="form-group">
                <label asp-for="DrinkOrdered" class="control-label"></label>
                <Select asp-for="DrinkOrdered" class="form-control" onchange="FindTotal()" id="DrinkSelector">
                    <option value="none" selected disabled hidden>
                        --Select a Drink--
                    </option>
                    <option value="Bourbon Old Fashioned">Bourbon Old Fashioned</option>
                    <option value="Negroni">Negroni</option>
                    <option value="Manhattan">Manhattan</option>
                    <option value="Long Island Iced Tea">Long Island Iced Tea</option>
                    <option value="White Russian">White Russian</option>
                    <option value="Margarita">Margarita</option>
                    <option value="Bloody Mary">Bloody Mary</option>
                    <option value="Dirty Martini">Dirty Martini</option>
                    <option value="Painkiller">Painkiller</option>
                    <option value="Aperol Spritz">Aperol Spritz</option>
                    <option value="Other">Other</option>
                </Select>
            </div>

however, through research have learned that since JavaScript is a client-side language and Razor-Views are server side,this isnt possible to get both the functionality of displaying the value on the page AND passing the value from the current view to controller

I have tried both changing the value of the text box as well as changining the innerhtml of a div element.

Is there someway this is possible with an ASP.Net -core strongly typed text box? I am simply trying to change the value in this text box based on the value that is changed in the drop-down list above. (Showing the total for a drink that is picked) I have gotten both sides; using a text-box, and showing the value on my view that creates an order, but the value doesnt get passed to the controller. When removing the validation and reverting to the strongly typed text box I was able to pass the value to my controller, but not show the value on the view in the text box.

I apologize for the word wall

asp.net-core-mvc razor-pages html javascript
2 Answers

I figured out that instead of trying to use a strongly typed view, that automatically set the values to my object, I had to use a regular html form, use JavaScript to populate the textbox, and set the values of the object in my controller method.

FYI (related code):

Html Form:

        <form method="post" asp-action="Create">
            <div class="form-group">
                <label class="control-label">Name on Order:</label>
                <input name="orderNameIn" class="form-control" />
            </div>

            <div class="form-group">
                <label class="control-label">Order Drink:</label>
                <Select class="form-control" name="drinkOrderedIn" id="DrinkSelector" onchange="FindTotal()" required>
                    <option value="none" selected disabled hidden>
                        --Select a Drink--
                    </option>
                    <option value="Bourbon Old Fashioned">Bourbon Old Fashioned</option>
                    <option value="Negroni">Negroni</option>
                    <option value="Manhattan">Manhattan</option>
                    <option value="Long Island Iced Tea">Long Island Iced Tea</option>
                    <option value="White Russian">White Russian</option>
                    <option value="Margarita">Margarita</option>
                    <option value="Bloody Mary">Bloody Mary</option>
                    <option value="Dirty Martini">Dirty Martini</option>
                    <option value="Painkiller">Painkiller</option>
                    <option value="Aperol Spritz">Aperol Spritz</option>
                    <option value="Other">Other</option>
                </Select>
            </div>
            <div class="form-group">
                <label class="control-label">Total:</label>
                <input type="text" name="totalIn" class="Total" id="TotalTxtBox" readonly/>
            </div>
            <br />
            <br />
            <div class="form-group">
                <input type="submit" value="Submit" class="btn btn-primary" />
            </div>
        </form>

JS Code:

function FindTotal(){
    var drinkChosen = document.getElementById("DrinkSelector").value;
    var totalTextbox = document.getElementById("TotalTxtBox");

    switch (drinkChosen) {

        case "Bourbon Old Fashioned":
            totalTextbox.value =  "$8.50";
            break;
        case "Negroni":
            totalTextbox.value = "$10.50"
            break;
        case "Manhattan":
            totalTextbox.value = "$10.00"
            break;
        case "Long Island Iced Tea":
            totalTextbox.value = "$9.00"
            break;
        case "White Russian":
            totalTextbox.value = "$9.00"
            break;
        case "Margarita":
            totalTextbox.value = "$9.00"
            break;
        case "Bloody Mary":
            totalTextbox.value = "$7.50"
            break;
        case "Dirty Martini":
            totalTextbox.value = "$12.50"
            break;
        case "Painkiller":
            totalTextbox.value = "$11.50"
            break;
        case "Aperol Spritz":
            totalTextbox.value = "$9.00 "
            break;
        case "Other":
            totalTextbox.value = "$13.50"
            break;
    }
    return;
}

Controller:

[HttpPost]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Create(string drinkOrderedIn, string totalIn, string orderNameIn)
        {
            Order orderIn = new Order()
            {
                DrinkOrdered = drinkOrderedIn,
                Total = totalIn,
                OrderName = orderNameIn
            };

            if (ModelState.IsValid)
            {
                _context.Add(orderIn);
                await _context.SaveChangesAsync();
                return RedirectToAction(nameof(Index));
            }
            return View(orderIn);
        }
user_96170010

If you were using a selectpicker you could just add the code below in the JS.

var selectedDrink = $('.selectpicker option:selected').val();
user_74553170
Related