Populate textbox in dropdown in mvc entity framework
I am using Asp.net MVC5 and Entity Framework. I am new to both technologies.
Basically I create a form, DropDown is available in this form when I select a value from DropDown. I want to fill in the text boxes that are also available on this form.
This is my controller
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());
}
}
View: -
<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>
Model (chain.cs generated by EF)
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;
}
}
I don't know what the next step will be. how to populate a text box with the Username value from the dropdown list. I find too many answers on stackoverflow but I fill them out, this is not helpful for me. for example fill textboxes with dropdown in mvc . How to fill textbox based on selection in MVC ..?
Help me!
source to share
I did it myself. Here is the solution.
Some change in the previous code
controller
Instead of ViewBag, I am using ViewData. Both work fine, but I am using ViewData p>
// GET: Chains
public ActionResult Index()
{
ViewData["chain_name"] = new SelectList(db.chains, "code", "name");
return View(db.chains.ToList());
}
Also I am creating a function in controller that fetches data from the database
//Action Function
[HttpPost]
public ActionResult Action(string code)
{
var query = from c in db.chains
where c.code == code
select c;
return Json(query);
}
After that, I call this Action Controller on my view via javascript.
View
@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 Call function on dropdown onChange
<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>
This works fine ...
source to share
You can change your picklist parameter from "code" to "username" and use some jQuery code in the view. I created a simple example for you, please take a look:
In my controller:
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();
Here temp is a class that has properties (Id, code, name and username)
In my opinion
<div>
temp list: @Html.DropDownList("name",(IEnumerable<SelectListItem>)@ViewBag.name,"select value")
@Html.TextBox("txtValue")
</div>
This is the part of the script I am using on this view page.
<script src="~/Scripts/jquery-1.8.2.min.js"></script>
<script>
$(document).ready(function () {
$('#name').change(function () {
$('#txtValue').val($(this).val());
});
});
</script>
Now when you run this piece of code, the textbox value will change to match the selected list value.
source to share