I'm using MVC and I have a dropdown list that pulls from the rows in the database and when an option from the dropdown list is selected, I want it to populate additional fields on the View that are other columns in the row on the database.
My View with the dropdown and the field I want populated.
<div class="group">
@Html.LabelFor(model => model.TransactionTemplateName, htmlAttributes: new { @class = "window-label-left" })
@(Html.Kendo().DropDownList()
.Name("TransactionTemplateName")
.DataTextField("TransactionTemplateName")
.DataValueField("ID")
.Filter("contains")
.Events(e => e.Change("onChange"))
.DataSource(source =>
{
source.Read(read =>
{
read.Action("GetTransactionTemplate", "Transactions");
});
})
.HtmlAttributes(new { style = "width: 50%" })
)
</div>
<div class="group">
@Html.LabelFor(model => model.DESCRIPTION, htmlAttributes: new { @class = "window-label-left" })
@Html.EditorFor(model => model.DESCRIPTION, new { htmlAttributes = new { @class = "window-text" } })
@Html.ValidationMessageFor(model => model.DESCRIPTION, "", new { @class = "text-danger" })
</div>
My method in the Controller to call the dropdown list and hopefully the additional column
public JsonResult GetTransactionTemplate(string text)
{
var northwind = new TreasuryEntities();
var products = northwind.TransactionTemplates.Select(product => new TransactionViewModel
{
ID = product.ID,
TransactionTemplateName = product.TEMPLATE_ID,
DESCRIPTION = product.DESCRIPTION
});
if (!string.IsNullOrEmpty(text))
{
products = products.Where(p => p.TransactionTemplateName.Contains(text));
}
return Json(products, JsonRequestBehavior.AllowGet);
}
I'm having trouble with the script needed to populate the other fields.
function onChange() {
$("#TransactionTemplateName").change(function () {
$("#ID").val(ID);
$("#DESCRIPTION").prop('readonly', false);
$("#DESCRIPTION").val();
$("#DESCRIPTION").prop('readonly', true);
})
}