基于 DropDownList 的 Asp.Net TextBoxes答案

【问题标题】：Asp.Net TextBoxes based on DropDownList基于 DropDownList 的 Asp.Net TextBoxes
【发布时间】：2018-07-24 19:06:20
【问题描述】：

我有一个 DropDownList 和 3 个 TextBoxes 像这样：

@(Html.Kendo().DropDownList()
    .Name("Lager") 
    .DataValueField("LagerId")
    .DataTextField("LagerIdentifier")
    .BindTo((System.Collections.IEnumerable)ViewData["Lager"])
)

@Html.TextBoxFor(model => model.Name1, new { @readonly = "readonly" })
@Html.TextBoxFor(model => model.Name2, new { @readonly = "readonly" })
@Html.TextBoxFor(model => model.Name3, new { @readonly = "readonly" })

基本上我想要实现的是，如果用户从 DropDown 中选择某些内容，我想相应地自动更改 TextBoxes 的值。

我的Lager 模型如下所示：

public class Lager
{
    public int LagerId { get; set; }
    public string LagerIdentifier { get; set; }
    public string Name1 { get; set; }
    public string Name2 { get; set; }
    public string Name3 { get; set; }
}

【问题讨论】：

您希望页面在用户选择某些内容时回发，还是希望页面在没有回发的情况下更改？这将决定您是需要 AJAX（客户端）代码还是服务器端代码。
感谢您的回复！不，我不希望它发回。 ViewData["Lager"] 包含一个包含所有元素的列表。我只是不知道如何用 TextBoxes @AnnL 填充它。
这些值应该基于用户在 DropDownList 中选择的内容推导出来。它们是只读的，忘记提及了。 @乍得

标签： asp.net asp.net-mvc

【解决方案1】：

控制器

public class Names
{
    public string theEnum { get; set; }

    public string Name1 { get; set; }
    public string Name2 { get; set; }
    public string Name3 { get; set; }
}

public enum theEnum
{
    Value1,
    Value2,
    Value3
}

public class PassValue
{
    public string passValue { get; set; }
}

public class HomeController : Controller
{
    [HttpPost]
    public ActionResult Tut112(PassValue passVal)
    {
        return Json(new
        {
            RetVal = passVal.passValue
        }
        , @"application/json");
    }

    public ActionResult Tut112()
    {
        return View();
    }

查看

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Tut112</title>
    <link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-1.12.4.min.js"></script>
    <script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#ajaxButton").click(function () {
                var SendData = { passValue: $("#passValue").val() };

                $.ajax({
                    type: "POST",
                    url: '/Home/Tut112',
                    data: SendData,
                    dataType: "json",
                    success: function (data) {
                        if (data.RetVal == 'Value1') {
                            $("#Name1").val(data.RetVal);
                        }
                        else if (data.RetVal == 'Value2') {
                            $("#Name2").val(data.RetVal);
                        }
                        else {
                            $("#Name3").val(data.RetVal);
                        }
                    }
                });
            })
        })
    </script>
</head>
<body>
    @model Testy20161006.Controllers.Names
    @Html.DropDownList("Envs", new SelectList(Enum.GetValues(typeof(Testy20161006.Controllers.theEnum))), "Select Enivronment", new { id = "passValue", @class = "form-control" })
    <input type="button" id="ajaxButton" value="Submit" />
    @Html.TextBoxFor(model => model.Name1, new { @readonly = "readonly" })
    @Html.TextBoxFor(model => model.Name2, new { @readonly = "readonly" })
    @Html.TextBoxFor(model => model.Name3, new { @readonly = "readonly" })
</body>
</html>

【讨论】：