Как вызвать действия контроллера с использованием JQuery в ASP.NET MVC

Question

Я читал об этом некоторое время и обнаружил, что вы можете вызвать действие контроллера, используя:

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

Значит ли это, что я должен добавить MicrosoftMvcAjax.js или MicrosoftAjax.js вместе с Jquery lib?

Кроме того, что должен содержать второй параметр в функции $ .ajax ()?

Наконец, любая другая ссылка в stackoverflow или вне сайта, которая может быть полезна в asp.net mvc w / ajax и jquery?

Спасибо.

Answer 1

Вы можете начать чтение отсюда jQuery.ajax ()

Фактически Controller Action - это публичный метод, доступ к которому можно получить через Url. Таким образом, любой вызов Action из вызова Ajax, MicrosoftMvcAjax или jQuery, может быть выполнен. Для меня jQuery - самый простой. Он получил много примеров по ссылке, которую я дал выше. Типичный пример для вызова ajax такой:

$.ajax({
    // edit to add steve's suggestion.
    //url: "/ControllerName/ActionName",
    url: '<%= Url.Action("ActionName", "ControllerName") %>',
    success: function(data) {
         // your data could be a View or Json or what ever you returned in your action method 
         // parse your data here
         alert(data);
    }
});

Больше примеров можно найти в здесь

Answer 2

предыдущий ответ - только ASP.NET

вам нужна ссылка на jquery (возможно, из CDN): http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js

, а затем аналогичный блок кода, но проще ...

$.ajax({ url: '/Controller/Action/Id',
         success: function(data) { alert(data); }, 
         statusCode : {
             404: function(content) { alert('cannot find resource'); },
             500: function(content) { alert('internal server error'); }
         }, 
         error: function(req, status, errorObj) {
               // handle status === "timeout"
               // handle other errors
         }
});

Я добавил несколько необходимых обработчиков, 404 и 500 происходят постоянно, если вы отлаживаете код.Кроме того, множество других ошибок, таких как тайм-аут, будут отфильтровываться через обработчик ошибок.

Контроллеры ASP.NET MVC обрабатывают запросы, поэтому вам просто нужно запросить правильный URL-адрес, и контроллер получит его,Этот пример кода с работой в средах, отличных от ASP.NET

Answer 3

Вы можете легко вызвать действие любого контроллера, используя метод jQuery AJAX, например:

Обратите внимание, что в этом примере имя моего контроллера: Student

Controller Action

 public ActionResult Test()
 {
     return View();
 }

В В любом представлении этого вышеприведенного контроллера вы можете вызвать действие Test () , например:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-2.0.3.min.js"></script>
<script>
    $(document).ready(function () {
        $.ajax({
            url: "@Url.Action("Test", "Student")",
            success: function (result, status, xhr) {
                alert("Result: " + status + " " + xhr.status + " " + xhr.statusText)
            },
            error: function (xhr, status, error) {
                alert("Result: " + status + " " + error + " " + xhr.status + " " + xhr.statusText)
            }
        });
    });
</script>

Answer 4

В ответ на вышеприведенный пост я думаю, что эта строка нужна вместо вашей строки: -

var strMethodUrl = '@Url.Action("SubMenu_Click", "Logging")?param1='+value1+' &param2='+value2

Или же вы отправляете фактические строки value1 и value2 в контроллер.

Однако, для меня, это только вызывает контроллер один раз.Кажется, он каждый раз нажимает «receieveResponse», но точка останова в методе контроллера показывает, что он срабатывает только 1 раз до обновления страницы.

---

Вот рабочее решение.Для страницы cshtml: -

   <button type="button" onclick="ButtonClick();"> Call &raquo;</button>

<script>
    function ButtonClick()
    {
        callControllerMethod2("1", "2");
    }
    function callControllerMethod2(value1, value2)
    {
        var response = null;
        $.ajax({
            async: true,
            url: "Logging/SubMenu_Click?param1=" + value1 + " &param2=" + value2,
            cache: false,
            dataType: "json",
            success: function (data) { receiveResponse(data); }
        });
    }
    function receiveResponse(response)
    {
        if (response != null)
        {
            for (var i = 0; i < response.length; i++)
            {
                alert(response[i].Data);
            }
        }
    }
</script>

А для контроллера: -

public class A
{
    public string Id { get; set; }
    public string Data { get; set; }

}
public JsonResult SubMenu_Click(string param1, string param2)
{
    A[] arr = new A[] {new A(){ Id = "1", Data = DateTime.Now.Millisecond.ToString() } };
    return Json(arr , JsonRequestBehavior.AllowGet);
}

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

Answer 5

Мы можем очень просто вызвать метод 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(arr , JsonRequestBehavior.AllowGet);

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

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

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