AJAX и MVC (C #)

Question

Я никогда не использовал AJAX и, честно говоря, не очень разбираюсь в JS.

У меня есть страница ( Браузер продуктов ), которая имеет следующую разбивку:

1. Навигация (Первая, Предыдущая, 1, 2, 3 Next, Last) - полный пост назад
2. Количество элементов на странице выпадающее - я хочу AJAX это
3. Левая колонка - Фильтры - я хочу AJAX это
4. Область отображения продукта - отображает продукты, основанные на 1, 2 и 3 выше

Я начинаю с элемента № 2 и пытаюсь выяснить, как изменить элемент 4 на основе события OnChange для раскрывающегося списка. Я в растерянности относительно того, где. или как начать. Это должен быть AJAX? JQuery? Сочетание обоих? И помните - это в приложении на основе MVC.

ТИА

Answer 1

Ответ на ваш вопрос определенно "да".

Прямо сейчас у меня есть один, поэтому я попытаюсь абстрагироваться от него.

Сначала создайте действие контроллера, которое возвращает JsonResult (а не ActionResult). Помимо возвращаемого типа, он аналогичен любому другому действию, поэтому вы можете отправлять параметры и т. Д. Единственное, что действительно отличается, это то, что вы собираетесь возвращать объект JsonResult (), устанавливая его свойство Data и любые другие свойства, которые вы может потребоваться. Мой выглядит примерно так (очень псевдо-кодиш ...):

public JsonResult GetList(int parentId)
{
  var results = dataRepository.GetById(parentId);

  return new JsonResult()
  {
    Data = results.ToArray();
  };
}

Теперь, на ваш взгляд, создайте скрипт, который будет выглядеть примерно так. Обратите внимание, что это синтаксис jQuery, поэтому он может выглядеть немного необычно, если вы не знакомы с ним.

<script language="javascript" type="text/javascript">
// When the document is ready, start firing our AJAX
$(document).ready(function() {
  // Bind a function to the "change" event of our drop-down list
  $("#dropDownId").bind("change", function(e) {
    updateList();
  });
}

var retrieveData = function(path, parentId, fnHandleCallback) {
  // Use the getJSON method to call our JsonResult action
  $.getJSON(path, { parentId: parentId }, function(data) {
    fnHandleCallback(data);
  });
};

// The path parameter is our JSON controller action
function updateList() {
  retrieveData("/Controller/GetList", $("#dropDownId").val(), handleResponse);
}

function handleResponse(data) {
  // Ok, now we have the JSON data, we need to do something with it.  I'm adding it to another dropdown.
  $("#otherDropDownId > option").remove();

  for (d in data)
  {
    var item = data[d];

    $("#otherDropDownId").append("<option value=\"" + item.Value + "\">" + item.Text + "</option>");
  }
}
</script>

<%= Html.DropDownList("dropDownId", new SelectList(new List<SelectListItem>())) %>
<%= Html.DropDownList("otherDropDownId", new SelectList(new List<SelectListItem>())) %>

Это все очень сильно не в моей голове, поэтому дайте мне знать, если что-то нужно уточнить или исправить.

Редактировать

Как отмечалось в моем комментарии, для того, чтобы "AJAXify" вашей странице, вы действительно не хотите толкать все вокруг в своей модели. Вместо этого звучит так, будто вы хотите что-то вроде этого:

Действие контроллера:

public JsonResult GetPagedData(int page, int itemsPerPage, string[] filters)
{
  var results = dataRepository.GetPagedItems(pageId, itemsPerPage, filters);

  return new JsonResult()
  {
    Data = results.ToArray();
  };
}

JS изменения:

var retrieveData = function(path, pageNumber, pageSize, filters, fnHandleCallback) {
  // Use the getJSON method to call our JsonResult action
  $.getJSON(path, { page: pageNumber, itemsPerPage: pageSize, filters: filters }, function(data) {
    fnHandleCallback(data);
  });
};

// The path parameter is our JSON controller action
function updateList() {
  retrieveData("/Controller/GetPagedData", $("#pageNumber").val(), $("#dropDownId").val(), null, handleResponse);
}

Я намеренно проигнорировал вычисление как номера страницы, так и фильтров - они будут следовать по существу тем же принципам.

Наконец, когда вы отображаете данные, вы помещаете их в таблицу продуктов, а не в другое раскрывающееся меню.

Answer 2

AJAX - это просто запрос на извлечение информации со страницы без обновления браузера. Вы можете использовать ASP.NET AJAX или AJAX JQuery , и вы должны получить те же результаты.

А JQuery - это просто библиотека для выбора и управления DOM. JQuery имеет несколько функций AJAX, которые вы также можете использовать, но JQuery можно использовать для гораздо большего.

Я не знаю, как именно работает версия ASP, но AJAX - это просто запрос страницы.

Answer 3

Я бы определенно проверил jQuery и не беспокоился о реализации MS Ajax. Для того, что вы хотите, вы можете проверить документацию jQuery, например, для $ post или ajax / load функций.

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