如何填充基于下拉选择在MVC文本框..？ [英] How to populate a textbox based on dropdown selection in MVC..?

问题描述

您好我已经创建了一个表，并通过ADO.NET实体它连接到MVC项目。
连接后我加为实体控制器，它创造的VIEW文件夹中的MVC项目一组CSHTML文件。
但现在我需要做的是创造一个DropDownList和文本框。
我创建了DropDownList的一个CSHTML文件，也wriiten它的逻辑控制器。
我还可以创建文本框，但我根据DropDownList的选择面临poulating TextBox的问题。

Hi I have created a table and connected it to MVC project through ADO.NET entity. After connecting I added the controller for the entity and it creates a set of cshtml files in VIEW folder in MVC project. But now What I need is to create a dropdownlist and textbox. I created the dropdownlist in a cshtml file and also wriiten the logic for it in the CONTROLLER. I can also create TEXTBOXES,but i'm facing the problem of poulating TEXTBOX based on the dropdownlist selection.

我的模型汽车是

 public partial class Plan_S  

    {

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

我的显示DropDownList的控制器是
`

My Controller for displaying dropdownlist is `

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

    }`

我的显示DropDownList的view.cshtml是

My view.cshtml for displaying dropdownlist is

`

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

<h2>Index</h2>


<div>   

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

</div>

`

现在当我在DropDownList选择一个项目，它会自动填充表中的相应值。
在这里，在我的code，Plan_S表autogenrated为Plan_S模型类。但在数据库我已经在表中这些列设置的值。

Now When I select an item in the dropdownlist, it should automatically populate the corresponding value in the table. Here in my code, Plan_S table is autogenrated as Plan_S MODEL Class. But in Database I have set of values for these columns in table.

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

下面这个表Plan_S，

Here in this Plan_S table,

PlanNames列都将填充在DROPDOWNLIST，
当我在DDL选择计划1应该填充texbox为小时1小时

PlanNames column is populated in the DROPDOWNLIST, When I select the Plan1 in DDL it should populate the texbox as 1hrs

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

When I select the Plan2 in DDL it should populate the textbox as 2hrs.

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

This is the logic i need and I can do this in asp webforms but it is tricky in MVC.

我认为jQuery是必要为它.......

I think that Jquery is needed for it.......

请帮助我，我在寻找这样的逻辑已经花了几个小时......

Please help me, I had spent hours in finding this logic....

在此先感谢...

推荐答案

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

Firstly, let's create a View Model to hold these things:

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

然后，在你的控制器动作让我们建立模型：

Then, in your controller action let's build the 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);
    }

在您查看之后，做的：

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

Then you'll need to do the following in jQuery:

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

这篇关于如何填充基于下拉选择在MVC文本框..？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！