3

Tenho essa função javascript.

function loginUsuario(){

    alert();

    if(($('#txtUsuario').val() != "") && ( $("#txtSenha").val() != ""))
        resultado = JQuery.parseJSON('{"Usuario": "' + $('#txtUsuario').val() + '", "Senha": "' + $("#txtSenha").val() + '}');
    else
        return;

    $.ajax({

        url: '/Home/loginUsuario',
        datatype: 'json',
        contentType: "application/json; charset=utf-8",
        type: "POST",
        data: JSON.stringify({ loginUsuario: resultado }),
        success: function (data) {

            alert('Login realizado com sucesso!!');
        },
        error: function (error) {

            loading(0, "");
        }

    });
}

e tenho essa action na controller ainda em desenvolvimento

public ActionResult loginUsuario(LoginUsuario loginUsuario)
        {
            V99_WEB_QAEntities db = new V99_WEB_QAEntities();

            EncriptyDecripty decripta = new EncriptyDecripty();

            try
            {
                var resultado = (from log in db.T_Usuario
                                 where log.Login == loginUsuario.Usuario && decripta.Decrypt(log.Pswd) == loginUsuario.Senha
                                 select new { log.Nome }).FirstOrDefault();
            }
            catch (Exception ex)
            {
                string erro = ex.Message;
            }

            return View(loginUsuario);
        }

Acontece que quando eu clico no botão para logar, nada acontece. Não dá erro e percebo que o formulário é enviado, mas não chama a função JS e consequentemente não chama a action. O que mais devo fazer? Abaixo o meu CSHTML.

<form method="post" action="@Action" id="frmLogin">
                <table style="margin-top:10px;">
                    <tr>
                        <td>
                            Usuário:
                        </td>
                        <td>
                            <input type="text" name="txtUsuario" id="txtUsuario" maxlength="20" class="" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            Senha:
                        </td>
                        <td>
                            <input type="password" name="txtSenha" id="txtSenha" maxlength="10" class="" />
                        </td>
                    </tr>
                    <tr>
                        <td>
                            @*<input type="submit" name="btnEntrar" id="btnEntrar" value="Entrar" onclick="loginUsuario();"/>*@
                            <button name="btnEntrar" id="btnEntrar" value="Entrar" onclick=" loginUsuario();">Entrar</button>
                        </td>
                    </tr>
                </table>
            </form>

Uma pergunta. Quando eu mudei o valor da action no form, me deu esse erro:

Compiler Error Message: CS0118: 'System.Action' is a 'type' but is used like a 'variable'

Source Error:


Line 19:         <fieldset>
Line 20:             @*<legend>Informe seus dados</legend>*@
Line 21:             <form method="post" action="@Action" id="frmLogin">
Line 22:                 <table style="margin-top:10px;">
Line 23:                     <tr>

Devo manter action="/Home/Minha_Action" ou pode ser assim? Pois em outro exemplo em outra empresa que eu estava, meu amigo fez assim conforme acima e funcionou e comigo me dá o erro.

Coloquei no Fidlle e me deu esse erro lá:

{"error": "Shell form does not validate{'html_initial_name': u'initial-js_lib', 'form': <mooshell.forms.ShellForm object at 0x2145890>, 'html_name': 'js_lib', 'html_initial_id': u'initial-id_js_lib', 'label': u'Js lib', 'field': <django.forms.models.ModelChoiceField object at 0xfcc210>, 'help_text': '', 'name': 'js_lib'}{'html_initial_name': u'initial-js_wrap', 'form': <mooshell.forms.ShellForm object at 0x2145890>, 'html_name': 'js_wrap', 'html_initial_id': u'initial-id_js_wrap', 'label': u'Js wrap', 'field': <django.forms.fields.TypedChoiceField object at 0xfcc350>, 'help_text': '', 'name': 'js_wrap'}"}

2 Respostas 2

3

Tente trocar a assinatura do seu método no Controller para tipos simples, e insira a anotação de POST explicitamente:

Exemplo:

[HttpPost]
public ActionResult loginUsuario(string Usuario, string Senha)

E para criar o objecto JSON, não de todo um giro, faça simplesmente assim:

resultado = {"Usuario": $('#txtUsuario').val(), "Senha": $("#txtSenha").val()});

E na chamada do ajax mude para isso:

$.ajax({
    url: '/Home/loginUsuario',
    datatype: 'json',
    contentType: "application/json; charset=utf-8",
    type: "POST",
    data: JSON.stringify(resultado), // passe simplesmente o JSON serializado em string
    success: function (data) {
        alert('Login realizado com sucesso!!');
    },
    error: function (error) {
        loading(0, "");
    }
});

Faça também a chamada no modo que o @GuilhermeOderdenge citou em sua resposta, para evitar o POST padrão do form.

$('form').on('submit', function(e) {
    e.preventDefault();    
    loginUsuario();
});

EDIT (respondendo o comentário)

Seu form ficaria assim:

 <form method="POST" id="frmLogin">
            <table style="margin-top:10px;">
                <tr>
                    <td>
                        Usuário:
                    </td>
                    <td>
                        <input type="text" name="txtUsuario" id="txtUsuario" maxlength="20" class="" />
                    </td>
                </tr>
                <tr>
                    <td>
                        Senha:
                    </td>
                    <td>
                        <input type="password" name="txtSenha" id="txtSenha" maxlength="10" class="" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <input type="submit" name="btnEntrar" id="btnEntrar" value="Entrar"/>
                    </td>
                </tr>
            </table>
        </form>
15
  • @pnet, remova os onclick dos botões e a action do form, e mantenha um button do type="submit", que irá disparar a o evento submit, o jQuery já está observando o submit. Commented 23/04/2014 às 14:29
  • Então, fiz conforme o Fernando me falou, mas mesmo assim continua não entrando na função JQuery, pois coloquei um alert() bem no começo e mesmo assim ele não dispara
    – pnet
    Commented 23/04/2014 às 15:16
  • @pnet, poderia postar seu código client no jsFidlle, para podermos identificar o problema, com maior facilidade? Commented 23/04/2014 às 16:26
  • @pnet, Fiz um exemplo aqui e está chamando a função. Commented 23/04/2014 às 16:31
  • 1
    Acho que era cache do navegador. Reiniciei o navegador e funcionou, ou seja, entrou na função e chamou a função da controller. Só que deu esse erro que estou verificando o porque: The underlying provider failed on Open.
    – pnet
    Commented 23/04/2014 às 19:38
3

Quando você submeter o formulário, você deve chamar a função loginUsuario(). Você está fazendo isso?

Coloque isso após a implementação da função loginUsuario():

$('form').on('submit', function(e) {
    e.preventDefault();

    loginUsuario();
});

O trecho acima irá previnir o comportamento padrão do formulário e chamará a função necessária para o envio dos dados para o seu back-end.

5
  • adicionei as bibliotecas do javascript no meu cshtml e continua dando o erro de: $ is not defined
    – pnet
    Commented 23/04/2014 às 19:04
  • O seu jQuery está instalado? Commented 23/04/2014 às 19:05
  • sim: <script src="@Url.Content("~/Scripts/jquery-1.10.2.js")"></script> <script src="@Url.Content("~/Scripts/jquery-1.10.2.min.js")"></script> <script src="@Url.Content("~/Scripts/jquery-2.1.0.js")"></script> <script src="@Url.Content("~/Scripts/jquery-2.1.0.min.js")"></script> <script src="@Url.Content("~/Scripts/jquery-migrate-1.2.1.js")"></script> <script src="@Url.Content("~/Scripts/jquery-migrate-1.2.1.min.js")"></script> <script src="@Url.Content("~/Scripts/jquery-ui.js")"></script> <script src="@Url.Content("~/Scripts/jquery-ui.min.js")"></script>
    – pnet
    Commented 23/04/2014 às 19:23
  • É o seguinte, movi a linha de script Home/Home.js para o final e não deu mais o erro. Até então não sabia disso. Porem continua não entrando no meu método.
    – pnet
    Commented 23/04/2014 às 19:29
  • Qual erro que o console exibe, @pnet? Commented 23/04/2014 às 20:03

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 .