16 апреля 2011 г.

Динамическое добавление контрола через AJAX, на ASP.Net MVC

Иногда бывают ситуации, когда необходимо динамически, без перезагрузки страницы добавить на нее еще несколько новых элементов. Но что делать, если позарез нужно вставить целый html-блок? Вот тут нам на помощь и приходят UserControl-ы.

Итак, давайте создадим страницу, на которой будет кнопка, по нажатию на которую, сюда же, будет подгружаться пользовательский контрол с конкретными данными.

Начнем с того, что создадим в Models новый класс Item.cs, который будет представлять некий объект для отображения в контроле. Двух полей нам будет вполне достаточно:

public class Item
{
   public string Title { get; set; }
   public string Description { get; set; }
}

Для реализации класса, нужно создать сам контрол, который будет подгружаться к нам на страницу. Создадим его в /Views/Home, и назовем Task.ascx:

<%@ Control Language="C#"
Inherits="System.Web.Mvc.ViewUserControl<MyMvcApplication.Models.Item>" %>
<div class="task">
I'm a new Task<br />
My title is :<%= Model.Title %><br />
My description is :<%= Model.Description %>
<hr />
</div>

Этот контрол будет просто отображать информацию о принятом обьекте Item.

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

public ActionResult New(string title, string description)
{
Item item = new Item();
item.Title = title;
item.Description = description;
 
return View("Task", item);
}

Это метод будет вызываться AJAX-запросом из яваскрипта, и будет принимать введенные на клиенте значения.

На странице Home.aspx разместим поля для ввода новых данных, для нового контрола, и кнопку добавления, которая будет вызывать запрос:

Title: <input type="text" id="item_title" /><br /><br />
Description: <input type="text" id="item_desc" /><br />
<input type="button" onclick="AddItem()" value="Add" />
<div id="items_list">
</div>
В последний див будут загружаться все новые контролы.

Ну а теперь сам Ajax-запрос, вернее функция обработка щелчка по кнопке добавления:

   1:  function AddItem() {
   2:      var title = $('#item_title').val();
   3:      var description = $('#item_desc').val();
   4:   
   5:      $.ajax({
   6:          type: "POST",
   7:          url: "/Home/New",
   8:          data: "title=" + title + "&description=" + description,
   9:          dataType: "html",
  10:          success: function (result) {
  11:              var domElement = $(result);
  12:              $('#items_list').append(domElement);
  13:          }
  14:      });
  15:  }

Что мы делаем? Считываем значения заполненных полей на странице, и отправляем эти данные через ajax-запрос методу New контроллера Home. Тот возвращает нам представление контрола, которое мы приводим к виду HTML-обьекта, и с помощью Jquery вставляем в див items_list.

Смотрим что у нас получилось.

Мы попадаем на страницу, где заполняем нужные поля:

После нажатия кнопки, данные ajax-запросом отправляются в контроллер. Контроллер создает новый обьект по данным и возвращает на страницу представление контрола, с уже принятыми значениями. После этого, полученный html просто напросто добавляется в нужный див:

И сколько бы мы не старались, новые контролы так и будут чудесно появляться без перезагрузки страницы:

Очень полезная штука, скажу я вам!
_____
Исходники