如何根据MVC中的下拉选择填充文本框..?

时间:2013-05-29 12:53:24

标签: c# jquery asp.net-mvc asp.net-mvc-4 razor

您好我已经创建了一个表并通过ADO.NET实体将其连接到MVC项目。 连接后,我为实体添加了控制器,它在MVC项目的VIEW文件夹中创建了一组cshtml文件。 但现在我需要的是创建一个下拉列表和文本框。 我在一个cshtml文件中创建了下拉列表,并在CONTROLLER中修改了它的逻辑。 我也可以创建TEXTBOXES,但是我面临着根据下拉列表选择对TEXTBOX进行打包的问题。

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

    }`

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

`

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

<h2>Index</h2>


<div>   

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

</div>

`

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

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

此Plan_S表中的

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

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

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

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

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

提前致谢...

1 个答案:

答案 0 :(得分:3)

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

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

然后,在您的控制器操作中,让我们构建模型:

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

然后在你的视图中,执行:

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