This is a working code , but want i want to do is how can i change the textbox @Html.TextBoxFor(model => model.CategoryID, new { @class = "form-control" })
into dropdowncolumn , with all the same functionalities has ,i mean autocomplete option like that :
@Html.TextBoxFor(model => model.CategoryID, new { @class = "form-control" })
@section scripts{
<script src="~/Scripts/jquery-ui-1.12.1.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
$(function () {
$("#CategoryID").autocomplete({
source: function (request, response) {
$.ajax({
url: '@Url.Action("AutoComplete")',
datatype: "json",
data: {
term: request.term
},
success: function (data) {
response($.map(data, function (val, item) {
return {
label: val.Name + " | " + val.Description,
value: val.Name,
CategoryId: val.ID,
Description: val.Description
}
}))
}
})
},
select: function (event, ui) {
$.get("/Home/GetSProductList", { CategoryID: ui.item.CategoryId }, function (data) {
$("#ProductID").empty();
$.each(data, function (index, row) {
$("#ProductID").append("<option value='" + row.ProductID + "'>" + row.ProductName + "</option>")
});
});
$.get("/Home/GetOrderList", { ProductID: $("#ProductID").val() }, function (data) {
$("#OrderID").empty();
$.each(data, function (index, row) {
$("#OrderID").append("<option value='" + row.OrderID + "'>" + row.OrderID + "</option>")
});
});
}
})
})
</script>
}
public ActionResult Index()
{
List<Category> CategoryList = db.Categories.ToList();
ViewBag.CategoryList = new SelectList(CategoryList , "CategoryID" , "CategoryName");
return View();
}
public ActionResult AutoComplete(string term)
{
if (!String.IsNullOrEmpty(term))
{
var list = db.Categories.Where(c => c.CategoryName.ToUpper().Contains(term.ToUpper())).Select(c => new { Name = c.CategoryName, ID = c.CategoryID , Description= c.Description})
.ToList();
return Json(list, JsonRequestBehavior.AllowGet);
}
else
{
var list = db.Categories.Select(c => new { Name = c.CategoryName, ID = c.CategoryID, Description = c.Description })
.ToList();
return Json(list, JsonRequestBehavior.AllowGet);
}
}
What I have tried:
i just explained the problem above.