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

Question

I have a View Index and via the Create view is opened in a modal form from it. When I open the Create modal, I fill in the fields and click on the save button the modal remains open and Summary displays an msg at the top of the screen informing that the record has been registered. How do I make it so that when I click the Save button (Modal Create), the window is closed and the message (stating that the record has been registered) is shown 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();
}

Answer 1

Alternatively, if successful, redirect to the index by adding the message in Tempdata, and access this 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 it wherever 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 try to recover this value again you will receive a null, as you can only access this object once in Tempdata.