Пример синхронного AJAX запроса на JQuery и .NET Core

.NET Core

В данной публикации приведен пример того как выполнить асинхронный запрос к серверу без перезагрузки текущей страницы, с помощью JQuery на .NET Core.

Итак приступим.

Для начала нам потребуется создать проект Web сайта на .NET Core, например как здесь: https://kbss.ru/blog/netcore/271.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/javascript"></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/javascript"></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, и отображать результат на странице без её перезагрузки.

Вот так должно получиться:
Пример синхронного AJAX запроса на JQuery

Вот и всё.

AJAX JavaScript NET Core C# jQuery HTML пример

Оставить первый комментарий:

NLog добавление логирования в .NET Core WEB приложение

Пример добавления логирования в WEB приложение на .NET Core на основе NLog. Первоначально добавляем (читать далее...)

210  
Авторизация в приложении через Вконтакте VK на C#

Данная публикация написана как простая инструкция для себя, на память, чтобы не забыть. Предложенный (читать далее...)

198  
ASP.NET MVC проект на .NET Core в VS Code. Часть 1 (Создаем проект и Добавляем Контроллер)

В этой публикации я надеюсь начать цикл повествований по разработке ASP.NET MVC приложения на .NET C (читать далее...)

162  
Класс для транслитерации предложений на Русском по ГОСТ и ISO на C# под .NET Core

Бывает так, что приходится заниматься преобразованием предложения на русском в русский текст но на л (читать далее...)

111  
Работаем с базой данных MySql из .NET Core

В данной публикации мы рассмотрим как подключиться к базе данных MySql из приложения на .Net Core. 1 (читать далее...)

105