3

Tenho uma pagina de cadastro em ASP.NET MVC com Entity Framework, este cadastro possui um campo de indicação, onde deve ser informado o nickname do usuario que indicou.

Queria após a digitação deste campo pelo usuário validar no controller do ASP.NET com o Entity se o mesmo existe, caso não exibir a mensagem de nickname invalido.

Teria algo do próprio ASP.NET MVC + Entity para efetuar isso ou precisaria fazer com jquery e ajax, e como fazer?

3 Respostas 3

3

Você pode utilizar Partial View do ASP.Net MVC e JQuery Ajax.

No seu Controller crie um método que retorne um PartialView:

    public PartialViewResult CheckNickname(string nickname)
    {
        if (Nicknames.GetNicknames().Exists(x => x == nickname))
            ViewBag.StatusNickName = "Nickname existe";
        else
            ViewBag.StatusNickName = "Nickname não existe";

        return PartialView();
    }

Clique com o botão direito do mouse sobre o método CheckNickname e clique em "add view". Quando abrir a janela de configurações da View cheque o box "Create as partial view".

inserir a descrição da imagem aqui

Na sua Partial View você pode colocar a mensagem de validação do nickname, eu utilizei uma ViewBag pra retornar a mensagem (só tem esse código abaixo na partial view):

<h1>@Html.ViewBag.StatusNickName</h1>

Agora você precisa renderizar a Partial View em algum lugar da sua View de cadastro:

<div id="checkNicknameDiv">
@{
    Html.RenderPartial("CheckNickname");
}

Este é o Ajax que vai chamar o método que retorna a partial view:

<script type="text/javascript">

function checkNickname() {
    $.ajax(
    {
        type: 'GET',
        url: '/User/CheckNickname',
        data: { nickname: $('#nickname').val() },
        dataType: 'html',
        cache: false,
        async: true,
        success: function (data) {
            $('#checkNicknameDiv').html(data);
        }
    });
}</script>

No parâmetro data do ajax coloque o código que vai pegar o valor do campo de indicação.

Para disparar a função checkNickname(), eu criei um timer. Ao começar a digitar no campo, o timer aguarda um segundo sem digitar para disparar a função, caso continue digitando antes de completar um segundo, o timer é zerado e começa de novo.

    var typingTimer;                //timer
    var doneTypingInterval = 1000;  //tempo ms, 1 segundo por exemplo
    var $input = $('#nickname'); //campo de indicação

    //no keyup, cria o contador e começa a contagem
    $input.on('keyup', function () {
        clearTimeout(typingTimer);
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    });

    //no keydown, elimina o contador
    $input.on('keydown', function (e) {
        var keyCode = e.keyCode || e.which;
        //se teclar tab
        if (keyCode == 9) {
            checkNickname();
        }
        else {
            clearTimeout(typingTimer);
        }        
    });

    //se o tempo acabar, chama a função
    function doneTyping() {
        checkNickname();
    }

Qualquer dúvida é só falar...abraços!

3
  • Filipe muito obrigado por sua resposta, era exatamente o que eu queria, funcionou corretamente e me ajudou a compreender o funcionamento do ASP.NET + Ajax. Obs: Unica coisa é que o timer não funciona se digitar e já der TAB para pular linha. Commented 8/03/2017 às 19:37
  • De nada @Alisson! Valeu pelo feedback, alterei o javascript para disparar a função se teclar tab, dá uma olhada. Aproveitando, se estiver tudo certo, clica no check pra aceitar a resposta...grande abraço!
    – Mr. Mister
    Commented 8/03/2017 às 22:52
  • Valeu Filipe, só me restou uma ultima duvida... Hj meu model contem o id_patrocinador e na view os controles estão sendo feito em cima de um input onde o usuário informa o nickname do patrocinador. Eu conseguiria colocar a validação no Model com ModelState.AddModelError e após validação atualizar no Model o ID_PATROCINADOR? Desde já agradeço pelo auxilio e atenção. Commented 9/03/2017 às 13:22
2

Podes colocar o seguinte atributo no modelo do campo username

[Remote("validaExiste", "Account", HttpMethod = "POST", ErrorMessage = "User name already exists. Please enter a different user name.")]
public string Username

....

Depois cria o método no controlador mais ou menos assim:

[HttpPost]
public JsonResult validaExiste(string UserName) {

    var user = Membership.GetUser(UserName);

    return Json(user == null);
}

Nota: é preciso o jquery.validate.min.js e o jquery.validate.unobtrusive.min.js

1

Pelo que eu entendi você quer verificar se o valor existe no banco de dados.Caso não existir esse valor, mostrar um aviso.

Eu prefiro utilizar Ajax.beginForm, mais fácil e mais limpo. Porém precisa de mais um plugin para instalar.

Segue NuGet: https://www.nuget.org/packages/Microsoft.jQuery.Unobtrusive.Ajax

Segue um exemplo na view ou partialview:

@using (Ajax.BeginForm("Colocar nome da ação", "Colocar controller aqui", new AjaxOptions { HttpMethod = "POST", OnSuccess = "OnSuccess" }, new { @role = "form" }))
{
@Html.AntiForgeryToken()

<div class="form-group">
    <label>Exemplo</label>
    @Html.TextBoxFor(m => m.Exemplo, new { @class = "form-control", @maxlength = "15", @placeholder = "Digite o seu nickname", @autocomplete = "off" })
    @Html.ValidationMessageFor(m => m.Exemplo, "", new { @class = "text-danger" })
</div> 

<button type="submit" class="btn btn-success">Submit</button>
}

//JS
<script>
function OnSuccess(responsive) {
     alert(responsive.result);
}
</script>

Controller:

[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult NomeDaSuaAção(SeuModel model)
{
    using (var ctx = new Entities())
    {
        var result = ctx.SuaTabela.Where(x => x.SeuCampo == "valor").FirstOrDefault();

        if (result == null)
        {
            return Json(new { result = true }, JsonRequestBehavior.AllowGet);
        }
    }
}
2
  • Matheus, no seu caso ele só validaria após clicar no botão submit, correto ? Commented 9/03/2017 às 12:48
  • @AlissonMarqui, após de submit, irá no controller, verificar etc... e mandar aviso Commented 9/03/2017 às 18:54

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 .