Пример синхронного AJAX запроса на JQuery и .NET Core C#
В данной публикации приведен пример того как выполнить асинхронный запрос к серверу без перезагрузки текущей страницы, с помощью JQuery на .NET Core.
Итак приступим.
Для начала нам потребуется создать проект Web сайта на .NET Core, например как здесь: https://babakov.net/programming/cs/138-cscorevs.html
Теперь модифицировать или создать новый контроллер Home с двумя методами:
Index — отображает страницу
GetInfo — обрабатывает запрос и возвращает ответ в формате JSON
Контроллер:
using System;
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;
namespace JQueryPostRequestNetCore.Controllers
{
public class HomeController : Controller
{
/// <summary>
/// Возвращает страницу сайта
/// </summary>
/// <returns></returns>
public IActionResult Index()
{
return View();
}
/// <summary>
/// Возвращает данные по запросу
/// </summary>
/// <param name="id"></param>
/// <returns></returns>
public JsonResult GetInfo(Int64 id)
{
var value = new List<string>();
for (long i = 0; i < id; i++)
{
value.Add("Элемент № "+i.ToString());
}
return Json(value);
}
}
}
Теперь создадим скрипт на JQuery — который будет отправлять запрос на сервер к нашему методу GetInfo и обрабатывать каким либо образом полученный результат.
Создадим скрипт site.js:
function getInfo(id) {
$.post("/Home/GetInfo", { id: id })
.done(function (data) {
var count = data.length;
console.log(count);
var result_str = "";
for(var i=0;i<count;i++)
{
console.log(data[i]);
result_str = result_str+" "+ data[i];
}
$("#result_text").html(result_str);
console.log(data);
});
}
Данный скрипт отправляет запрос на сервер вернуть некоторое количество элементов указанное в id Затем выводит полученные данные в консоль, и в преобразовывает в текстовый вид и помещает на странице в параграф с идентификатором result_text.
Теперь создадим представление Index.cshtml:
<html>
<head>
<script src="lib/jquery/dist/jquery.min.js" type="text/jаvascript"></script>
<link rel="stylesheet" href="lib/bootstrap/dist/css/bootstrap.css"/>
<link rel="stylesheet" href="css/site.css"/>
<script src="js/site.js" type="text/jаvascript"></script>
</head>
<body>
<div class="text-center">
<h1 class="display-4">Тестируем AJAX запрос на .NET Core</h1>
<p id="result_text"></p>
<a class="btn btn-info btn-sm" onclick="getInfo(3);">Выполнить запрос на 3 элемента</a>
</br>
<a class="btn btn-info btn-sm" onclick="getInfo(10);">Выполнить запрос на 10 элементов</a>
</br>
<a class="btn btn-info btn-sm" onclick="getInfo(0);">Выполнить запрос на 0 элементов</a>
</br>
</div>
</body>
</html>
В данном представлении мы подключаем необходимые библиотеки обозначаем параграф result_text в который будем выводить принятые данные, и три кнопки с различным обращением к функции getInfo.
В результате, при нажатии на любую из кнопок скрипт клиента будет выполнять запрос на сервер получать ответ в формате JSON, и отображать результат на странице без её перезагрузки.
Вот так должно получиться:
Вот и всё.