如何在MVC中填充基于下拉选择的文本框

本文关键字：选择 于下拉 文本 填充 MVC | 更新日期: 2023-09-27 18:15:57

嗨，我已经创建了一个表，并通过ADO连接到MVC项目。网络实体。连接后，我为实体添加了控制器，它在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; }
    }

显示下拉列表的控制器是' 

 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());
        }
    }`

我的看法。显示下拉列表的CSHTML是

@model Pivot.Models.Plan_S
@{
    ViewBag.Title = "Index";
}
<h2>Index</h2>

<div>   
    @Html.DropDownList("PlanNames", "--select--")
</div>

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

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

在Plan_S表中，

PlanNames列在下拉列表中填充，当我在DDL中选择Plan1时，它应该以1hrs

填充文本框。

当我在DDL中选择Plan2时，它应该以2hrs填充文本框。

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

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

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

如何在MVC中填充基于下拉选择的文本框

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

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

然后，在控制器动作中，让我们构建Model:

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>
相关文章：