7

Eu tenho meu Form com a seguinte declaração:

@using (Ajax.BeginForm("Novo","Cliente", new AjaxOptions 
{ 
    OnSuccess = "OnSuccess", 
    OnFailure = "OnFailure" 
}))
{ }

Minhas funções no js:

function OnSuccess(response) {
    alert(response);
}

function OnFailure(response) {
    alert(response);
}

E meu Controller:

public ActionResult Novo(MyModel model)
{
    if (ModelState.IsValid)
    {
        return Json(new { data = 1 }, JsonRequestBehavior.AllowGet);
    }
    return View(model);
}

Mas ele não chama minhas funções, retorna um Json na página toda. O que está errado?

5
  • Retorna a página branca,com o valor 1 apenas, sim, se ele não estiver válido retorna a view, caso contrário ele deve retornar esse Id para que eu possa tratar ele no cliente
    – Rod
    3/10/2014 às 17:23
  • Está na página toda e possui sim botão de submit
    – Rod
    3/10/2014 às 17:27
  • Oi Tiago, pesquisei aqui e vi que para usar o helper Ajax, precisa da lib jquery unobtrusive ajax
    – Rod
    3/10/2014 às 17:31
  • Nem tinha me tocado, se quiser fazer uma resposta e referenciado isso, pode fazer...
    – Rod
    3/10/2014 às 17:32
  • 1
    Tiago, na verdade, minha validação é toda no cliente, o ModelState seria usado para retornar a view com validação caso o js estiver desabilitado, outra coisa que omiti, é que tenho 2 submit, um que salva e é direcionado para minha Index, e outro que habilita outras informações da tela de cadastro, então para isso eu retorno um Json com o Id que recém foi salvo
    – Rod
    3/10/2014 às 17:37

1 Resposta 1

11

De fato além do jQuery você precisa do plugin Microsof jQuery Unobtrusive Ajax que pode ser obtido via NuGet.

Então a estrutura mínima para efetuar o processo é:

<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/jquery.unobtrusive-ajax.js"></script>

E o helper é no mínimo assim:

@using (Ajax.BeginForm("Novo", "Cliente", new AjaxOptions
{
    OnSuccess = "OnSuccess"
}))
{
    <button type="submit">Submit</button>
}

E a função JavaScript OnSuccess:

<script type="text/javascript">
    function OnSuccess(response) {
        if (response && response.data) // verifica se response e se response.data existe
            alert(response.data);
    }
</script>

Dessa forma você consegue utilizar o Ajax.BeginForm. Se quiser evitar mais um plugin só para envio de requisições Ajax, você pode fazer manualmente sem a necessidade do Unobtrusive Ajax:

@using(Html.BeginForm("Novo", "Cliente", FormMethod.Post, new { id = "formCliente" }))
{
    <button type="submit">Submit</button>
}

Com um script:

$(function () {
    $("#formCliente input[type=submit]").click(function (event) { 
        event.preventDefault();
        var form = document.getElementById("formCliente");
        var data = $(form).serialize();
        $.post(form.action, data, function (response) { 
            if (response && response.data)
                alert(response.data);
        });
    });
});

E se você usa o Unobtrusive Validate:

$(function () {
    $("#formCliente input[type=submit]").click(function (event) { 
        event.preventDefault();
        var $form = $("#formCliente");
        $form.validate();
        if ($form.valid) {      
            var data = $form.serialize();
            $.post($form.attr("action"), data, function (response) { 
                if (response && response.data)
                    alert(response.data);
            });
        }
    });
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .