Usuário com melhor resposta
Dialog em MVC

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.
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.
- Editado Fernando Mamprin quinta-feira, 18 de setembro de 2014 14:05
- Sugerido como Resposta welington jrModerator quinta-feira, 18 de setembro de 2014 23:11
- Marcado como Resposta welington jrModerator sábado, 16 de dezembro de 2017 16:22
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);
- Editado Cesar Mendes da Silva quinta-feira, 18 de setembro de 2014 14:49 complemento
-
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.
- Editado Fernando Mamprin quinta-feira, 18 de setembro de 2014 14:05
- Sugerido como Resposta welington jrModerator quinta-feira, 18 de setembro de 2014 23:11
- Marcado como Resposta welington jrModerator sábado, 16 de dezembro de 2017 16:22
-
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.
-
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.