0
73
Viewsbind Data using json mehod and js
I am trying to retrieve data to dropdownlist, using json, the program works but the dropdownlist displays a white list, by inspecting, the data is there but it is not displayed
Controller:
public IActionResult GetClient()
{
var clientList = (from client in _context.Clients
select new SelectListItem()
{
Text = client.Nom,
Value = client.Id.ToString(),
}).ToList();
clientList.Insert(0, new SelectListItem()
{
Text = "----Select----",
Value = string.Empty
});
return Json(clientList);
}
script:
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: "GET",
url: "/Clients/GetClient",
success: function (data) {
$.each(data, function () {
$("#ClientId").append($("<option></option>").val(this['Value']).html(this['Text']));
});
}
});
});
</script>
le code Html:
</div>
<div class="alert-danger" asp-validation-summary="ModelOnly"></div>
<label asp-for="ClientId"></label>
<select asp-for="ClientId"
class="form-control"
asp-items="@(new SelectList(Enumerable.Empty<SelectListItem>(),"Value", "Text"))">
</select>
</div>
<div>
Thanks for your help
1 answers
Answer question0
"The dropdownlist displays a white list, by inspecting, the data is there but it is not displayed"
The problem is very obvious. If you inspect the
HTMLyou would be seen. ThevalueandtextinLowercasebut you have used on your code inBlock/Capital uppercasethat isval(this['Value']).html(this['Text'])). As you might know Json Object Keys areLowercase - small alphabetby default.
Note: Just replace below snippet so that it will resolve your problem completely.
Solution:
$("#ClientId").append($("<option></option>").val(this['value']).html(this['text']));
Output:
Hope it will help you accordingly to point your issue.