Hacer una llamada Ajax simple al controlador en asp.net mvc

109

Estoy tratando de comenzar con las llamadas ASP.NET MVC Ajax.

Controlador:

public class AjaxTestController : Controller
{
    //
    // GET: /AjaxTest/
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult FirstAjax()
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }   
}

Ver:

<head runat="server">
    <title>FirstAjax</title>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var serviceURL = '/AjaxTest/FirstAjax';

            $.ajax({
                type: "POST",
                url: serviceURL,
                data: param = "",
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: successFunc,
                error: errorFunc
            });

            function successFunc(data, status) {     
                alert(data);
            }

            function errorFunc() {
                alert('error');
            }
        });
    </script>
</head>

Solo necesito imprimir una alerta con el método del controlador que devuelve datos. Sobre el código, simplemente imprima "chamara" en mi vista. Una alerta no se dispara.

ACTUALIZAR

Modifiqué mi controlador como se muestra a continuación y comenzó a funcionar. No tengo una idea clara de por qué está funcionando ahora. Alguien por favor explique. El parámetro "a" no está relacionado, lo agregué porque no puedo agregar dos métodos con el mismo nombre de método y parámetros. Creo que esta podría no ser la solución, pero está funcionando.

public class AjaxTestController : Controller
    {
        //
        // GET: /AjaxTest/
        [HttpGet]
        public ActionResult FirstAjax()
        {
            return View();
        }

        [HttpPost]
        public ActionResult FirstAjax(string a)
        {
            return Json("chamara", JsonRequestBehavior.AllowGet);
        }
    }

— chamara
fuente

devolver cadena con formato json {"name":"chamara"}. luego intente leer comodata['name']

— Raab

1

Elimine la segunda biblioteca jQuery de la vista. Tu código debería funcionar como está. Creo que podría estar ocurriendo un error de secuencia de comandos que impida que aparezca la alerta.

— Terence

23

Después de la actualización que haya realizado,

su primera llamada a la acción FirstAjax con la solicitud HttpGet predeterminada y muestra la vista Html en blanco. (Antes no lo tenías)
más tarde, al cargar los elementos DOM de esa vista, su llamada Ajax se activa y muestra una alerta.

Anteriormente, solo devolvía JSON al navegador sin renderizar ningún HTML. Ahora tiene una vista HTML renderizada donde puede obtener sus datos JSON.

No puede representar directamente JSON sus datos sin formato, no HTML.

— asb
fuente

52

Elimina el atributo de datos ya que no lo estás POSTING nada para el servidor (su controlador no espera ningún parámetro).

Y en su método AJAX puede usar Razory usar en @Url.Actionlugar de una cadena estática:

$.ajax({
    url: '@Url.Action("FirstAjax", "AjaxTest")',
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: successFunc,
    error: errorFunc
});

De su actualización:

$.ajax({
    type: "POST",
    url: '@Url.Action("FirstAjax", "AjaxTest")',
    contentType: "application/json; charset=utf-8",
    data: { a: "testing" },
    dataType: "json",
    success: function() { alert('Success'); },
    error: errorFunc
});

— Darren
fuente

3

@chamara: lo siento, elimine HttpPost (no está publicando nada en el servidor, por lo que sería un atributo redundante) y no se activará el controlador. También elimine "tipo: POST" en la función AJAX como se lo he sembrado.

— Darren

18

Use una navaja para cambiar dinámicamente su URL llamando a su acción de esta manera:

$.ajax({
    type: "POST",
    url: '@Url.Action("ActionName", "ControllerName")',
    contentType: "application/json; charset=utf-8",
    data: { data: "yourdata" },
    dataType: "json",
    success: function(recData) { alert('Success'); },
    error: function() { alert('A error'); }
});

— gdmanandamohon
fuente

Los parámetros para Url.Action están al revés en esta respuesta, es Url.Action (actionName, controllerName)

— xd6_

1

No soy un fanático de esto, fomenta el acoplamiento de la vista y el javascript, pero eh, ¿el nombre de usuario se comprueba?

— Cabestro

@Halter UX mejora enormemente cuando no obliga al usuario a redirigir en cada acción. Y hay muchas cosas que suceden en el lado del cliente que no deberían importarle al lado del servidor.

— Kolob Canyon

@KolobCanyon, estás 100% correcto. Mi comentario se refiere más a renderizar la URL con razor en el javascript, esto combina estrechamente su javascript con la vista (el cshtml). Es una buena respuesta, pero para corregir el acoplamiento estrecho, tal vez podría volcar la URL en un atributo de datos en el chstml y leerlo en el javascript. ¡Perdón por la confusion!

— Cabestro

5

En primer lugar, no es necesario tener dos versiones diferentes de las bibliotecas jquery en una página, ya sea "1.9.1" o "2.0.0" es suficiente para que las llamadas ajax funcionen.

Aquí está el código de su controlador:

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

    public ActionResult FirstAjax(string a)
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }

Así es como debería verse su vista:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    var a = "Test";
    $.ajax({
        url: "../../Home/FirstAjax",
        type: "GET",
        data: { a : a },
        success: function (response) {
            alert(response);
        },
        error: function (response) {
            alert(response);
        }
    });
});
</script>

— Lokesh_Ram
fuente

5

Si solo necesita presionar el Método C # en su llamada Ajax, solo necesita pasar dos tipos de materia y una URL si su solicitud es obtenida, entonces solo necesita especificar la URL solamente. siga el código a continuación, está funcionando bien.

Código C #:

    [HttpGet]
    public ActionResult FirstAjax()
    {
        return Json("chamara", JsonRequestBehavior.AllowGet);
    }

Código de secuencia de comandos de Java si se obtiene una solicitud

    $.ajax({
        url: 'home/FirstAjax',
        success: function(responce){ alert(responce.data)},
        error: function(responce){ alert(responce.data)}
    });

Código de secuencia de comandos de Java si se envía una solicitud y también [HttpGet] a [HttpPost]

        $.ajax({
            url: 'home/FirstAjax',
            type:'POST',
            success: function(responce){ alert(responce)},
            error: function(responce){ alert(responce)}
        });

Nota: Si usa FirstAjax en el mismo controlador en el que está su View Controller, entonces no es necesario el nombre del controlador en la url. me gustaurl: 'FirstAjax',

— Muhammad Asad
fuente

4

Es para su pregunta ACTUALIZAR.

Dado que no puede tener dos métodos con el mismo nombre y firma, debe usar el atributo ActionName:

ACTUALIZAR:

[HttpGet]
public ActionResult FirstAjax()
{
    Some Code--Some Code---Some Code
    return View();
}

[HttpPost]
[ActionName("FirstAjax")]
public ActionResult FirstAjaxPost()
{
    Some Code--Some Code---Some Code
    return View();
}

Y consulte este enlace para obtener más referencias sobre cómo un método se convierte en una acción. Aunque muy buena referencia.

— RGR
fuente

1

Ver;

 $.ajax({
        type: 'GET',
        cache: false,
        url: '/Login/Method',
        dataType: 'json',
        data: {  },
        error: function () {
        },
        success: function (result) {
            alert("success")
        }
    });

Método de controlador;

 public JsonResult Method()
 {
   return Json(new JsonResult()
      {
         Data = "Result"
      }, JsonRequestBehavior.AllowGet);
 }

— Oyenigun
fuente

0

en lugar de url: serviceURL, usar

url: '<%= serviceURL%>',

y estás pasando 2 parámetros a successFunc?

function successFunc(data)
 {
   alert(data);
 }

— swapneel
fuente

0

Agregue "JsonValueProviderFactory" en global.asax:

protected void Application_Start()
{
    AreaRegistration.RegisterAllAreas();
    ValueProviderFactories.Factories.Add(new JsonValueProviderFactory());
}

— Yashh
fuente

¿Qué es JsonValueProviderFactory?

— Kiquenet