I want to display the balance related to a specific card when the Id is being selected from the dropdown select list and show the balance value in [enter image description here][1]input on a form.
But what I am getting is only the JSON results when I am running the program. my form is not appearing
The Test action in the controller:
public IActionResult Test()
{
var data = from als in ctx.TbIstanbulCards select new { als.IstanbulCardId, als.Balance };
return Json(data.ToList());
}
The Index
view (Test)
@model VmIstanbul
@section Scripts{
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function () {
var options = {};
options.url = "/Customer?handler=SelectAll";
options.type = "GET";
options.dataType = "json";
options.success = function (data) {
data.forEach(function (element) {
$("#customerid").append("<option>
"
+ element.IstanbulCardId + "
</option > ");
});
};
options.error = function () {
$("#msg").html("Error while
making Ajax call!");
};
$.ajax(options);
});
$("#customerid").change(function () {
var options = {};
options.url = "/Customer/" +
$("#customerid").val() + "?handler=SelectByID";
options.type = "GET";
options.dataType = "json";
options.success = function (data) {
$("#companyname").val(data.Balance);
//$("#contactname").val(data.contactName);
//$("#country").val(data.country);
};
options.error = function () {
$("#msg").html("Error while making Ajax call!");
};
$.ajax(options);
});
</script>
}
<form id="myForm" asp-controller="Customer" asp-action="Test">
<label for="departmentsDropdown"><b>Card</b></label>
<select class="form-control" onchange="getValue()" id="departmentsDropdown" name="departmentsDropdown"></select><br />
<input type="text" value="" id="show" />
</form>
The result appear like that