POPUP MODA NET CORE MVC - TELA DE CONSULTA
Bom dia galera, alguem pode dar uma dica como eu posso abrir um popup modal onde atualiza o form pai e fazer a consulta neste popup e fechar apenas quando eu selecionar o item ou clicar para fechar
Eu consegui abrir o popup modal e atualizar o formulario pai, porem não consigo fazer a consulta no mysql e continuar nesse popup, ele fecha e abre o controlelr em uma nova tela não pupup
Segue tela exemplo.
Eu consegui abrir o popup modal e atualizar o formulario pai, porem não consigo fazer a consulta no mysql e continuar nesse popup, ele fecha e abre o controlelr em uma nova tela não pupup
Segue tela exemplo.
Voce deve enviar uma requisicao via javascript, consumir o que precisa do outro lado e retornar um json para entao limpar e carregar a modal novamente, se fizer do jeito que esta fazendo havera um post e consequentemente o reload da pagina.
Algo como
Algo como
function pesquisar(){
$.post("/api/pesquisar", {nome: $("#nome").val()}, function(response){
$("#resultado").html("");
//um foreach de teu response...
//adicionando o conteudo a seu target/div
});
}
A sugestão do WEBMASTER pode resolver seu problema, o caso é que não deveria pensar dessa maneira quando fizer aplicações web.
Só para entender qual seria o certo ??
Quanto menos se desviar da coisa que está sendo feita, melhor. Nesse caso, o que eu faria: O próprio campo onde vai o valor é a procura. Ao digitar seja uma descrição ou um código, mostro logo abaixo do campo uma pequena lista(2 ou 3 itens) do resultado de procura do termo digitado. O usuário vai refinando a sua busca até achar o item desejado. Quando restar somente um item na lista, basta pressionar enter e o valor correto será colocado no campo.
Citação::
Voce deve enviar uma requisicao via javascript, consumir o que precisa do outro lado e retornar um json para entao limpar e carregar a modal novamente, se fizer do jeito que esta fazendo havera um post e consequentemente o reload da pagina.
Algo como
function pesquisar(){
$.post("/api/pesquisar", {nome: $("#nome").val()}, function(response){
$("#resultado").html("");
//um foreach de teu response...
//adicionando o conteudo a seu target/div
});
}
Abaixo segue meu codigo de uma .cshtml onde carrega o retorno de um controller para preecher a tela de consulta.
Acrescentei seu codigo, seria possivel fornecer um exemplo de como consumir corretamente esta pagina, porque como vc falou ao dar submit para carregar a consulta através de uma quyery Mysql, abre uma nova pagina.
@model IEnumerable<MarketPlace_Mvc_Core.MercadoriaGrupo_Model>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
@Html.AntiForgeryToken()
<div class="container">
<div class="row">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
@*<div class="modal-content" style="height: 600px !important; width: 1200px !important;">*@
<div class="modal-content">
<div class="modal-header">
<h4>Selecione o Grupo</h4>
<p>
Nome: <input type="text" name="TxtPsq_Nome" id="TxtPsq_Nome" />
Codigo: <input type="text" name="TxtPsq_Codigo" id="TxtPsq_Codigo" />
@*<button class="btn btn-secondary"></button>*@
<input type="submit" value="Pesquisar" class="btn btn-secondary" />
</p>
</div>
<div class="modal-body">
<table>
<thead>
<tr>
@*<td>
Select
</td>*@
<td>
@Html.DisplayNameFor(model => model.Cd_MercadoriaGrupo)
</td>
<td>
@Html.DisplayNameFor(model => model.Nome)
</td>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
<button class="btn btn-success" Codigo="@item.Cd_MercadoriaGrupo" Nome="@item.Nome">
</button>
</td>
<td id="tdQualification">
@Html.DisplayFor(modelItem => item.Cd_MercadoriaGrupo)
</td>
<td id="tdNome">
@Html.DisplayFor(modelItem => item.Nome)
</td>
</tr>
}
</tbody>
</table>
</div>
<div class="modal-footer">
<button id="btnClose">Fechar</button>
<button id="btnQualSave">Salva Mudancas</button>
</div>
</div>
</div>
</div>
</div>
@*}*@
@section Scripts {
@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script type="text/javascript">
function pesquisar() {
$.post("/api/pesquisar", { nome: $("#nome").val() }, function (response) {
$("#resultado").html("");
//um foreach de teu response...
//adicionando o conteudo a seu target/div
});
}
$("button.btn-success").click(function () {
//var s = $("#txtCd_Grupo").val();
//s += "," + $(this).attr("id");
var s = $(this).attr("Codigo");
$("#txtCd_Grupo").attr("value", s);
var s2 = $(this).attr("Nome");
$("#txtNo_Grupo").attr("value", s2);
})
</script>
}
Vou deixar um exemplo de um sistema que tenho que dar manutenção, serve de base para voce entender
Marktup
Script
Sugestão
Leia com calma, é muuuita informação para digerir, pois voce vai notar que eu inclusive dou um trigger em eventos para que janelas genéricas (essa modal é incluida em páginas via widget e reaproveitada em muitos lugares) possam obter a sinalização de que um evento ocorreu na modal e eles tem que internamente resolver algo...
Marktup
<div class="modal" tabindex="-1" role="dialog" id="modal-wg-produto">
<div class="modal-dialog modal-xl modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header bg-secondary">
<h5 class="modal-title">Adicionar produto</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body modal-overflow">
<form autocomplete="off">
<input autocomplete="false" name="hidden" type="text" style="display:none;">
<div class="row">
<div class="col-12">
<div class="input-group mb-3">
<input type="text" class="form-control form-control-sm" name="txt-wg-produto" id="txt-wg-produto" maxlength="70" placeholder="Digite o SKU do produto ou parte de seu nome">
<div class="input-group-append">
<button type="button" name="btn-wg-produto" id="btn-wg-produto" class="btn btn-sm btn-primary" onclick="widgetProdutoLocalizar();" tabindex="-1" title="Procura por produtos disponÃÂveis por SKU ou nome contendo o valor informado"><i class="fa fa-search"></i></button>
</div>
</div>
</div>
</div>
</form>
<div class="row">
<div class="col-12">
<div class="table-responsive">
<table id="table-widget-produto" class="table table-hover">
<thead>
<tr>
<th></th>
<th>SKU</th>
<th>Descrição</th>
<th>Estoque</th>
<th> </th>
<th>Alterado</th>
<th>Quantidade</th>
<th title="Último Valor praticado para o cliente">Último</th>
<th title="Valor de tabela">Tabela</th>
<th title="Valor minimo de venda">Mínimo</th>
<th title="Valor final de venda">Venda</th>
<th title="Quantidade * Valor Final">SubTotal</th>
</tr>
</thead>
<tbody>
<tr>
<td>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-primary" id="btn-wg-produto-adicionar" onclick="widgetProdutoAdicionar();">Adicionar</button>
<button type="button" class="btn btn-sm btn-link" data-dismiss="modal">Fechar</button>
</div>
</div>
</div>
</div>
Script
<script>
$(document).ready(function(){
$("#txt-wg-produto").keyup(function(event){
if (event.keyCode == 13) $("#btn-wg-produto").click();
});
});
$("#modal-wg-produto").on("show.bs.modal", function() {
var tabela = "#table-widget-produto";
$(tabela).find("tbody").find("tr").remove();
addSemRegistros(tabela);
$("#txt-wg-produto").val("");
$("#btn-wg-produto-adicionar").attr("disabled", "disabled");
setTimeout(() => {
$("#txt-wg-produto").focus();
}, 300);
$(document).trigger("wg-evt-produto-adicionar-show");
});
$(document).on("change", ".txt-wg-produto-quantidade, .txt-wg-produto-venda", function(){
var p = $(this).data("produto");
var q = $("#txt-wg-produto-quantidade-" + p).toFloat();
var v = toDBDecimal($("#txt-wg-produto-venda-" + p).val());
if (q == 0 || v == 0)
{
$("#txt-wg-produto-subtotal-" + p).val("").trigger("change");
return;
}
$("#txt-wg-produto-subtotal-" + p).val(toDecimal(q * v)).trigger("change");
});
$(document).on("change", ".txt-wg-produto-subtotal", function(){
var preenchido = false;
console.log("totalizando");
$(".txt-wg-produto-subtotal").each(function(){
if($(this).val() != "" && $(this).val != "0.00" && $(this).val != "0,00")
{
//console.log("Preencheu com ", $(this).val);
preenchido = true;
return;
}
});
if (preenchido)
{
$("#btn-wg-produto-adicionar").removeAttr("disabled");
}
else
{
$("#btn-wg-produto-adicionar").attr("disabled", "disabled");
}
});
function widgetProdutoAdicionar()
{
$("#btn-wg-produto-adicionar").spin();
$(".txt-wg-produto-subtotal").each(function(){
if($(this).val() != "" && $(this).val != "0.00" && $(this).val != "0,00")
{
produto = parseInt($(this).data("produto"));
var objeto = {id : produto,
imagem: $("#img-produto-widget-" + produto).attr("src"),
codigo: $("#txt-wg-produto-codigo-" + produto).val(),
nome : $("#txt-wg-produto-nome-" + produto).val(),
ncm : $("#txt-wg-produto-ncm-" + produto).val(),
peso : $("#txt-wg-produto-peso-" + produto).val(),
pesobruto : $("#txt-wg-produto-pesobruto-" + produto).val(),
quantidade: $("#txt-wg-produto-quantidade-" + produto).val(),
unitario: $("#txt-wg-produto-venda-" + produto).val(),
tabela: $("#txt-wg-produto-tabela-" + produto).val(),
subtotal: $("#txt-wg-produto-subtotal-" + produto).val()
};
$(document).trigger("wg-evt-produto-adicionar", objeto);
$("#table-widget-produto #row-" + produto).remove();
}
});
$("#btn-wg-produto-adicionar").unspin();
}
function widgetProdutoLocalizar()
{
var tabela = "#table-widget-produto";
var cadastroid = 0;
addCarregando(tabela);
if ($("#codcadastro").length) cadastroid = parseInt($("#codcadastro").val());
if ($("#cadastroid").length) cadastroid = parseInt($("#cadastroid").val());
$("#btn-wg-produto").attr("disabled", "disabled");
$.get("./api/produto/widget", {term : $.trim($("#txt-wg-produto").val()), cadastro: cadastroid}, function(response){
$(tabela).find("tbody").find("tr").remove();
if (typeof(response) != "object" || !Array.isArray(response) || response.length == 0)
{
$("#btn-wg-produto").removeAttr("disabled");
addSemRegistros(tabela);
return;
}
response.forEach(function(item){
let estoqueClass = item.estoque > 0 ? "app-badge-success" : "app-badge-danger";
let inputCodigo = "<input type="hidden" id="txt-wg-produto-codigo-" + item.id + "" value="" + item.codigo + "">";
let inputNCM = "<input type="hidden" id="txt-wg-produto-ncm-" + item.id + "" value="" + item.ncm + "">";
let inputPeso = "<input type="hidden" id="txt-wg-produto-peso-" + item.id + "" value="" + item.pesobruto + "">";
let inputNome = "<input type="hidden" id="txt-wg-produto-nome-" + item.id + "" value="" + item.nome + "">";
let inputPesoBruto = "<input type="hidden" id="txt-wg-produto-pesobruto-" + item.id + "" value="" + item.pesobruto + "">";
let inputQtde = "<input type="text" id="txt-wg-produto-quantidade-" + item.id + "" class="form-control form-control-sm numeric txt-wg-produto-quantidade" data-produto="" + item.id + "" maxlength="7">";
let inputUltimo = "<input type="text" id="txt-wg-produto-ultimo-" + item.id + "" class="form-control form-control-sm txt-wg-produto-ultimo" data-produto="" + item.id + "" value="" + toDecimal(item.ultimo) + "" title="Vendido em " + item.ultimodata + "" readonly tabindex="-1">";
let inputTabela = "<input type="text" id="txt-wg-produto-tabela-" + item.id + "" class="form-control form-control-sm txt-wg-produto-tabela" data-produto="" + item.id + "" value="" + toDecimal(item.unitario) + "" readonly tabindex="-1">";
let inputMinimo = "<input type="text" id="txt-wg-produto-minimo-" + item.id + "" class="form-control form-control-sm txt-wg-produto-minimo" data-produto="" + item.id + "" value="" + toDecimal(item.minimo) + "" readonly tabindex="-1">";
let inputVenda = "<input type="text" id="txt-wg-produto-venda-" + item.id + "" class="form-control form-control-sm moeda txt-wg-produto-venda" data-produto="" + item.id + "" maxlength="12" value="" + toDecimal(item.unitario) + "">";
let inputSubtotal = "<input type="text" id="txt-wg-produto-subtotal-" + item.id + "" class="form-control form-control-sm moeda txt-wg-produto-subtotal" data-produto="" + item.id + "" maxlength="12" readonly tabindex="-1">";
let badgeAnalise = item.analise.id > 0 ? "<a class="btn btn-sm btn-primary" title="Analise para este produto x cliente" id="lnk-analise-" + item.analise.id + "" href="javascript:mostrarAnalise(" + item.analise.id + ");" data-observacao="" + item.analise.observacao + "" data-usuario="" + item.analise.usuario + "" data-criado="" + item.analise.data + ""><i class="fa fa-comment fa-fw text-white"></i></a>" : "";
adicionarLinha(tabela, null, item.id, [item.imagem, item.codigo + inputCodigo + inputNome + inputNCM + inputPeso + inputPesoBruto, item.nome, {class : estoqueClass, text: item.estoque}, badgeAnalise, toDate(item.precificacao, true), inputQtde, inputUltimo, inputTabela, inputMinimo, inputVenda, inputSubtotal]);
});
$("#btn-wg-produto").removeAttr("disabled");
});
}
</script>
Sugestão
Leia com calma, é muuuita informação para digerir, pois voce vai notar que eu inclusive dou um trigger em eventos para que janelas genéricas (essa modal é incluida em páginas via widget e reaproveitada em muitos lugares) possam obter a sinalização de que um evento ocorreu na modal e eles tem que internamente resolver algo...
Obrigado, vou estudar tentar adaptar a minha necessidade, darei retorno assim que possivel
Faça seu login para responder