Использование jQuery для вызова действия контроллера

Question

У меня есть хорошая страница, которая делает все, что мне нужно. Однако один из элементов (частичная страница) занимает на несколько секунд больше времени, чем я хотел бы загрузить. Поэтому я хотел бы сначала показать страницу без этого частичного фрагмента, но вместо этого показать «загрузочный» gif. Тогда в моем JQuery ...

$(document).ready(function() {

   // Call controller/action (i.e. Client/GetStuff)

});

Я хотел бы вызвать действие моего контроллера, которое возвращает PartialView и обновляет мое содержимое div. Это в основном вызывает частичную загрузку асинхронно при загрузке. Я мог бы делать это просто с ActionLink, пока он не достигнет точки, в которой я хотел бы сделать это при загрузке. Если я использую jQuery для вызова типа onloand, могу ли я даже вернуть PartialView?

Answer 1

Просто используйте $. Load :

$(document).ready(function() {    
   $('#myDiv').html('<img src="loading.gif"/>')
              .load('Client/GetStuff');   
});

Это заменит содержимое div id = "myDiv" на индикатор загрузки, а затем вставит в него вывод Client / GetStuff.

Answer 2

Я верю, что вы можете. Раньше я использовал jQuery для получения JSON от контроллера ASP.NET MVC, и это один из самых приятных способов получения данных для клиента.

Я уверен, что получить частичное представление можно так же просто, как использовать методы jQuery 'load', 'get' или 'post':

Использование Загрузка :

$("#feeds").load("test.aspx");

Использование Get :

$.get("test.aspx", function(data){
  alert("Data Loaded: " + data);
});

Использование Пост :

$.post("test.aspx", function(data){
  alert("Data Loaded: " + data);
});

Answer 3

$.ajax("MyController/MyAction", function(data) {
    alert(data);
});

Это действительно простой пример; Вы просто вызываете контроллер с помощью AJAX, а затем можете вставить данные в DOM или сделать что-то еще с ним.

Answer 4

Мы можем очень просто вызвать метод Controller, используя Javascript / Jquery, следующим образом:

Предположим, что ниже вызывается метод Controller, возвращающий массив некоторых объектов класса. Пусть класс 'A'

public JsonResult SubMenu_Click(string param1, string param2)

    {
       A[] arr = null;
        try
        {
            Processing...
           Get Result and fill arr.

        }
        catch { }


        return Json(arr , JsonRequestBehavior.AllowGet);

    }

Ниже приводится комплексный тип (класс)

 public class A
 {

  public string property1 {get ; set ;}

  public string property2 {get ; set ;}

 }

Теперь пришло время вызывать вышеуказанный метод контроллера JQUERY. Ниже приведена функция Jquery для вызова метода контроллера.

function callControllerMethod(value1 , value2) {
    var strMethodUrl = '@Url.Action("SubMenu_Click", "Home")?param1=value1 &param2=value2'
    $.getJSON(strMethodUrl, receieveResponse);
}


function receieveResponse(response) {

    if (response != null) {
        for (var i = 0; i < response.length; i++) {
           alert(response[i].property1);
        }
    }
}

В приведенной выше функции Jquery 'callControllerMethod' мы разрабатываем URL-адрес метода контроллера и помещаем его в переменную с именем 'strMehodUrl' и вызываем метод getJSON API Jquery.

receieveResponse - это функция обратного вызова, получающая ответное или возвращаемое значение метода controllers.

Здесь мы использовали JSON, поскольку мы не можем использовать объект класса C #

непосредственно в функцию javascript, поэтому мы преобразовали результат (arr) в методе контроллера в объект JSON следующим образом:

Json (обр, JsonRequestBehavior.AllowGet);

и вернул этот объект Json.

Теперь в функции обратного вызова Javascript / JQuery мы можем использовать этот результирующий объект JSON и работать соответствующим образом для отображения данных ответа на пользовательском интерфейсе.

Для более подробной информации нажмите здесь