Вызов действий ASP.NET MVC с использованием JQuery AJAX

JQuery — одна из наиболее распространенных библиотек, используемых сегодня в веб-разработке, и она очень часто используется разработчиками ASP.NET MVC не только для улучшения взаимодействия с пользователем, но и для предоставления динамического содержимого пользователям своих веб-приложений с использованием различных типов вызовов AJAX. поддерживается JQuery. JQuery предоставляет несколько методов, таких как get, getJSON, load, post, ajax, которые можно использовать для вызова различных типов действий контроллера ASP.NET MVC. В этом руководстве я покажу вам, как вы можете использовать метод get JQuery для вызова действий ASP.NET MVC.

Начиная

Использовать jQuery с ASP.NET MVC очень просто, поскольку его последняя версия поставляется с ASP.NET MVC. Чтобы использовать jQuery, вам просто нужно включить следующий тег скрипта либо в раздел ‹head› страницы Layout.master, либо внизу перед закрывающим элементом ‹/body› для более быстрой загрузки страницы.

<script src="<%= Url.Content("~/Scripts/jquery-1.3.2.js") %>" type="text/javascript"></script>

Это загрузит библиотеку jQuery из папки содержимого и сделает ее доступной на странице.

Сценарий 1. Вызов метода действия, возвращающего строковое содержимое

Предположим, что у вас есть действие, которое возвращает строковое содержимое в представления следующим образом:

public class HomeController : Controller 
{ 
   public string GetDateTimeString() 
   { 
      return DateTime.Now.ToString(); 
   } 
}

Чтобы вызвать этот метод действия с помощью jQuery, вы можете использовать функцию «get» jQuery, как показано ниже:

var url = "/Home/GetDateTimeString"; 
$.get(url, null, function(response) 
{
   $("#getDateTimeString").html(response); 
});

Метод jQuery get — это вспомогательный метод, который генерирует запрос AJAX GET. Первый параметр — это URL-адрес метода действия, второй параметр может использоваться для передачи дополнительных параметров методу действия, а третий — функция обратного вызова, которую необходимо вызвать при получении ответа от метода действия. Функция обратного вызова принимает один параметр «ответ», который содержит содержимое строки. Ниже приведен вывод результата, полученного с сервера:

6/4/2015 12:38:41 PM

Сценарий 2. Вызов метода действия, который принимает параметры и возвращает строковое содержимое.

Это почти тот же сценарий, что и предыдущий, за исключением того, что на этот раз метод действия ожидает параметр в запросе. Чтобы передать параметры метода действия, мы можем использовать второй параметр функции «get» jQuery.

public string LowerCaseString(string input) 
{ 
   return input.ToLower(); 
}

Вы можете использовать следующий код JavaScript для вызова этого метода действия из метода JQuery get:

var url = "/Home/LowerCaseString"; 
$.get(url, { input: "MAKE THIS TEXT LOWERCASE" }, function(response) { 
   $("#getLowerCaseString").html(response); 
});

Вывод приведенного выше кода будет следующим

make this text lowercase

Сценарий 3: вызов метода действия, который принимает параметры и возвращает JSON

До сих пор мы играли с простыми строками. Теперь представьте, что вы хотите динамически получать более сложные данные с сервера, и данные отформатированы в JSON. Например, представьте, что мы хотим получить информацию об ученике с сервера. В частности, предположим, что у вас есть следующий класс StudentInfo и метод действия GetStudentInfo:

public class StudentInfo 
{ 
   public string FirstName { get; set; } 
   public string LastName { get; set; } 
   public int Age { get; set; } 
   public int Fee { get; set; } 
} 
public JsonResult GetStudentInfo(int studentId) 
{ 
   StudentInfo contactInfo = new StudentInfo 
   { 
      FirstName = "Bob", 
      LastName = "Cravens", 
      Fee = 2000, Age = 23 
   }; 
   return Json(contactInfo, JsonRequestBehavior.AllowGet); 
}

Обратите внимание, что метод действия теперь возвращает «JsonResult». Этот метод действия можно вызвать с помощью следующего кода JavaScript:

var url = "/Home/GetStudentInfo"; 
var id = 123; 
$.getJSON(url, { studentId: id }, function(data) 
{ 
   $("#name").html(data.FirstName + " " + data.LastName); 
   $("#fee").html(data.Fee); 
   $("#age").html(data.Age); 
});

Вы можете просмотреть ответ на вызов AJAX, поступающий в формате JSON, с помощью инструментов разработчика браузера. Например, браузер Google Chrome показывает следующий JSON, поступающий с сервера.

Обратите внимание, что данные ответа теперь отформатированы в формате JSON. Возвращаемые данные могут быть помещены внутрь любого элемента html, например, span, как показано ниже:

<h3>Student Information</h3> 
<table> 
   <tr> 
      <td>Name</td> 
      <td><span id="name"></span></td> 
   </tr> 
   <tr> 
      <td>Fee</td> 
      <td><span id="fee"></span></td> 
   </tr> 
   <tr> 
      <td>Age</td> 
      <td><span id="age"></span></td> 
   </tr> 
</table>

На выходе будет следующее:

Student Information 
Name Alex Johnson 
Fee 2000 
Age 23

Первоначально опубликовано на https://www.ezzylearning.net 4 июня 2015 г.