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

Posted 2023-03-27

【中文标题】如何根据下拉选择填充强类型文本框

【英文标题】：How to populate strongly-typed text box based on drop-down selection

【发布时间】：2020-12-12 07:42:07

【问题描述】：

我有一个想法，我认为这就像添加 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 核心强类型文本框实现这一点？我只是想根据上面下拉列表中更改的值更改此文本框中的值。 （显示挑选的饮料的总数）我已经得到了两面；使用文本框，并在我的视图上显示创建订单的值，但该值不会传递给控制器​​。删除验证并恢复为强类型文本框时，我能够将值传递给我的控制器，但不能在文本框中的视图上显示值。

我为这个词道歉

【参考方案1】：

我发现，与其尝试使用强类型视图自动为我的对象设置值，不如使用常规的 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);
        

【参考方案2】：

如果您使用的是 selectpicker，您可以在 JS 中添加以下代码。

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