0

Estou tentando criar uma janela modal com confirmação para exclusão de registro e evitar ter que criar uma View somente para apresentar uma mensagem, mas algo não está carregando certo. Tentei criar a janela tanto com Display quanto com Modal, mas mesmo assim não está funcionando, conferi também os Bundles do CSS para ver se não é algo com as referências, mas não detectei o erro se é no script errado ou css.

View

@model IEnumerable<MvcModeloEmpresa.Dominio.Regiao>

@{
    ViewBag.Title = "Lista de Regiões";
}

<h2>Lista Regiões</h2>

<p>
    @Html.ActionLink("Cadastrar Nova", "Adicionar")
</p>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.RegiaoID)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.RegiaoDescricao)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modeTeste => item.RegiaoID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.RegiaoDescricao)
            </td>
            <td>
                @Html.ActionLink("Editar", "Editar", new { id = item.RegiaoID }) |
                @Html.ActionLink("Detalhes", "Detalhes", new { id = item.RegiaoID }) |
                @Html.ActionLink("Deletar","", "", new { @class = "excluir", datacodigo = item.RegiaoID, href="#" })
            </td>
        </tr>
    }

</table>

@section Scripts {
    @Scripts.Render("~/bundles/jqueryui")
}

<div id="dialogo" style="display:none">
    <p>Confirmar exclusão de registro?</p>
</div>

Script jQuery

$(document).ready(function () {
	$(".excluir").click(function () {
		var codigo = $(this).attr("datacodigo");
		$("#dialogo").dialog({
			title: "Aviso!",
			height: 200,
			width: 300,
			modal: true,
			resizable: false,
			buttons: {
				"Excluir": function () {
					$("#dialogo").load("/Regiao/Deletar/" + codigo);
				},
				"Cancelar": function () {
					$(this).dialog("close");
				}
			},
			show: { effect: "blind", duration: 400 }
		});
	})
})

Bundles

inserir a descrição da imagem aqui

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>

    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")

</head>
<body>

    <h2>Menu Sistema</h2>
    <ul>
        <li>@Html.ActionLink("Regiões", "Index", "Regiao")</li>
        <li>@Html.ActionLink("Territórios", "Index", "Territorio")</li>
    </ul>

    @RenderBody()

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/jqueryui")    
    @RenderSection("scripts", required: false)
</body>
</html>

2 Respostas 2

2

Se seu objetivo é evitar de fazer uma view para confirmar a exclusão, por quê você está carregando o conteúdo da view dentro do diálogo, nesta linha abaixo?

$("#dialogo").load("/Regiao/Deletar/" + codigo);

A função '.load' do jQuery carrega o conteúdo do retorno de uma requisição para dentro do elemento em questão, no caso o '#dialogo'.

Acredito que a action 'Deletar' retorna a view 'Deletar.cshtml', por isso não esteja funcionando.

Por padrão o MVC cria uma action POST 'Deletar' que, esta sim, deleta de fato o registro.


Se quer apenas excluir o registro ao clicar no botão 'Excluir' do diálogo, basta criar uma instrução ajax tradicional do jQuery que requisite a action POST 'Deletar':

$.ajax({
    url: "/Regiao/Deletar/" + codigo,
    method: "POST",
    success: function (retorno) {
        alert("Registro excluído com sucesso!");
    }
});

Seu código final seria:

$(document).ready(function () {
    $(".excluir").click(function () {
        var codigo = $(this).attr("datacodigo");
        $("#dialogo").dialog({
            title: "Aviso!",
            height: 200,
            width: 300,
            modal: true,
            resizable: false,
            buttons: {
                "Excluir": function () {
                    $.ajax({
                        url: "/Regiao/Deletar/" + codigo,
                        method: "POST",
                        success: function (retorno) {
                            alert("Registro excluído com sucesso!");
                        }
                    });
                },
                "Cancelar": function () {
                    $(this).dialog("close");
                }
            },
            show: { effect: "blind", duration: 400 }
        });
    });
});
3
  • Olá Renan, eu quero que ao invés de carregar uma View carregue uma janela Modal que fica bem melhor. Nessa linha que você citou eu estava passando um parâmentro para o método construtor. Commented 14/01/2016 às 16:33
  • Entendi. Se já conseguiu, posta o código aqui e marca a resposta como resolução, pra ajudar as pessoas que passarem por aqui ;) Commented 15/01/2016 às 17:52
  • 1
    Renan, postei a solução, só não fiz os comentários explicando com detalhes. Eu marquei a sua resposta como útil porque também foi boa. Desculpe pela demora na resposta. Obrigada pela ajuda! Commented 22/01/2016 às 20:09
1

Esse problema foi resolvido com a ajuda de um amigo do forum VBMANIA.COM, cujo nick é KERPLUNK. Não fiz os devidos comentários, mas analisando bem dá para entender como funciona. Espero que esta solução possa ajudar outras pessoas aqui do forum também.

Script

$(document).ready(function () {

    $(".excluir").click(function () {

        var codigo = $(this).attr("datacodigo");

        $("#modal").load("/Regiao/Deletar/" + codigo)
                   .attr("title", "Confirmação de Exclusão")
                   .dialog({
                       modal: true,
                       resizable: false
                   });
    });

    $("#btnDelete").click(function () {

        $.post("/Regiao/Deletar/", $("#formDelete").serialize())
         .done(function () {
             window.location.href = "/Regiao/Index";
         });

        $("#modal").dialog("close");
    });

    $("#btnClose").click(function () {
        $("#modal").dialog("close");
    });
})

View para carregar a janela de diálogo

@model MvcModeloEmpresa.Dominio.Regiao

<form id="formDelete">
    @Html.AntiForgeryToken()

    <p>Excluir a região <strong>@Html.DisplayFor(model => model.RegiaoDescricao)</strong>?</p>

    @Html.HiddenFor(model => model.RegiaoID)
</form>

<hr />

<div>
    <button class="ui-state-default ui-corner-all" id="btnDelete">Excluir</button>
    <button class="ui-state-default ui-corner-all" id="btnClose">Cancelar</button>
</div>

@Scripts.Render("~/bundles/jqueryui") @*Para carregar novamente os scripts após o carregamento do documento html*@

View Index.cshtml para listar as regiões

@model IEnumerable<MvcModeloEmpresa.Dominio.Regiao>
@{
    ViewBag.Title = "Lista de Regiões";
}

<h2>Regiões</h2>

<p>
    @Html.ActionLink("Cadastrar Nova", "Adicionar")
</p>
<table>
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.RegiaoID)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.RegiaoDescricao)
        </th>
        <th></th>
    </tr>

    @foreach (var item in Model)
    {
        <tr>
            <td>
                @Html.DisplayFor(modeTeste => item.RegiaoID)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.RegiaoDescricao)
            </td>
            <td>
                @Html.ActionLink("Editar", "Editar", new { id = item.RegiaoID }) |
                @Html.ActionLink("Detalhes", "Detalhes", new { id = item.RegiaoID }) |
                @Html.ActionLink("Deletar", String.Empty, null, new { @class = "excluir", datacodigo = item.RegiaoID, href = "#" })                
            </td>
        </tr>
    }

</table>

<div id="modal">

</div>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .