none
Dialog em MVC RRS feed

  • Pergunta

  • Bom dia senhores.

    Alguma idéia de como abrir um dialog(PopUp) para inserção ou consulta de informações com MVC + Razor???

    Uso o Jquery + Razor?

    O objetivo é clicar em um link e abrir uma janela, ao clicar em ok transferir a informação para a pagina.

    quinta-feira, 18 de setembro de 2014 13:41

Respostas

  • Luiz Lopes Ziul

    Cara popup você pode utilizar a do jquery UI muito facil de trabalhar. 

    Exemplo: 

    function AbrirPopUp(){
    
       $.ajax({
            type:'POST',
            url:'@Url.Action("Exemplo")',
            data: {
                   item: $("#textBox").val()
                  },
            success: function (retorno){
    
                  // Carregar sua popup
                  $("#divPopUp").html(retorno).dialog().show();
            }
       });
    }
    
     // no data do ajax quando você passa entre colchetes pode passar itens da sua model exatamente com o mesmo nome
    
     <div>
            <a OnClick="AbrirPopUp()">Chama PopUp</a>
     </div> 
    <div id="divPopUp"></div>
    
     // Na sia controller
     [HttpPost]
     public ActionResult Exemplo(ClasseModel model)
     {
          // Sua lógica
          return PartialView("ViewPopUp", model);
     }
    
    
    // PartialView 
    
    @model Sistema.Models.ClasseModel
    
    <div>
         Essa é sua popUp
    </div>

    Link do jquery UI: http://api.jqueryui.com/dialog/

    Você pode utilizar o click do jquery para o link tambem: 

    $("#linkID).click(function(){
    
       $.ajax({});
    
    });

    Abraço.


    quinta-feira, 18 de setembro de 2014 14:02

Todas as Respostas

  • Você pode usar o modal popup do JQuery UI http://jqueryui.com/dialog/

    Também pode criar um plugin próprio para fazer um popup. Vou colar meu loading como exemplo.

    //

    jQuery(function ($) {

        //Não precisa de elemento
        $.displayLoading = function (show) {
            if (show == undefined) {
                console.log('Parametro não informado, inserir true ou false');
            }
            else {
                if (show) {
                    if ($('#displayLoading').length > 0) {
                        $('#displayLoading').remove();
                    }
                    var div = $('<div id="displayLoading"></div>')

                    var styleBackground = {
                        'display': 'block',
                        'position': 'fixed',
                        'top': '0px',
                        'left': '0px',
                        'width': '100%',
                        'height': '100%',
                        'background': 'rgba(0,0,0,0.7)',
                        'z-index': '3000',
                        'padding': '0px',
                        'text-align': 'center'
                    };

                    var styleContent = {
                        'bottom': '0',
                        'left': '0',
                        'top': '0',
                        'right': '0',
                        'margin': 'auto',
                        'position': 'absolute',
                        'width': '170px',
                        'height': '70px',
                        'background': 'white',
                        'color': '#b5088f',
                        '-webkit-border-radius': '6px',
                        '-moz-border-radius': '6px',
                        'border-radius': '6px'
                    };

                    var divContent = $('<div><h5><strong>Aguarde...</strong></h5><img src="/Content/images/Gifs/loader.gif" width="128" height="15" /></div>').css(styleContent);

                    $(div).css(styleBackground);
                    $(div).html(divContent);
                    $(document.body).append(div);
                }
                else {
                    if ($('#displayLoading').length > 0) {
                        $('#displayLoading').remove();
                    }
                }
            }
        }

    });

    // Para usar no código

       $.displayLoading(true);

    ou    $.displayLoading(false);


    quinta-feira, 18 de setembro de 2014 13:58
  • Luiz Lopes Ziul

    Cara popup você pode utilizar a do jquery UI muito facil de trabalhar. 

    Exemplo: 

    function AbrirPopUp(){
    
       $.ajax({
            type:'POST',
            url:'@Url.Action("Exemplo")',
            data: {
                   item: $("#textBox").val()
                  },
            success: function (retorno){
    
                  // Carregar sua popup
                  $("#divPopUp").html(retorno).dialog().show();
            }
       });
    }
    
     // no data do ajax quando você passa entre colchetes pode passar itens da sua model exatamente com o mesmo nome
    
     <div>
            <a OnClick="AbrirPopUp()">Chama PopUp</a>
     </div> 
    <div id="divPopUp"></div>
    
     // Na sia controller
     [HttpPost]
     public ActionResult Exemplo(ClasseModel model)
     {
          // Sua lógica
          return PartialView("ViewPopUp", model);
     }
    
    
    // PartialView 
    
    @model Sistema.Models.ClasseModel
    
    <div>
         Essa é sua popUp
    </div>

    Link do jquery UI: http://api.jqueryui.com/dialog/

    Você pode utilizar o click do jquery para o link tambem: 

    $("#linkID).click(function(){
    
       $.ajax({});
    
    });

    Abraço.


    quinta-feira, 18 de setembro de 2014 14:02
  • Caro Fernando Mamprin boa tarde.

    Agradeço muito, sua sugestão foi de muita utilidade.

    Estava tentando chamar uma View quando tudo que precisava era criar o que você sugeriu. Criei uma div com todos os controle que precisava e com um buttom/link consegui chamar o método dialog do jquery.

    Agradeço muito.

    quinta-feira, 18 de setembro de 2014 19:59
  • Caro Fernando Mamprin boa tarde.

    Agradeço muito, sua sugestão foi de muita utilidade.

    Estava tentando chamar uma View quando tudo que precisava era criar o que você sugeriu. Criei uma div com todos os controle que precisava e com um buttom/link consegui chamar o método dialog do jquery.

    Agradeço muito.

    Show. 

    Só não esqueça de marcar a resposta.

    quinta-feira, 18 de setembro de 2014 20:10