How to display messages (Summay) for the user in the Index view

0

I have a View Index and via the Create view is opened in modal form from it. When I open the modal Create, fill in the fields and click on the save button the modal remain open and the summary displays a msg at the top of the screen informing that the record has been registered. How do I, when I click the Modal Create button, the window is closed and the message (indicating that the record has been registered) is displayed at the top of the Index screen?

@model IEnumerable<Retaguarda.Application.ViewModels.PessoaSituacao.PessoaSituacaoViewModel>
@{
    ViewData["Title"] = "Gerenciar Situações de Pessoa";
}

<div class="panel">
    <div class="panel-heading">
        <h2 class="panel-title">@ViewData["Title"]</h2>
        <div class="page-header-actions">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a asp-action="Index" asp-controller="Home">Home</a></li>
                <li class="breadcrumb-item active">pessoa-situacao-gerenciar/listar-todos</li>
            </ol>
        </div>
    </div>
    <div class="panel-body container-fluid">
        <div class="row">
            <div class="col-md-12">
                <div>
                    <div class="float-left">
                        <div class="btn-group btn-group-sm"
                             role="group">
                            <a asp-action="Create" data-modal="" class="btn btn-success text-white" data-toggle="tooltip"
                               data-original-title="Nova Situação" data-container="body">
                                <i class="icon wb-plus" aria-hidden="true"></i>
                                <span class="hidden-xs">Nova Situação</span>
                            </a>
                            <a id="btnPesquisaAvancada" class="btn btn-dark text-white" data-toggle="tooltip"
                               data-original-title="Pesquisa Avançada" data-container="body">
                                <i class="icon wb-search" aria-hidden="true"></i>
                                <span class="hidden-xs">Pesquisa Avançada</span>
                            </a>
                            <div class="btn-group btn-group-sm" role="group">
                                <a data-original-title="Pesquisa Avançada" class="btn  btn-dark text-white dropdown-toggle"
                                   data-toggle="dropdown" aria-expanded="false">
                                    <i class="icon wb-grid-4" aria-hidden="true"></i>
                                    Mais Ações
                                </a>
                                <div class="dropdown-menu" aria-labelledby="exampleGroupDrop2" role="menu">
                                    <a class="dropdown-item" href="javascript:void(0)" role="menuitem"><i class="icon wb-download" aria-hidden="true"></i>Importar</a>
                                    <a class="dropdown-item" href="javascript:void(0)" role="menuitem"><i class="icon wb-upload" aria-hidden="true"></i>Exportar</a>
                                    <a class="dropdown-item" href="javascript:void(0)" role="menuitem"><i class="icon wb-print" aria-hidden="true"></i>Imprimir</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <br />
        <div id="divPesquisaAvancada" class="busca">
            <div class="panel bg-blue-grey-100">
                <div class="panel-heading">
                    <h2 class="panel-title">Opções Avançadas de Pesquisa</h2>
                </div>
                <div class="panel-body container-fluid">
                    <div class="form-group">
                        <p>Não há Opções de Pesquisa.</p>
                    </div>
                    <div class="form-group">
                        <div class="pull-right">
                            <button id="btnPesquisar" class="btn btn-primary"><i class="icon wb-search"></i> Pesquisar </button>
                            <button id="btnFecharPesquisa" class="btn btn-danger"><i class="icon wb-close"></i> Fechar </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <br />
        <div class="panel panel-default">
            <table id="dtPrincipal" class="table table-striped table-bordered center-header table-vcenter" cellspacing="0" width="100%">
                <thead class="bg-blue-grey-100">
                    <tr>
                        <th>
                            ID
                        </th>
                        <th>
                            Descrição
                        </th>
                        <th>
                            Ações
                        </th>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</div>

<div class="modal fade modal-primary" id="modalGenerica" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog modal-dialog-centered" style="width: 800px; height: 500px;">
        <div class="modal-content">
            <div id="contentModal"></div>
        </div>
    </div>
</div>

<div class="modal fade" id="customerHistory" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Customer Data History</h4>
            </div>
            <div class="modal-body">
                <p id="customerHistoryData"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

@section scripts
    {
    <script src="~/js/cadastros/pessoaSituacao/pessoaSituacao.js"></script>
}

// Create

@model Retaguarda.Application.ViewModels.PessoaSituacao.PessoaSituacaoViewModel
@{
    ViewData["Title"] = "Cadastrar Nova Situação";
    Layout = null;
}
<div>
    <form asp-action="Create">
        @Html.AntiForgeryToken()

        <div class="modal-shadow">
            <div class="modal-header modal-header-primary">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title text-center"> @ViewData["Title"] </h4>
            </div>
           <div class="form-horizontal">
				<vc:summary />
				<div class="panel-body">
					<div class="form-group">
						<label asp-for="Id" class="col-md-2 control-label"></label>
						<div class="col-md-3">
							<input id="txtPessoaDituacaoId" asp-for="Id" class="form-control" />
							<span asp-validation-for="Id" class="text-danger"></span>
						</div>
					</div>
					<div class="form-group">
						<label asp-for="Descricao" class="col-md-2 control-label"></label>
						<div class="col-md-10">
							<input asp-for="Descricao" class="form-control" />
							<span asp-validation-for="Descricao" class="text-danger"></span>
						</div>
					</div>
				</div>   
			</div>
            <div class="modal-footer">
                <div class="col-md-offset-2 col-md-10">
                    <button id="btnSalvar" type="submit" class="btn btn-primary"><i class="icon wb-check"></i> Salvar </button>
                    <button id="btnFechar" class="btn btn-danger" data-dismiss="modal"><i class="icon wb-close"></i> Fechar </button>
                </div>
            </div>
        </div>
    </form>
</div>

<script src="~/lib/jquery-validation/dist/jquery.validate.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
}

// Controller

[HttpGet]
[Authorize(Policy = "CanWritePessoaSituacaoData")]
[Route("pessoa-situacao-gerenciar/cadastrar-novo")]
public IActionResult Create()
{
	return View();
}

[HttpPost]
[Authorize(Policy = "CanWritePessoaSituacaoData")]
[Route("pessoa-situacao-gerenciar/cadastrar-novo")]
[ValidateAntiForgeryToken]
public IActionResult Create(PessoaSituacaoViewModel pessoaSituacaoViewModel)
{

	if (!ModelState.IsValid) return View(pessoaSituacaoViewModel);
	_pessoaSituacaoAppService.Register(pessoaSituacaoViewModel);

	if (IsValidOperation())
		ViewBag.Sucesso = "Situação Cadastrada!";

	return View(pessoaSituacaoViewModel);
   
}

$(document).ready(function () {
    $.ajaxSetup({ cache: false });
    // busca los elementos el atributo data-modal y le suscribe el evento click
    $('a[data-modal]').on('click', function (e) {
        // Abre la ventana modal con el formulario solicitado 
        openmodal(this.href);
        return false;
    });

    $('table').on('click', 'a[data-modal]', function (e) {
        openmodal(this.href);
        return false;
    });

    $('#modalGenerica').on('hidden.bs.modal', function () {
        $('#contentModal').html('');
    });

    dataTablePrincipalLoad();

});
function openmodal(url) {
    // Hace una petición get y carga el formulario en la ventana modal
    $('#contentModal').load(url, function () {
        $('#modalGenerica').modal({
            keyboard: true
        }, 'show');
        //Enviar o foco para campo Descrição
        $('#modalGenerica').on('shown.bs.modal', function (event) {
            $("#txtPessoaDituacaoId").focus();
        });  
        // Suscribe el evento submit
        bindForm(this);
    });

}
function bindForm(dialog) {
    // Suscribe el formulario en la ventana modal con el evento submit

    $('form', dialog).submit(function () {
        if ($(this).valid()) {
            // Realiza una petición ajax
            $.ajax({
                url: this.action,
                type: this.method,
                data: $(this).serialize(),
                success: function (result) {
                    // Si la petición es satisfactoria, se recarga la página actual
                    if (result.success) {
                        window.location = window.location;
                    } else {
                        $('#contentModal').html(result);
                        bindForm();
                    }
                }
            });
            return false;
        } else {
            return false;
        }
    });
}

function dataTablePrincipalLoad() {

    $('.dataTables_filter input').attr('placeholder', 'Search...').hide();
    var table = $("#dtPrincipal").DataTable({
        "processing": true, // for show progress bar
        "serverSide": true, // for process server side
        "filter": true, // this is for disable filter (search box)
        "orderMulti": false, // for disable multiple column at once
        //"dom": '<"top"i>rt<"bottom"lp><"clear">',
       // "ordering": false,
        "ajax": {
            "url": '/pessoa-situacao-gerenciar/getPessoaSituacao',
            "type": "POST",
            "datatype": "json"
        },
        "columnDefs": [
            //Estilos Das Colunas
            { className: "align-center", "targets": [0] },
            { className: "align-center", "targets": [2] },

            //Largura das Colunas
            { width: 100, targets: 0 },
            { width: 100, targets: 2 }
        ],
        "columns": [
            { "data": "id", "name": "Id", "autoWidth": true },
            { "data": "descricao", "name": "Descricao", "autoWidth": true },
            {

                //"render": function (data, type, full, meta) {
                //    return  '<a btnEditar title="Editar" data-modal="" href="/pessoa-situacao-gerenciar/editar-situacao/' + full.id + '" class="btn btn-sm btn-icon btn-pure btn-default on-default edit-row"><span class="wb-edit"></span></a> |' +                        
                //            '<a title="Excluir" data-modal="" href="/pessoa-situacao-gerenciar/remover-situacao/' + full.id + '" class="btn btn-sm btn-icon btn-pure btn-default on-default remove-row"><span class="wb-trash"></span></a> |' +
                //            '<a title="Histórico" class="btn btn-sm btn-icon btn-pure btn-default on-default clockpicker" data-toggle="modal" data-target="#pessoaHistory" data-original-title="Histórico"><span class="wb-time"></span></a> |'
                //}   

                 "render": function (data, type, full, meta) {
                     return '<div class="btn-group" aria-label="Button group with nested dropdown" role="group"><a  data-modal="" href="/pessoa-situacao-gerenciar/editar-situacao/' + full.id + '"class="btn btn-sm btn-icon btn-default btn-outline" title="Visualizar/Editar"><i class="icon wb-edit" aria-hidden="true"></i></a><a data-modal="" href="/pessoa-situacao-gerenciar/remover-situacao/' + full.id + '"  class="btn btn-sm btn-icon btn-default btn-outline" title="Excluir"><i class="icon wb-trash" aria-hidden="true"></i></a><div class="btn-group" role="group"><a title="Mais Ações" class="btn btn-sm btn-outline btn-default dropdown-toggle" id="exampleGroupDrop2" data-toggle="dropdown" aria-expanded="false"><i class="icon wb-grid-4" aria-hidden="true"></i></a><div class="dropdown-menu" aria-labelledby="exampleGroupDrop2" role="menu"><a class="dropdown-item" href="javascript:void(0)" role="menuitem"><i class="icon wb-time" aria-hidden="true"></i>Histórico</a></div></div></div>';
                } 
            }
            //{
            //    "data": null, "name": "Action", "defaultContent": '<a title="Editar" asp-action="Edit" data-modal="" data-id="" class="btn btn-sm btn-icon btn-pure btn-default on-default edit-row"><span class="icon-2x wb-edit"></span></a> |' +
            //    '<a title="Detalhes" asp-action="Details" data-modal="" class="btn btn-sm btn-icon btn-pure btn-default on-default footable-row-detail-row"><span class="icon-2x wb-search"></span></a> |' +
            //    '<a title="Excluir" asp-action="Delete" data-modal="" class="btn btn-sm btn-icon btn-pure btn-default on-default remove-row"><span class="icon-2x wb-trash"></span></a> |' +
            //    '<a title="Histórico" class="btn btn-sm btn-icon btn-pure btn-default on-default clockpicker" data-toggle="modal" data-target="#pessoaHistory" data-original-title="Histórico"><span class="icon-2x wb-time"></span></a>', "autoWidth": true
            //}
        ],
        "language": {
            "sEmptyTable": "Nenhum registro encontrado",
            "sInfo": "Mostrando de _START_ até _END_ de _TOTAL_ registros",
            "sInfoEmpty": "Mostrando 0 até 0 de 0 registros",
            "sInfoFiltered": "(Filtrados de _MAX_ registros)",
            "sInfoPostFix": "",
            "sInfoThousands": ".",
            "sLengthMenu": "_MENU_ resultados por página",
            "sLoadingRecords": "Carregando...",
            "sProcessing": "Processando...",
            "sZeroRecords": "Nenhum registro encontrado",
            "sSearch": "Pesquisar",
            "searchPlaceholder": "Digite algo...",
            "oPaginate": {
                "sNext": "Próximo",
                "sPrevious": "Anterior",
                "sFirst": "Primeiro",
                "sLast": "Último"
            },
            "oAria": {
                "sSortAscending": ": Ordenar colunas de forma ascendente",
                "sSortDescending": ": Ordenar colunas de forma descendente"
            }
        }

    });

    $('.search-input').on('keyup change', function () {
        var index = $(this).attr('data-column'),
            val = $(this).val();
        table.columns(index).search(val.trim()).draw();
    });
    
}

//Painel de Pesquisa Avançada
$("#btnPesquisaAvancada").click(function () {
    openPainelPesquisaAvancada();
});
$("#btnFecharPesquisa").click(function () {
    closePainelPesquisaAvancada();
});

function openPainelPesquisaAvancada() {
    $(this).toggleClass();
    $("#divPesquisaAvancada").slideToggle();
}
function closePainelPesquisaAvancada() {
    $("#divPesquisaAvancada").slideToggle();
}
    
asked by anonymous 11.07.2018 / 03:05

1 answer

0

An alternative, if successful, redirects to the index by adding the message in TempData, and access that variable in the index with an if.

[HttpPost]
[Authorize(Policy = "CanWritePessoaSituacaoData")]
[Route("pessoa-situacao-gerenciar/cadastrar-novo")]
[ValidateAntiForgeryToken]
public IActionResult Create(PessoaSituacaoViewModel pessoaSituacaoViewModel)
{

    if (!ModelState.IsValid) 
        return View(pessoaSituacaoViewModel);

    _pessoaSituacaoAppService.Register(pessoaSituacaoViewModel);

    if (IsValidOperation()) {
        TempData["Mensagem"] = "Situação Cadastrada!";
        return RedirectToAction(nameof(Index));
    }
    return View(pessoaSituacaoViewModel);
}

And in your index view, add where you want:

@var mensagemObject = TempData["Mensagem"]

<div>
    @if (mensagemObject.ToString() != null) 
    {
       <p>@mensagemObject.ToString()</p>
    }
</div>
Note that when accessing the TempData variable ["Message"] for the first time, if you attempt to retrieve this value again you will receive a null, since you can only access this object once in TempData.

    
11.07.2018 / 03:17