c# - 如何根据 MVC 中的下拉选择填充文本框..？

Question

您好，我已经创建了一个表并通过 ADO.NET 实体将其连接到 MVC 项目。连接后，我为实体添加了 Controller ，它在 MVC 项目的 VIEW 文件夹中创建了一组 cshtml 文件。但现在我需要的是创建一个下拉列表和文本框。我在 cshtml 文件中创建了下拉列表，并在 CONTROLLER 中编写了它的逻辑。我也可以创建文本框，但我面临着根据下拉列表选择填充文本框的问题。

VS 2012 自动生成的模型是

 public partial class Plan_S  

    {

        public int PlanId_PK { get; set; }
        public string PlanNames { get; set; }
        public string Hours { get; set; }
    }

我的显示下拉列表的 Controller 是`

 public class dropdownController : Controller
    {


        private PivotEntities db = new PivotEntities();

        //
        // GET: /dropdown/

        public ActionResult Index()
        {
            ViewBag.plannames = new SelectList(db.Plan_S, "PlanId_PK", "PlanNames");

            return View();
        }

        protected override void Dispose(bool disposing)
        {
            db.Dispose();
            base.Dispose(disposing);
        }
        public ActionResult ddl()
        {
            return View(new Plan_S());
        }

    }`

我的显示下拉列表的view.cshtml是

`

@model Pivot.Models.Plan_S
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>


<div>   

    @Html.DropDownList("PlanNames", "--select--")

</div>

`

现在，当我在下拉列表中选择一个项目时，它应该会自动填充表格中的相应值。在我的代码中，Plan_S 表自动生成为 Plan_S 模型类。但是在数据库中，我为表中的这些列设置了值。

eg..)     PlanId_PK  |   PlanNames  |    Hours
              1           Plan1          1hrs
              2           Plan2          2hrs
              3           Plan3          3hrs

在此 Plan_S 表中，

PlanNames 列填充在 DROPDOWNLIST 中，当我在 DDL 中选择 Plan1 时，它应该将 texbox 填充为 1hrs

当我在 DDL 中选择计划 2 时，它应该将文本框填充为 2 小时。

这是我需要的逻辑，我可以在 asp webforms 中做到这一点，但它在 MVC 中很棘手。

我认为它需要 Jquery......

请帮助我，我花了好几个小时才找到这个逻辑....

提前致谢...

Answer 1

首先，让我们创建一个 View 模型来保存这些东西:

public class PlanViewModel
{
    public List<SelectListItem> Plans { get; set; }
}

然后，在您的 Controller 操作中构建模型:

public ActionResult Index()
{
    var model = new PlanViewModel();

    model.Plans = db.Plan_S
        .Select(p => new SelectListItem
        {
            Value = p.Hours,
            Text = p.PlanNames
        })
        .ToList();

        return View(model);
    }

然后在您的 View 中执行:

@model Pivot.Models.Plan_S
@{
    ViewBag.Title = "Index";
}

<h2>Index</h2>
<div>   
    @Html.DropDownList("PlanNames", Model.Plans, "--select--")
    <input id="planHours" type="text" />
</div>

然后您需要在 jQuery 中执行以下操作:

<script type="text/javascript">
    $(function () {
        $("[name='PlanNames']").change(function () {
            $("#planHours").val($(this).val());
        });
    });
</script>