Question

我有一个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; }
}

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

基于DropDownList的Asp.Net文本框

1 个答案: