如何根据下拉选择填充强类型文本框

如何解决如何根据下拉选择填充强类型文本框

我有个主意，我认为这很简单，就像添加JavaScript来基于从我的下拉列表onchange事件中调用方法填充文本框一样（如下所示）：

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

但是，通过研究得知，由于JavaScript是一种客户端语言，而Razor-Views是服务器端，因此无法同时获得在页面上显示值并将该值从当前视图传递到的功能。控制器

我尝试过更改文本框的值以及更改div元素的innerhtml。

使用ASP.Net -core强类型文本框是否有可能实现？我只是试图根据上面的下拉列表中更改的值来更改此文本框中的值。 （显示所喝饮料的总和）我得到了双方的支持；使用文本框，并在创建订单的视图上显示该值，但该值不会传递给控制器​​。当删除验证并返回到强类型文本框时，我能够将值传递给控制器​​，但无法在文本框中的视图上显示该值。

我为“墙”一词道歉

解决方法

我发现，与其尝试使用强类型视图而不是自动为我的对象设置值，我不得不使用常规的html表单，使用JavaScript填充文本框并在其中设置对象的值。我的控制器方法。

仅供参考（相关代码）：

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>

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

控制器：

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

,

如果您使用的是选择器，则可以在JS中添加以下代码。

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