J'ai une idée, et j'ai pensé que ce serait aussi simple que d'ajouter JavaScript pour remplir une zone de texte en appelant une méthode à partir de mes listes déroulantes lors de l'événement de changement (illustré ci-dessous):

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

Cependant, grâce à la recherche, nous avons appris que puisque JavaScript est un langage côté client et que les vues Razor sont côté serveur, il n'est pas possible d'obtenir à la fois la fonctionnalité d'affichage de la valeur sur la page ET de transmettre la valeur de la vue actuelle au contrôleur

J'ai essayé à la fois de changer la valeur de la zone de texte et de changer le innerhtml d'un élément div.

Est-il possible que cela soit possible avec une zone de texte ASP.Net -core fortement typée? J'essaie simplement de changer la valeur dans cette zone de texte en fonction de la valeur qui est modifiée dans la liste déroulante ci-dessus. (Montrant le total pour une boisson qui est cueillie) J'ai obtenu les deux côtés; en utilisant une zone de texte et en affichant la valeur sur ma vue qui crée une commande, mais la valeur n'est pas transmise au contrôleur. Lors de la suppression de la validation et du retour à la zone de texte fortement tapée, j'ai pu transmettre la valeur à mon contrôleur, mais pas afficher la valeur sur la vue dans la zone de texte.

Je m'excuse pour le mur de mots

2
Jake Roberts 23 août 2020 à 17:12

2 réponses

Meilleure réponse

J'ai compris qu'au lieu d'essayer d'utiliser une vue fortement typée, qui définissait automatiquement les valeurs de mon objet, je devais utiliser un formulaire html régulier, utiliser JavaScript pour remplir la zone de texte et définir les valeurs de l'objet dans ma méthode de contrôleur .

FYI (code associé):

Formulaire Html:

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

Code JS:

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

Contrôleur:

[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);
        }
1
Jake Roberts 24 août 2020 à 01:21

Si vous utilisiez un sélecteur, vous pouvez simplement ajouter le code ci-dessous dans le JS.

var selectedDrink = $('.selectpicker option:selected').val();
0
Andrew Reese 26 août 2020 à 16:56