jquery - por - llamar actionresult desde javascript

Cómo llamar a las acciones del controlador utilizando JQuery en ASP.NET MVC

Question

He estado leyendo esto por un tiempo y descubrí que puedes llamar a una acción del controlador usando:

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

¿Significa esto que debo agregar el MicrosoftMvcAjax.js o el MicrosoftAjax.js junto con la librería Jquery?

Además, ¿qué debe contener el segundo parámetro en la función $ .ajax ()?

Por último, ¿hay algún otro enlace en stackoverflow o fuera del sitio que pueda ser útil en asp.net mvc w / ajax y jquery?

Gracias.

Answer 1

En respuesta a la publicación anterior, creo que necesita esta línea en lugar de su línea:

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

O bien, envía las cadenas reales value1 y value2 al controlador.

Sin embargo, para mí, solo llama al controlador una vez. Parece que pulsa ''receieveResponse'' cada vez, pero un punto de interrupción en el método del controlador muestra que solo se pulsa 1ª vez hasta que se actualiza la página.

Aquí hay una solución de trabajo. Para la página 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>

Y para el controlador: -

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);
}

Puede ver cómo cambia la hora cada vez que se llama, por lo que no hay almacenamiento en caché de los valores ...

Answer 2

Podemos llamar al método del controlador usando Javascript / Jquery muy fácilmente de la siguiente manera:

Supongamos que el siguiente es el método del controlador que se llamará para devolver una matriz de algunos objetos de clase. Deja que la clase sea ''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);

    }

A continuación se muestra el tipo complejo (clase)

 public class A
 {

  public string property1 {get ; set ;}

  public string property2 {get ; set ;}

 }

Ahora fue el turno de llamar al método del controlador anterior por JQUERY. A continuación se muestra la función Jquery para llamar al método del controlador.

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);
        }
    }
}

En la función Jquery anterior ''callControllerMethod'' desarrollamos la url del método del controlador y la colocamos en una variable llamada ''strMehodUrl'' y llamamos al método getJSON de la API de Jquery.

receieveResponse es la función de devolución de llamada que recibe la respuesta o el valor de retorno del método de los controladores.

Aquí utilizamos JSON, ya que no podemos usar el objeto de clase C #

directamente en la función javascript, por lo que convertimos el resultado (arr) en el método del controlador en el objeto JSON de la siguiente manera:

Json(arr , JsonRequestBehavior.AllowGet);

y devolvió ese objeto Json.

Ahora, en la función de devolución de llamada de Javascript / JQuery, podemos utilizar este objeto JSON resultante y trabajar en consecuencia para mostrar los datos de respuesta en la interfaz de usuario.

Para más detalles haga clic aquí

Answer 3

Puede llamar fácilmente la acción de cualquier controlador usando el método jQuery AJAX de esta manera:

Note en este ejemplo el nombre de mi controlador es Student

Controlador de acción

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

En cualquier vista de este controlador anterior, puede llamar a la acción Prueba () de esta manera:

<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

Puedes empezar a leer desde aquí jQuery.ajax()

En realidad, Controller Action es un método público al que se puede acceder a través de Url. Por lo tanto, se puede realizar cualquier llamada a una acción desde una llamada Ajax, ya sea MicrosoftMvcAjax o jQuery. Para mí, jQuery es la más sencilla. Obtuvo muchos ejemplos en el enlace que di arriba. El ejemplo típico para una llamada ajax es así.

$.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);
    }
});

Más ejemplos se pueden encontrar jQuery.ajax()

Answer 5

la respuesta anterior es solo ASP.NET

necesita una referencia a jquery (quizás de un CDN): http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.1.js

y luego un bloque de código similar pero más simple ...

$.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
         }
});

He agregado algunos controladores necesarios, 404 y 500 pasan todo el tiempo si está depurando el código. Además, muchos otros errores, como el tiempo de espera, se filtrarán a través del controlador de errores.

Los controladores MVC de ASP.NET manejan las solicitudes, por lo que solo necesita solicitar la URL correcta y el controlador la detectará. Este ejemplo de código funciona en entornos distintos a ASP.NET