asp.net core get additional info with json and jquery

I have a select built on json and jquery but the data is concatenated

json

public async Task OnGetAssetAsync(string id)
{
var assets = await _context.WOAssetAssets.Where(s => s.WOALId == id)
.Select(s => new SelectListItem
{
Value = s.WOAId.ToString(),
Text = s.AssetID + " " + "/" + " " + s.AssetName
}).ToListAsync();
return new JsonResult(assets);
}

jquery

$(function () {
$("#Asset").on("change", function () {
var categoryId = $(this).val();
$("#Equipment").empty();
$("#Equipment").append("--Select Equipment--");
$.getJSON(`?handler=Equipment&id=${categoryId}`, (data) => {
$.each(data, function (i, item) {
$("#Equipment").append(`"${item.value}"> ${item.text}`);
});
$('#Equipment').selectpicker({ liveSearch: true });
});
});
});

and I want to get separate data with

json

public async Task OnGetAssetDetailsAsync(string id)
{
var asset = await _context.WOAssetAssets.Where(s => s.WOAId == id).SingleOrDefaultAsync();
return new JsonResult(asset.AssetName, asset.AssetManufacturer);
}

and updated jquery

$(function () {
$("#Asset").on("change", function () {
var categoryId = $(this).val();
$("#Equipment").empty();
$("#Equipment").append("--Select Equipment--");
$.getJSON(`?handler=Equipment&id=${categoryId}`, (data) => {
$.each(data, function (i, item) {
$("#Equipment").append(`"${item.value}"> ${item.text}`);
});
$('#Equipment').selectpicker({ liveSearch: true });
});
$.getJSON(`?handler=AssetDetails&id =${categoryId}`, (data) => {
$("#AssetName").append("asset.AssetName");
$("#AssetManufacturer").append("asset.AssetManufacturer");
});
});
});

but is not working. How should I do it?

send the asset object in order to avoid nulls

public async Task OnGetAssetDetailsAsync(string id)
{
var asset = await _context.WOAssetAssets.Where(s => s.WOAId == id).SingleOrDefaultAsync();
return new JsonResult(asset);
}

change jquery as

$.getJSON(`?handler=AssetDetails&id =${categoryId}`, (data) => {
if(!jQuery.isEmptyObject(data)){
$("#AssetName").append(data.AssetName);
$("#AssetManufacturer").append(data.AssetManufacturer);
});

I've changed the json to

public async Task OnGetAssetDetailsAsync(string id)
{
var asset = await _context.WOAssetAssets.Where(s => s.WOAId == id).SingleOrDefaultAsync();
return new JsonResult(asset);
}

and jquery to

function func2() {
var dataID = $("#Asset :selected").val();
$("#asset").val(dataID);
$.getJSON(`?handler=AssetDetails&id=${dataID}`, (data) => {
if (!jQuery.isEmptyObject(data)) {
$("#AssetName").append(data.AssetName);
$("#AssetManufacturer").append(data.AssetManufacturer);
}
});
}

but I still don't get the data

after updating your jquery code, do you see any value for asset ? if yes then try changing jquery code as below.

$.getJSON(`?handler=AssetDetails&id=${categoryId}`, (data) => {
$("#AssetName").append("data.AssetName");
$("#AssetManufacturer").append("data.AssetManufacturer");
});

Ok, I think I am using the wrong jquery. In the html, I have another function that gives me the id in a different textbox

function func2() {
var data = $("#Asset :selected").val();
$("#asset").val(data);
}

but after I updated the jquery

function func2() {
var data = $("#Asset :selected").val();
$("#asset").val(data);
var categoryId = .val(data);
$("#AssetName").empty();
$("#AssetManufacturer").empty();
$.getJSON(`?handler=AssetDetails&id=${categoryId}`, (data) => {
$("#AssetName").append("asset.AssetName");
$("#AssetManufacturer").append("asset.AssetManufacturer");
});
}

I have no errors but no data also

can you please select _context.WoAssetAssets and press shift + F9 (while debugging)? do you have any record where WOAId is equal to the input id value.

It's the same id used for th select list and is working there very well

so basically asset value is null. Can you please check the value of input parameter id ? I suspect thats empty/null.

html below just in case

class="row no-gutters">
class="col-md-3">
class="form-control text-white pl-2" style="background-color:firebrick;">Asset ID / Asset Name

Thank you Kiran, I tried that, still have the same error, see below

I guess assert details html needs to be cleared before appending any data . Here is the code.

$(function () {
$("#Asset").on("change", function () {
var categoryId = $(this).val();
$("#Equipment").empty();
$("#AssetName").empty();
$("#AssetManufacturer").empty();
$("#Equipment").append("--Select Equipment--");
$.getJSON(`?handler=Equipment&id=${categoryId}`, (data) => {
$.each(data, function (i, item) {
$("#Equipment").append(`"${item.value}"> ${item.text}`);
});
$('#Equipment').selectpicker({ liveSearch: true });
});
$.getJSON(`?handler=AssetDetails&id =${categoryId}`, (data) => {
$("#AssetName").append("asset.AssetName");
$("#AssetManufacturer").append("asset.AssetManufacturer");
});
});
});

10 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sachin Singh5y ago
Accepted answer
send the asset object in order to avoid nulls
public async Task OnGetAssetDetailsAsync(string id)
        {
            var asset = await _context.WOAssetAssets.Where(s => s.WOAId == id).SingleOrDefaultAsync();
            return new JsonResult(asset);
        }
change jquery as
$.getJSON(`?handler=AssetDetails&id =${categoryId}`, (data) => {


if(!jQuery.isEmptyObject(data)){

            $("#AssetName").append(data.AssetName);
            $("#AssetManufacturer").append(data.AssetManufacturer);
        });
+3
Marius Vasile5y ago
I've changed the json to
public async Task OnGetAssetDetailsAsync(string id)
        {
            var asset = await _context.WOAssetAssets.Where(s => s.WOAId == id).SingleOrDefaultAsync();
            return new JsonResult(asset);
        }
and jquery to
function func2() {
    var dataID = $("#Asset :selected").val();
    $("#asset").val(dataID);
    $.getJSON(`?handler=AssetDetails&id=${dataID}`, (data) => {


        if (!jQuery.isEmptyObject(data)) {

            $("#AssetName").append(data.AssetName);
            $("#AssetManufacturer").append(data.AssetManufacturer);
        }
    });

}
but I still don't get the data
+3
Kiran Mohanty5y ago
after updating your jquery code, do you see any value for asset ? if yes then try changing jquery code as below.
$.getJSON(`?handler=AssetDetails&id=${categoryId}`, (data) => {
        $("#AssetName").append("data.AssetName");
        $("#AssetManufacturer").append("data.AssetManufacturer");
    });
+3
Marius Vasile5y ago
Ok, I think I am using the wrong jquery. In the html, I have another function that gives me the id in a different textbox
function func2() {
    var data = $("#Asset :selected").val();
    $("#asset").val(data);

}
but after I updated the jquery
function func2() {
    var data = $("#Asset :selected").val();
    $("#asset").val(data);
    var categoryId = .val(data);
    $("#AssetName").empty();
    $("#AssetManufacturer").empty();
    $.getJSON(`?handler=AssetDetails&id=${categoryId}`, (data) => {
        $("#AssetName").append("asset.AssetName");
        $("#AssetManufacturer").append("asset.AssetManufacturer");
    });
}
I have no errors but no data also
+3
Kiran Mohanty5y ago
can you please select _context.WoAssetAssets and press shift + F9 (while debugging)? do you have any record where WOAId is equal to the input id value.
+3
Marius Vasile5y ago
It's the same id used for th select list and is working there very well
+3
Kiran Mohanty5y ago
so basically asset value is null. Can you please check the value of input parameter id ? I suspect thats empty/null.
+2
Marius Vasile5y ago
html below just in case
class="row no-gutters">
                class="col-md-3">
                    class="form-control text-white pl-2" style="background-color:firebrick;">Asset ID / Asset Name
class="col-md-5">
"Asset" class="form-control" asp-items="@(new SelectList(string.Empty, "WOAId", "AssetID", "AssetName", "AssetManufacturer"))" OnChange="func2()" data-style="border-warning bg-transparent">
"">--Select Asset--
for="WOInitiator.AssetID" id="asset" />
for="WOInitiator.AssetID" class="text-danger">
for="WOInitiator.AssetName" id="AssetName" />
for="WOInitiator.AssetManufacturer" id="AssetManufacturer" />