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

本文关键字：选择 文本 实体 mvc 框架 | 更新日期: 2023-09-27 18:24:16

我使用的是Asp.net MVC5和实体框架。我对这两种技术都是新手。

基本上，我创建了一个窗体，在这个窗体中，当我从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生成的链.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中找到了太多的答案，但我填写了这些答案对我没有帮助用mvc中的下拉列表填充文本框，如何在mvc中基于下拉选择填充文本框。。？

帮帮我！

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

您可以将选择列表参数从"code"更改为"username"，并在视图中使用一些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>

现在，当您运行此代码片段时，文本框的值将根据所选下拉列表的值而更改。

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

以前代码的一些更改

控制器

我使用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在视图中调用这个Action Controller。

查看

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

通过下拉菜单调用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>

那是工作好吧。。。

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

控制器动作功能的变化：

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