Dialog em MVC

Question

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.

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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.