Post,Put e Delete usando asp.net mvc

Question

Boa noite!

Estou aprendendo a usar asp.net mvc com jquery ajax para post,put e delete.

Fiz um formulario usando jquery ajax para o post que funciona bem!Agora estou tentando fazer o put mas o retorno é sempre do segundo callback da função javascript, que retorna a mensagem de erro não atualizando os dados.

Gostaria de saber o que eu estou fazendo de errado, qual a melhor maneira para fazer essas operações?

Segue o código fonte:

Formulario para a atualização dos dados:

@{
    ViewBag.Title = "Atualizar";
}

<h2>Atualizar</h2>
<script src="../../Scripts/jquery-1.7.1.js"></script>
<script src="../../Scripts/jquery.maskedinput.js"></script>

<form id="form2" action="@Url.Action("Atualizar","Pessoa")" method="put">

    <fieldset>
        <legend>Atualizar</legend>
        <input type="hidden" name="p.Id" value="@ViewBag.Pessoa.Id" />
        Nome:
        <input type="text" id="nome" value="@ViewBag.Pessoa.Nome"name="p.Nome"  />
        Idade:
        <input type="text" id="idade" value="@ViewBag.Pessoa.Idade" name="p.Idade"/>
        telefone:
        <input type="text" id="telefone"  value="@ViewBag.Pessoa.Telefone" name="p.Telefone"/>

        <input type="submit" value="Salvar" />

   </fieldset>

    <a href="@Url.Action("Index","Pessoa")">Lista</a>

</form>

<script type="text/javascript">

    $("#telefone").mask("(99)9999-9999");

    $("#form2").submit(function() {

        $.ajax({
            url: '@Url.Action("Atualizar","Pessoa")',
            type:"PUT", 
            data:$(this).serialize(),
            contentType:"application/json; charset=utf-8",
            success: function (data) {
                alert(data.Message);
            },
            error: function (jqXHR,status) {
                alert('error');
            }
        });

    });


</script>

Metodos do controller para a atualização:

  public ActionResult Atualizar(int id)
        {
            Pessoa p = repository.BuscId(id);
            ViewBag.Pessoa = p;
            return View();
        }

        [HttpPut]
        public ActionResult Atualizar(Pessoa p)
        {
            repository.Atualiza(p);
            repository.Salvar();
            //return RedirectToAction("Index");
            return Json(new { Message = p.Nome + " " + "atualizado com sucesso!"});

        }

Grato.

Answer 1

Olá,

Primeiro vc faz ajax para atualizar os dados, depois vc faz envio do formulario tentando atualizar de novo. Meio 'estranho'. Você está também enviando os dados no formato 'x-www-form-urlencoded' do html(chave e valor) e não em json.

Olha como ficou

<form id="form2">

    <input type="text" name="id" />
    Nome:
    <input type="text" id="nome" name="nome" />
    Idade:
    <input type="text" id="idade" name="idade" />
    telefone:
    <input type="text" id="telefone" name="telefone" />

    <input id="btn" type="button" value="Salvar" />

</form>


<script type="text/javascript">

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

        $.ajax({
            url: '@Url.Action("salvar", "Home")',
            type: "put",
            data: $("#form2").serialize(),
            contentType: "application/x-www-form-urlencoded",
            success: function (data) {
                alert(data);
            },
            error: function (jqXHR, status) {
                alert('error');
            }
        });
    });


</script>

       [HttpPut]
        public ActionResult salvar( string id, string nome, string idade, string telefone)
        {
            return Content("value");
        }

Answer 2

  	
Bom dia Uallace. Blz.
 	public ActionResult Atualizar(int id)
        {
            Pessoa pessoa = repository.BuscId(id);
            //Passa pessoa para a view ao inves de popular um viewbag.
	//Pois evita o risco de perder os dados ao simular um POST.
            return View(pessoa); 
//Basta colocar um Input Hidden com o ID da pessoa em tua view.
// Assim você pode usar a forma correta, basta chamar Model.Pessoa.propriedade
        }

	[HttpPut]
 public JsonResult Atualizar(Pessoa pessoa)
 {
            repository.Atualiza(pessoa);
		//Retire o salvar, pois vc nao salva(Imagino que esteja chamando o db.Tb.Add(pessoa)), vc da um Update no banco.
 return Json(new { Message = pessoa.Nome + " " + "atualizado com sucesso!"});

 }

Anderson Anzileiro.

Answer 3

Olá,

Primeiro vc faz ajax para atualizar os dados, depois vc faz envio do formulario tentando atualizar de novo. Meio 'estranho'. Você está também enviando os dados no formato 'x-www-form-urlencoded' do html(chave e valor) e não em json.

Olha como ficou

<form id="form2">

    <input type="text" name="id" />
    Nome:
    <input type="text" id="nome" name="nome" />
    Idade:
    <input type="text" id="idade" name="idade" />
    telefone:
    <input type="text" id="telefone" name="telefone" />

    <input id="btn" type="button" value="Salvar" />

</form>


<script type="text/javascript">

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

        $.ajax({
            url: '@Url.Action("salvar", "Home")',
            type: "put",
            data: $("#form2").serialize(),
            contentType: "application/x-www-form-urlencoded",
            success: function (data) {
                alert(data);
            },
            error: function (jqXHR, status) {
                alert('error');
            }
        });
    });


</script>

       [HttpPut]
        public ActionResult salvar( string id, string nome, string idade, string telefone)
        {
            return Content("value");
        }

Pra que você usa o .

serialize()

?

Se não me engano ele passa o objeto para sua action, através do AJAX.

Não precisa SUJAR sua action com todos aqueles parâmetros, uma vez que você usa o .serialize();

Answer 4

Olá,

Primeiro vc faz ajax para atualizar os dados, depois vc faz envio do formulario tentando atualizar de novo. Meio 'estranho'. Você está também enviando os dados no formato 'x-www-form-urlencoded' do html(chave e valor) e não em json.

Olha como ficou

<form id="form2">

    <input type="text" name="id" />
    Nome:
    <input type="text" id="nome" name="nome" />
    Idade:
    <input type="text" id="idade" name="idade" />
    telefone:
    <input type="text" id="telefone" name="telefone" />

    <input id="btn" type="button" value="Salvar" />

</form>


<script type="text/javascript">

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

        $.ajax({
            url: '@Url.Action("salvar", "Home")',
            type: "put",
            data: $("#form2").serialize(),
            contentType: "application/x-www-form-urlencoded",
            success: function (data) {
                alert(data);
            },
            error: function (jqXHR, status) {
                alert('error');
            }
        });
    });


</script>

       [HttpPut]
        public ActionResult salvar( string id, string nome, string idade, string telefone)
        {
            return Content("value");
        }

Pra que você usa o .

serialize()

?

Se não me engano ele passa o objeto para sua action, através do AJAX.

Não precisa SUJAR sua action com todos aqueles parâmetros, uma vez que você usa o .serialize();

Agora... Se preferir posso fazer uma pequeno DEMO e colocar no code.msdn.com.br, ai você dois podem baixar e usar como estudo...

O que acham ?

Answer 5

Agora... Se preferir posso fazer uma pequeno DEMO e colocar no code.msdn.com.br, ai você dois podem baixar e usar como estudo...

O que acham ?

Anderson Anzileiro.

Answer 6

Obrigado pela dica Anderson!Fiz exatamente o que você aconselhou,mas o erro continua.

Answer 7

Obrigado pela dica, mas o erro continua sempre que tento atualizar!

Grato.

Answer 8

Cara é alguma coisa no banco... alguma coluna não pode ser alterada. 

Anderson Anzileiro.

Answer 9

Boa tarde Anderson!

Se puder colocar esse demo como exemplo seria bom.

Eu fiz o update e o delete da mesma maneira que fiz o adicionar,mudando  somente a url do metodo ajax.

Funciona bem, mas nao sei se esse metodo e correto.

Grato.

 

Answer 10

Uallace!

IMHO... vc pode usar Ajax.BeginForm. da um olhada neste link

http://stackoverflow.com/questions/5410055/using-ajax-beginform-with-asp-net-mvc-3-razor 

Tambem neste....

http://msdn.microsoft.com/en-us/library/system.web.mvc.ajax.ajaxextensions.beginform(v=vs.118).aspx    

Boa sorte

Answer 11

Boa Tarde Richof!

Boa opcao tambem, pelo que vi usa-se junto com o razor.

No caso eu estou usando html na view e ajax jquery para o post.

Estou com essa duvida porque ja me pediram para fazer um CRUD, usando ajax jquery para os posts!

Grato.

Answer 12

Boa Tarde Richof!

Boa opcao tambem, pelo que vi usa-se junto com o razor.

No caso eu estou usando html na view e ajax jquery para o post.

Estou com essa duvida porque ja me pediram para fazer um CRUD, usando ajax jquery para os posts!

Grato.

Fiz um exemplo com Web Api se tiver afim de ver fique a vontade (baixar também) http://code.msdn.microsoft.com/Utilizando-Web-Api-CVbNet-f99332e3

---

Fulvio Cezar Canducci Dias

Answer 13

A galera em geral que quiser ver e baixar o exemplo fique vontade

Web Api com Jquery: http://code.msdn.microsoft.com/Utilizando-Web-Api-CVbNet-f99332e3

---

Fulvio Cezar Canducci Dias

Answer 14

Uallace !!!

Vc ja esta usando razor na view, os helpers tipo "@Url.Action"  vao gerar o HTML que vc precisa, o helper @Ajax.beginform, vai gerar um HTML  <form ..... 

Entao os "helpers" sao para ajudar, para gerar codigo HTML

:-)

Answer 15

Excelente!

Se eu precisar fazer o post com jquery, essa seria a melhor opção ou existe outro padrão?

Grato.