Você está misturando as funções no controller, para se usar o json num método você deve usar JsonResult como identificador do tipo de retorno. Em asp.net mvc há duas formas de fazer uma chamada Ajax e com isso ter um registro ou uma lista de registros em json, segue dois exemplos que faz chamada no mesmo controller para que tenha um melhor entendimento:
Controller:
[HttpPost]
public async Task<JsonResult> JsonX()
{
var frente = (from d in db.Imagem
orderby d.IdImagem
select new
{
d.IdImagem,
d.EnderecoImagem,
d.DescricaoLegenda,
d.CorFundoLegenda,
d.Descricao,
d.Largura,
d.Altura,
d.DescricaoAlternativa,
});
return Json(await frente.ToListAsync());
}
Opção 1 de chamada do Ajax - eu utilizo em situações que desejo criar elementos em html dinamicamente, montar uma tabela, por exemplo, e mostrar ao usuário:
<script type="text/javascript">
$.ajax({
url: "/ControllerX/JsonX",
type: "POST",
ifModified: true,
cache: true,
async: true,
dataType: "json",
success: function (data) {
if (data.length > 0) {
var linha = "";
for (i = 0; i < data.length; i++) {
linha += data[i] + "<br>";
}
}
});
</script>
Opção 2 de chamada do Ajax - utilizo mais em situações que não quero reflesh na página toda, exemplo, adicionar um item num carrinho em uma loja virtual. Enfim, dependendo da forma que fizer pode usar as duas formas para a mesma finalidade:
<form class="form-inline" method="post" action="/ControllerX/JsonX" data-ajax="true"
data-ajax-failure="FalhaAjax" data-ajax-success="SucessoAjax">
<div class="form-group">
<div class="col-sm-6">
<input class="input-sm form-control" type="submit" />
</div>
</div>
</form>
<script type="text/javascript">
function SucessoAjax(data) {
if (data.length > 0) {
var linha = "";
for (i = 0; i < data.length; i++) {
linha += data[i] + "<br>";
}
}
}
function FalhaAjax(data) {
alert("erro");
}
</script>