Question

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

基本上我创建了一个Form，当我从DropDown中选择值时，在这个Form中可以使用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;
    }
}

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

帮助我！

Answer 1

您可以从＆＃34;代码＆＃34;更改您的选择列表参数到＆＃34;用户名＆＃34;并在视图上使用一些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>

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

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在我的视图中调用此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>

这很好......

Answer 3

花了很长时间之后，我对@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>

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

3 个答案: