AJUDA COM EXCLUSÃO DE REGISTRO COM JQUERY NO MVC

KELLY 14/10/2015 18:11:29
#452543
Olá a todos,

Estou precisando de uma grande ajuda, quero excluir registros do meu banco de dados na minha aplicação MVC usando uma janela modal, mas estou tendo dificuldades. Comecei a seguir alguns modelos, mas travei no meio do caminha e fiquei perdida sem saber onde continuar. A minha aplicação está fazendo todas as operações exceto de exclusão, a minha janela usando o widget Dialog está abrindo, só falta executar o método de controlador Deletar que está pronto. Quero usar uma janela de diálogo ou modal em vez de criar uma View exclusivamente para executar uma exclusão. Segue o código abaixo:

Script jQuery

$(document).ready(function () {
    $([Ô].excluir[Ô]).click(function () {
        var codigo = $(this).attr([Ô]datacodigo[Ô]);
        $([Ô]#modal[Ô]).load([Ô]/Regiao/Deletar/[Ô] + codigo)
                   .attr([Ô]title[Ô], [Ô]Excluir Região[Ô]).dialog();
    });

    $([Ô]#btnDelete[Ô]).click(function () {

        alert([Ô]Funcionando![Ô]);

        $.post([Ô]/Regiao/Deletar[Ô], $([Ô]#formDelete[Ô]).serialize())
         .done(function () {
             //Função para excluir
         });

        $([Ô]#modal[Ô]).dialog([Ô]close[Ô]);
    });

    $([Ô]#btnClose[Ô]).click(function () {
        $([Ô]#modal[Ô]).dialog([Ô]close[Ô]);
    });
})


View que chama o script

@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[Ô], [Ô][Ô], [Ô][Ô], new { @class = [Ô]excluir[Ô], datacodigo = item.RegiaoID, href = [Ô]#[Ô] })
            </td>
        </tr>
    }

</table>

<div id=[Ô]modal[Ô]>

</div>


View Deletar

  @model MvcModeloEmpresa.Dominio.Regiao

<form id=[Ô]formDelete[Ô]>
    <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[Ô])


Controller

    [HttpPost]
        [ValidateAntiForgeryToken]
        public ActionResult Editar([Bind(Include = [Ô]RegiaoID,RegiaoDescricao[Ô])] Regiao regiao)
        {
            if (ModelState.IsValid)
            {
                apRegiao.Editar(regiao);

                return RedirectToAction([Ô]Index[Ô]);
            }

            return View(regiao);
        }

        public ActionResult Deletar(long id)
        {
            Regiao regiao = apRegiao.LocalizarPorItem(id);

            return PartialView(regiao);
        }

        [HttpPost, ActionName([Ô]Deletar[Ô])]
        [ValidateAntiForgeryToken]
        public ActionResult DeletarRegiao(long id)
        {
            Regiao regiao = apRegiao.LocalizarPorItem(id);

            if (regiao == null)
            {
                return HttpNotFound();
            }

            apRegiao.Deletar(regiao.RegiaoID);

            return RedirectToAction([Ô]Index[Ô]);
        }
KERPLUNK 14/10/2015 18:44:06
#452545 Resposta escolhida
1 - Evite usar tabelas para alinhar controles, dê preferência à div[ô]s.
2 - Eu particularmente, detesto o MVC da maneira que a microsoft criou, prefiro muito mais usar HTML puro aliado à WebAPI. Tenho mais controle sobre tudo o que acontece.
3 - Qual dos dois métodos você quer chamar, Deletar ou DeletarRegiao?
4 - Pela sintaxe, não consigo ver se está usando Razor ou não
KELLY 14/10/2015 19:10:25
#452548
Olá Kerplunk, sou eu novamente enrolada neste projeto.

3- Eu quero chamar o método DeletarRegiao que está nomeado para Deletar porque não posso ter dois métodos com a mesma assinatura, por isso tem esse truque de criar um aliás com o ActionName.
4- Eu estou usando Razor @Html.ActionLink([Ô]Deletar[Ô], [Ô][Ô], [Ô][Ô], new { @class = [Ô]excluir[Ô], datacodigo = item.RegiaoID, href = [Ô]#[Ô] }) para chamar o método de controlador, mas acho que não deveria está fazendo isso e sim chamando o métod em jQuery.

Na url quando chamo um método de controlador, ela fica assim como nesse exemplo de Categoria: http://localhost:56800/Categoria/Deletar/8

Eu vou ficar por aqui aguardando suas mensagens se precisar de mais exclarecimento sobre o código.
KERPLUNK 14/10/2015 19:49:02
#452549
Ok, se você quer chamar o método do JQuery, faça um link normal não um actionlink:

<A href=[Ô]#[Ô] id=[Ô]btnDelete[Ô]>Deletar</a>


Só pra constar, mas acho que você já sabe. O identificador do JQuery é importante para definir o que está sendo chamado. Quando precedido por [Ô].[Ô], está se referindo à qualquer objeto que contenha a classe, descrita logo após o ponto:

$([Ô].classe[Ô]).click(.....)

Acima, se refere à qualquer objeto que contenha a classe [Ô]classe[Ô]. Quando precedido por [Ô]#[Ô], você está se referindo ao ID do objeto

$([Ô]#objeto[Ô]).click(...)

Acima, se refere ao objeto de id [Ô]objeto[Ô], que pode ser qualquer elemento HTML.

Se quiser, faço um plunkr ou fiddle mostrando isso em ação.
KELLY 14/10/2015 20:19:06
#452550
Kerplunk, fiz a alteração como você sugeriu, mas como faço para completar o script para excluir que postei?

$(document).ready(function () {
$([Ô].excluir[Ô]).click(function () {
var codigo = $(this).attr([Ô]datacodigo[Ô]);
$([Ô]#modal[Ô]).load([Ô]/Regiao/Deletar/[Ô] + codigo)
.attr([Ô]title[Ô], [Ô]Excluir Região[Ô]).dialog();
});

$([Ô]#btnDelete[Ô]).click(function () {

$.post([Ô]/Regiao/Deletar[Ô], $([Ô]#formDelete[Ô]).serialize())
.done(function () {
//Função para excluir
});

$([Ô]#modal[Ô]).dialog([Ô]close[Ô]);
});

$([Ô]#btnClose[Ô]).click(function () {
$([Ô]#modal[Ô]).dialog([Ô]close[Ô]);
});
})
KERPLUNK 14/10/2015 20:24:07
#452551
O método correspondente no codebehind está sendo acionado?
Porque está serializando o form? Você só precisa mandar o id do ítem desejado, não?
KELLY 14/10/2015 20:31:43
#452552
Eu serializei para poder pegar o ID da região e passar na URL http://localhost:56800/Regiao/Deletar/8 que neste caso foi o número 8.
KERPLUNK 14/10/2015 20:40:22
#452553
Ok, mas o javascript está sendo chamado? O método no codebehind está sendo chamado?
KERPLUNK 14/10/2015 21:03:24
#452555
O evento [Ô]done[Ô] ocorre quando o método do codebehind é executado, caso o método não retorne erro.
KERPLUNK 14/10/2015 21:16:47
#452558
O método no codebehind não está sendo chamado? Veja bem, o método que será executado é o [Ô]Deletar[Ô]... verifique se ele está sendo executado.
KELLY 14/10/2015 21:33:36
#452559
Usando uma View ele está funcionando, o problema é que ele carregava uma página inteira só para perguntar se o usuário quer confirmar a exclusão, por isso que eu estou tentando adaptar para esse script, mostrando uma janela de diálogo é muito mais prático. Eu preciso passar a URL com o parâmetro para esse método que está com a Data Annotation [HttpPost] receber e excluir. Antes estava funcionando, não sei o que exclui que parou de funcionar.
Página 1 de 2 [16 registro(s)]
Tópico encerrado , respostas não são mais permitidas
Voltar