ASP.NET MVC, jQuery & JSON

ASP.NET MVC изменил способ, которым разработчики .NET пишут веб-приложения. Просто jQuery изменил подход разработчиков к javascript. Если вы еще не посмотрели, я настоятельно рекомендую проверить оба. ASP.NET MVC обеспечивает более четкое разделение задач, что в конечном итоге приводит к созданию более чистого и более удобного в обслуживании кода JQuery изменил javascript, избавившись от множества проблем, связанных с использованием javascript, особенно в областях использования ajax. Хотя это было технически возможно раньше, либо с помощью других фреймворков, либо написав кучу javascript, jQuery значительно упростил этот процесс.

Один из методов использования jQuery для вызовов типа ajax — вернуть HTML со страницы, чтобы результаты заполнили div или какой-либо другой контейнер. Хотя я не обязательно защищаю этот метод, он может работать для быстрого отображения информации, с которой вам не нужно взаимодействовать. Представьте, что у нас есть div с идентификатором «contentdiv», в который мы можем загрузить HTML, используя jQuery:

$("#contentdiv").load("/somecontenturl");

Это отправит запрос GET на «/ somecontenturl» на веб-сервере, и весь возвращаемый HTML будет помещен в элемент contentdiv и обработан в браузере. Есть несколько других опций, которые вы можете использовать с методом загрузки, но это основное использование.

Что если вам нужно было взаимодействовать с данными, которые вы возвращаете? Существует замечательный формат сериализации, который называется JSON (JavaScript Object Notation). Он очень легкий и поддерживается сразу jQuery и ASP.NET MVC. Как следует из названия, JSON используется для представления объектов в javascript, как если бы вы представляли класс в C #.

Допустим, у нас есть страница с контактной информацией, но вы должны иметь возможность добавлять и редактировать данные адресов с помощью вызовов типа ajax. У нас есть модель на C #:

public class Address
{
  public int AddressId {get; set;}
  public string Street {get; set;}
  public string City {get; set;}
  public string State {get; set;}
  public string Zip {get; set;}
}

У нас также есть ContactController в нашем проекте ASP.NET MVC, который будет использоваться для отображения всех данных, которые нам нужны. На нашей странице будут отображаться все наши контактные данные со списком адресов. У каждого будет кнопка редактирования. В javascript есть событие click для кнопки редактирования, которое откроет диалоговое окно jQuery с формой редактирования для адреса. У нас нет всех данных, которые нам нужны для заполнения этой формы, поэтому мы можем использовать jQuery для ее получения. В событии нажатия кнопки редактирования у нас есть следующий код:

$.post("/Contact/Address/" + addressId, "",
  function(data){
    $("#addressId").val(data.AddressId);
    $("#street").val(data.Street);
    $("#city").val(data.City);
    $("#state").val(data.State);
    $("#zip").val(data.Zip);     
  }, "json");

Чтобы разобраться в этом, мы используем метод post jQuery. Первый параметр — это URL, с которого вы хотите получить информацию. В этом случае у нас есть addressId, который представляет фактический AddressId в классе Address. Если addressId равен «1», то наш URL будет «/ Contact / Address / 1», что будет соответствовать действию ASP.NET MVC, которое мы рассмотрим в ближайшее время.  

Второй параметр метода post — это место, где мы передаем данные в действие. Поскольку все, что у нас есть, это addressId, который будет передаваться через URL, мы пока оставим это поле пустым. Третий параметр — это функция обратного вызова, которая имеет доступ к возвращаемому результату в случае успеха. Я использую функцию (данные), где «данные» является фактическим объектом результата. Я могу передать существующую функцию, если я выберу, но для простоты просто буду использовать встроенную функцию. В последнем параметре я передаю ожидаемый формат данных, который в данном случае — JSON.

Это выполнит действие Address в ContactController, которое вернет экземпляр Address в виде JSON:

public JsonResult Address(string id)
{
  Address address = DataLayer.GetAddress(id);

  JsonResult result = new JsonResult();
  result.Data = address;
  return result;
}

Вы должны признать, что это довольно круто. Мы можем легко получить данные с помощью ASP.NET MVC, преобразованного в JSON, который можно напрямую использовать в javascript и jQuery. Если вы думаете, что это круто, это также работает по-другому. Мы работаем с нашей новой адресной формой и готовы к обновлению из javascript:

var address = {};

address.AddressId = $("#addressId").val();
address.Street = $("#street").val();
address.City = $("#city").val();
address.State = $("#state").val();
address.Zip = $("#zip").val();

$.post("/Contact/SaveAddress", address, function(data) {
  // Logic on success
  }, "json");

Здесь мы раскручиваем новый адресный объект в javascript. Так как объектная структура javascript очень открыта, определить нечего, кроме {}. Мы можем начать устанавливать новые свойства объекта javascript по мере необходимости. Здесь следует отметить, что имена свойств в объекте javascript должны соответствовать свойствам объекта C #. Если мы сделали это правильно, почтовый вызов отправит сообщение в «/ Contact / SaveAddress», и новый объект адреса будет передан как данные сообщения. У нас есть стандартная функция обратного вызова, и мы ожидаем возвращения JSON. Метод действия на контроллере выполнит работу:

public JsonResult SaveAddress(Address address)
{
  DataLayer.Save(address);

  JsonResult result = new JsonResult();
  result.Data = "Success";
  return result;
}

Пока мы создали наш объект javascript, идентичный объекту адреса C #, это просто волшебно работает. Вся сериализация в и из JSON выполняется для вас, и объект передается в качестве параметра в метод действия SaveAddress. Мы можем сохранить объект или сделать то, что нам нужно, и передать результат обратно в функцию обратного вызова.

Как вы можете видеть, это может очень легко обновлять данные в вашем веб-приложении без обратной связи и дает вам большую гибкость по сравнению с тем, что вы делаете с данными.  ASP.NET MVC , jQuery и JSON представляют собой идеальную небольшую комбинацию, позволяющую вам быстро делать довольно интересные вещи. Ajax в вашем приложении не может быть намного проще.