29 апреля 2011 г.

Передача данных с помощью JSON в представление ASP.Net MVC

Довольно часто приходится не только передавать довольно много данных из страницы в контроллер, но и в обратном направлении.
Вообще, для передачи какого-то массива данных я предпочитаю использовать JSON. Кстати говоря, для передачи в обе стороны.

Сегодня мы займемся тем, что создадим простое приложение, которое, с помощью AJAX-запроса будет обращаться к контроллеру, и возвращать оттуда на страницу какую-то коллекцию данных, для дальнейших действий с ними через Javascript.

Начнем с того, что добавим на нашу страницу Home.aspx одну единственную кнопочку, по по нажатию на которую и будет происходить все чудо:

<input type="button" id="mybtn" value="Get Item" onclick="GetItem();" />

К Javascript-у мы перейдем немного позже, а пока создадим необходимый нам метод контроллера. Сей метод необычен тем, что возвращает не ActionResult, а специальный тип данных JsonResult:

public JsonResult GetItem()
{
Item i = new Item();
i.Title = "Some title";
i.Count = 5;
 
return Json(i, JsonRequestBehavior.AllowGet);
}

Здесь, i - экземпляр простенького класса, содержащий в себе всего 2 свойства, которые тут же и заполняются. В реальности, нам не составило бы труда получить необходимые значения из базы данных. После заполнения объекта, он сериализируется типом данных JSON, и возвращается обратно. Стоит заметить, что без JsonRequestBehavior.AllowGet работать ничего не будет. Это довольно странно т.к. во всех книгах такая опция упускается.

Единственное, что нам теперь осталось - это написать Javascript-метод, который будет совершать запрос к контроллеру, и делать что-то с полученными от него данными:

function GetItem() {
$.getJSON('/Home/GetItem', null, function (data) {
alert('Your item is: ' + data.Title + ' with count: ' + data.Count);
});
};

Думаю, что здесь все понятно, но все же немного объясню. Мы делаем запрос на получение Json-данных из метода GetItem контроллера Home. После этого, просто выводим попапом содержимое полученного объекта.

Это все.
Осталось удостовериться, что все работает так, как нам нужно. Тоесть, после нажатия на кнопку, мы должны получить данные из контроллера (конечно же, без обновления всей страницы):

_____
Исходники