Fazendo uma chamada Ajax simples para o controlador em asp.net mvc

109

Estou tentando começar com chamadas ASP.NET MVC Ajax.

Controlador:

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

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

Visão:

<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>

Só preciso imprimir um alerta com os dados de retorno do método do controlador. Código acima apenas imprima "chamara" na minha visão. Um alerta não está disparando.

ATUALIZAR

Modifiquei meu controlador conforme abaixo e ele começou a funcionar. Não tenho uma ideia clara de por que está funcionando agora. Alguém, por favor, explique. O parâmetro "a" não está relacionado, eu o adicionei porque não posso adicionar dois métodos com o mesmo nome de método e parâmetros. Acho que esta pode não ser a solução, mas 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
fonte

retornar string formatada em json {"name":"chamara"}. em seguida, tente ler comodata['name']

— Raab

1

Remova a segunda biblioteca jQuery da visualização. Seu código deve funcionar como está. Acho que um erro de script pode estar ocorrendo e impedindo o alerta de aparecer.

— Terence

23

Depois de fazer a atualização,

seu primeiro chamando a ação FirstAjax com a solicitação HttpGet padrão e renderiza a visualização Html em branco. (Antes você não estava tendo)
mais tarde, ao carregar os elementos DOM dessa visualização, sua chamada Ajax é acionada e exibe um alerta.

Anteriormente, você estava apenas retornando JSON ao navegador sem renderizar nenhum HTML. Agora ele tem uma visualização HTML renderizada de onde pode obter seus dados JSON.

Você não pode renderizar diretamente JSON seus dados simples, não HTML.

— asb
fonte

52

Remova o atributo de dados, pois você não representa POSTINGnada para o servidor (Seu controlador não espera nenhum parâmetro).

E em seu método AJAX você pode usar Razore usar em @Url.Actionvez de uma string estática:

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

De sua atualização:

$.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
fonte

3

@chamara - desculpe, remova o HttpPost (você não está postando nada no servidor, então seria um atributo redundante) e o controlador não seria atingido. Remova também "type: POST" na função AJAX como eu semeei para você.

— Darren

18

Use um Razor para alterar dinamicamente seu URL chamando sua ação assim:

$.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
fonte

Os parâmetros para Url.Action estão invertidos nesta resposta, é Url.Action (actionName, controllerName)

— xd6_

1

Não é um fã disso, incentiva o acoplamento da visão e do javascript, mas uh, o nome de usuário confere?

— Halter

@Halter UX melhora enormemente quando você não força o usuário a redirecionar em cada ação. E há muitas coisas que acontecem no lado do cliente com as quais o lado do servidor não deve se preocupar.

— Kolob Canyon

@KolobCanyon você está 100% correto. Meu comentário está mais se referindo a renderizar a url com navalha no javascript, isso acopla seu javascript com a view (o cshtml). É uma boa resposta, mas para corrigir o acoplamento estreito, talvez você possa despejar o url em um atributo de dados no chstml e lê-lo no javascript. Desculpe pela confusão!

— Halter

5

Em primeiro lugar, não há necessidade de ter duas versões diferentes de bibliotecas jquery em uma página, "1.9.1" ou "2.0.0" é suficiente para fazer as chamadas ajax funcionarem.

Aqui está o seu código de controlador:

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

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

Esta é a aparência de sua visualização:

<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
fonte

5

Se você só precisa acionar o Método C # em sua chamada Ajax, você só precisa passar dois tipos de matéria e url se sua solicitação for get, então você só precisa especificar apenas a url. siga o código abaixo, ele está funcionando bem.

Código C #:

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

Código Java Script se Get Request

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

Código Java Script se Post Request e também [HttpGet] para [HttpPost]

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

Nota: Se você usar o FirstAjax no mesmo controlador em que seu View Controller, não há necessidade do nome do controlador no url. gostarurl: 'FirstAjax',

— Muhammad Asad
fonte

4

É para sua pergunta sobre o UPDATE.

Visto que você não pode ter dois métodos com o mesmo nome e assinatura, você deve usar o atributo ActionName:

ATUALIZAR:

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

E consulte este link para obter mais referências sobre como um método se torna uma ação. Muito boa referência, entretanto.

— RGR
fonte

1

Visão;

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

Método do controlador;

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

— oyenigun
fonte

0

em vez de url: serviceURL, usar

url: '<%= serviceURL%>',

e você está passando 2 parâmetros para successFunc?

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

— swapneel
fonte

0

Adicione "JsonValueProviderFactory" em global.asax:

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

— Yashh
fonte

o que é JsonValueProviderFactory?

— Kiquenet