Вы рассматриваете только одну страницу (которая отдаёт json), смотрите шире: есть ещё другая страница, которая обрабатывает этот json.
Например. У меня есть сущность MoneyTransfer (перевод денег), это некоторый класс, в котором фигурирует отправитель денег и получатель денег:
public class MoneyTransfer
{
public int Id { get; set; }
public DateTime Date { get; set; }
public int SenderId { get; set; }
public Contact Sender { get; set; }
public int RecipientId { get; set; }
public Contact Recipient { get; set; }
public decimal Amount { get; set; }
public string Notes { get; set; }
}
И у меня есть CRUD-контроллер, который выводит список переводов, может удалить, добавить или отредактировать перевод.
На этом контроллере есть action для добавления перевода:
[Authorize]
public class MoneyTransferController : Controller
{
[HttpGet]
public async Task<IActionResult> Create(string returnUrl)
{
...
return this.View();
}
И именно в этом view запрашиваются JSON-данные (чуть позже я покажу этот view). Но запрашиваются они у совершенно другого контроллера и именно там происходит отдача JSON:
public class ContactController : Controller
{
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> SearchJson(ContactSearchViewModel model)
{
var contacts = await this.ContactService.SearchAsync(model.Needle, this.CurrentUserId);
return this.Json(contacts);
}
Вот этот вот второй контроллер - это то, что вы написали в своем вопросе. Но за кадром у вас осталась страница-приёмник JSON:
@model CreateMoneyTransferViewModel
@{
ViewBag.Title = "Создать перевод денег";
}
<h2>@ViewBag.Title</h2>
<div class="row">
<div class="col-sm-12 col-md-6">
<form asp-route-returnurl="@Model.ReturnUrl" method="post">
<input asp-for="SenderId" type="hidden" />
<input asp-for="RecipientId" type="hidden" />
<div asp-validation-summary="All" class="text-danger"></div>
<div class="form-group">
<label asp-for="Date"></label>
<input asp-for="Date" class="form-control" />
<span asp-validation-for="Date" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="SenderDisplayName"></label>
<input asp-for="SenderDisplayName" class="form-control" />
<span asp-validation-for="SenderDisplayName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="RecipientDisplayName"></label>
<input asp-for="RecipientDisplayName" class="form-control" />
<span asp-validation-for="RecipientDisplayName" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Amount"></label>
<input asp-for="Amount" class="form-control" />
<span asp-validation-for="Amount" class="text-danger"></span>
</div>
<div class="form-group">
<label asp-for="Notes"></label>
<textarea asp-for="Notes" class="form-control" rows="10" data-val-maxlength-max="900"></textarea>
<span asp-validation-for="Notes" class="text-danger"></span>
</div>
<button type="submit" class="btn btn-default">Сохранить</button>
</form>
</div>
</div>
@inject Microsoft.AspNetCore.Antiforgery.IAntiforgery Xsrf
@functions{
private string GetAntiXsrfRequestToken()
{
return Xsrf.GetAndStoreTokens(Context).RequestToken;
}
}
<div class="row">
<div class="col-sm-12 col-md-6">
<form method="post">
<input type="hidden" id="SearchContactRequestVerificationToken" name="RequestVerificationToken" value="@GetAntiXsrfRequestToken()">
<div class="form-group">
<label for="Needle">Поиск контакта:</label>
<input id="Needle" name="Needle" class="form-control" onkeyup="search_contact_for_moneytransfer(this.value);" />
</div>
</form>
</div>
<div class="clearfix"></div>
<div class="col-sm-12 col-md-6">
<div id="results"></div>
</div>
</div>
<style type="text/css">
div#results pre {
margin-top: 10px;
}
div#results .btn {
margin-right: 10px;
}
</style>
<script type="text/javascript">
function search_contact_for_moneytransfer(needle) {
$.ajax({
type: "POST",
url: "@Url.Action("SearchJson", "Contact", new {Area="Office"})",
headers:
{
"RequestVerificationToken": $("#SearchContactRequestVerificationToken").val()
},
data: {
"Needle": needle
},
success: function (data) {
$('#results').html("");
$(data).each(function(index, item) {
var ancor = $('<a>', { href: '/Office/Contact/Summary/' + item.id, text: item.displayName, "class": 'btn btn-default' });
var buttonSender = $('<button>',
{
click: function() {
chooseSender(item.id, item.displayName);
},
"class": "btn btn-default glyphicon glyphicon-plus",
text: "отправитель"
});
var buttonRecipient = $('<button>',
{
click: function() {
chooseRecipient(item.id, item.displayName);
},
"class": "btn btn-default glyphicon glyphicon-plus",
text: "получатель"
});
var pre = document.createElement("pre");
pre.textContent = item.notes;
$('#results').append(
$(document.createElement('div')).append(ancor).append(buttonSender).append(buttonRecipient).append(pre)
);
});
}
});
}
function chooseSender(id, title) {
$("#SenderId").val(id);
$("#SenderDisplayName").val(title);
}
function chooseRecipient(id, title) {
$("#RecipientId").val(id);
$("#RecipientDisplayName").val(title);
}
</script>
@section Scripts {
@await Html.PartialAsync("_ValidationScriptsPartial")
}
Посмотрите, из каких частей состоит эта страница.
Во-первых, есть сама форма.
Во-вторых, есть javascript, который собственно отправляет POST-запрос.
В-третьих, есть javascript, который преобразует полученный JSON в HTML-разметку.