在 mvc 实体框架中的下拉选择上填充文本框

Question

我正在使用 Asp.net MVC5 和 Entity Framework。我是这两种技术的新手。

基本上我创建一个表单，在这个表单中，当我从 DropDown 中选择值时，一个 DropDown 可用。我想填写此表单上也可用的文本框。

这是我的控制器

public class ChainController : Controller
{
    private hcEntities db = new hcEntities();

    // GET: Chain
    public ActionResult Index()
    {
        ViewBag.name = new SelectList(db.chains,"code","name");
        return View(db.chains.ToList());
    }
}

查看：-

<div class="form-horizontal">
    <hr />
    <div class="form-group">
        <label class="col-sm-2 control-label">
            Select Chain
        </label>
        <div class="col-md-3">            
            @Html.DropDownList("name" , null, new { @class = "form-control" })           
        </div>
    </div>
 @using (@Html.BeginForm())
 {
    @Html.AntiForgeryToken()
    <div class="form-group">
        <label class="col-sm-2 control-label">
            Chain UserName
        </label>
        <div class="col-md-3">            
           @Html.TextBox("ChainName", null, new { @class = "form-control" }) //WHAT DO I DO HERE???????
        </div>
    </div>
 }
</div>

模型（EF生成的chain.cs）

public partial class chain
{
    public long chain_id { get; set; }
    public string name { get; set; }
    public string code { get; set; }
    public string username { get; set; }
    public string password { get; set; }
    public long created_by { get; set; }
    public System.DateTime created_on { get; set; }
    public Nullable<long> updated_by { get; set; }
    public Nullable<System.DateTime> updated_on { get; set; }
    public chain()
    {
        created_by = 1;
        created_on = DateTime.Now;
    }
}

我不知道下一步会是什么。如何从下拉列表的选择中用 Username 的值填充文本框。 我在stackoverflow中找到了太多答案，但我填写这些对我没有帮助。例如 fill the textboxes with selecting dropdownlist in mvc, How to populate a textbox based on dropdown selection in MVC..?

帮帮我！

Answer 1

您可以将选择列表参数从“代码”更改为“用户名”，并在视图上使用一些 jQuery 代码。我为您创建了一个简单的示例，请看一下：

在我的控制器中：

List<temp> tempLIst = new List<temp>();
tempLIst.Add(new temp() { Id = 1, code = "111", name = "first", username = "user first" });
tempLIst.Add(new temp() { Id = 1, code = "222", name = "second", username = "user second" });
tempLIst.Add(new temp() { Id = 1, code = "333", name = "third", username = "user third" });
tempLIst.Add(new temp() { Id = 1, code = "444", name = "four", username = "user four" });

ViewBag.name = new SelectList(tempLIst, "username", "name");
return View();

这里的 temp 是具有属性（Id、代码、名称和用户名）的类

在我看来

<div>
temp list: @Html.DropDownList("name",(IEnumerable<SelectListItem>)@ViewBag.name,"select value")
@Html.TextBox("txtValue")
</div>

这是我在此视图页面上使用的一些脚本部分。

<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script>
    $(document).ready(function () {
        $('#name').change(function () {
        $('#txtValue').val($(this).val());
        });
    });
</script>

现在，当您运行此代码 sn-p 时，文本框的值将根据所选下拉列表的值而变化。

Answer 2

我自己做的。这是解决方案。

之前代码的一些变化

控制器

我使用 ViewData 而不是 ViewBag。两者都运行良好，但我使用 ViewData

    // GET: Chains
    public ActionResult Index()
    {
        ViewData["chain_name"] = new SelectList(db.chains, "code", "name");
        return View(db.chains.ToList());
    }

我还在控制器中创建了一个从数据库中获取数据的函数

    //Action Function 
    [HttpPost]
    public ActionResult Action(string code)
    {
        var query = from c in db.chains
                    where c.code == code
                    select c;

        return Json(query);
    }

之后我通过javascript在我的视图中调用这个动作控制器。

查看

    @using (@Html.BeginForm("Action","chains", FormMethod.Post))
     {
        @Html.AntiForgeryToken()
        <div class="form-horizontal">
            <hr />
            <div class="form-group">
                <label class="col-sm-2 control-label">
                    Select Chain
                </label>
                <div class="col-md-3">
                    @Html.DropDownList("ddlchainname", (SelectList)ViewData["chain_name"], new {         onchange = "Action(this.value);", @class = "form-control" })
                </div>
            </div>
            <div class="form-group">
        <label class="col-sm-2 control-label">
            Chain Name
        </label>
        <div class="col-md-3">
            @Html.TextBox("ChainName", null, new { @class = "form-control" })
        </div>
        <label class="col-sm-2 control-label">
            Username
        </label>
        <div class="col-md-3">
            @Html.TextBox("username", null, new { @class = "form-control" })
                </div>
    </div>
    <div class="form-group">
        <label class="col-sm-2 control-label">
            Chain Code
       </label>
        <div class="col-md-3">
            @Html.TextBox("ChainCode", null, new { @class = "form-control" })
        </div>
    </div>
        </div>
     }

通过下拉 onChange 调用 Javascript 函数

<script type="text/javascript">
function Action(code) {
    $.ajax({
        url: '@Url.Action("Action", "Chains")',
        type: "POST",
        data: { "code": code },
        "success": function (data) {
            if (data != null) {
                var vdata = data;
                $("#ChainName").val(vdata[0].name);
                $("#ChainCode").val(vdata[0].code);
                $("#username").val(vdata[0].username);
            }
        }
    });
}
</script>

没问题...

Answer 3

在这上面花了很长时间，我对@ANJYR - KODEXPRESSION 的代码做了一些新的更改，因为它有一些错误，所以新的更改如下：

控制器Action功能的变化：

public ActionResult Action(string code)
    {
        var query = from c in db.chains where c.code == code select new { Code = c.code, Name = c.name, UserName = c.username};
        return Json(query, JsonRequestBehavior.AllowGet);
    }

Javascript 的变化：

<script type="text/javascript">
function Action(code) {
$.ajax({
    url: '@Url.Action("Action", "Chains")',
    type: "POST",
    data: { "code": code },
    success: function (data) {
        if (data != null) {
            var vdata = data;
            $("#ChainName").val(vdata[0].Name);
            $("#ChainCode").val(vdata[0].Code);
            $("#username").val(vdata[0].Username);
        }
    }
}); 
}
</script>