How to clear form data after saving to database? via Ajax . net mvc

Question

after saving an object in the database, the view continues to show the fields filled!

<fieldset>
<legend>Endereco:</legend>

    @Html.ValidationSummary()
    @Html.HiddenFor(e => e.CodigoPessoa, new { id = "Pessoa", name = "Pessoa" })
    @Html.Label("Cep: ")
    @Html.TextBoxFor(e => e.CEP, new { maxlength = "9", id = "Cep", name = "Cep", onchange = "findCEP()" })
    <br />
    @Html.Label("Endereco: ")
    @Html.TextBoxFor(e => e.DescricaoEndereco, new { maxlength = "50", id = "Endereco", name = "Endereco" })       
    <br />
    @Html.Label("Número: ")
    @Html.TextBoxFor(e => e.Numero, new { maxlength = "50", id = "Numero", name = "Numero" })       
    <br />
    @Html.Label("Complemento: ")
    @Html.TextBoxFor(e => e.Complemento, new { maxlength = "50", id = "Complemento", name = "Complemento" })      
    <br />
    @Html.Label("Bairro: ")
    @Html.TextBoxFor(e => e.Bairro, new { maxlength = "50", id = "Bairro", name = "Bairro" })     

    <br />
    @Html.Label("Cidade: ")
    @Html.TextBoxFor(e => e.Cidade, new { maxlength = "40", id = "Cidade", name = "Cidade" })   
    <br />
    @Html.Label("UF: ")
    @Html.DropDownListFor(e => e.UF, Model.UFList, new { id = "UF", name = "UF" })      
    <br />

function adicionarEndereco() {//Função Ajax  que obtem os valores dos campos e joga na action via post

    var codigoPessoa = document.getElementById("CodigoPessoa").value;
    var cep = document.getElementById("Cep").value;
    var endereco = document.getElementById("Endereco").value;
    var numero = document.getElementById("Numero").value;;
    var complemento = document.getElementById("Complemento").value;
    var bairro = document.getElementById("Bairro").value;
    var cidade = document.getElementById("Cidade").value;
    var temp = document.getElementById("UF");
    var uf = temp.options[temp.selectedIndex].value;

    $.ajax(
        {
            type: "POST",
            url: "/Master/CadastrarEndereco",
            data: {
                CodigoPessoa: codigoPessoa,
                Cep: cep,
                DescricaoEndereco: endereco,
                Numero: numero,
                Complemento: complemento,
                Bairro: bairro,
                Cidade: cidade,
                UF: uf,


            },
            success: function (data) {

                $("#endereco").html(data);
                //limpaForm();
            },


        });
}

   [HttpPost]
    public PartialViewResult CadastrarEndereco(SuperViewModel enderecoVM)  //action que salva o objeto obtido na view e enviado via ajax
    {
        if (string.IsNullOrEmpty(enderecoVM.Bairro))
            ModelState.AddModelError("Bairro", "Bairro é obrigatório");
        if (ModelState.IsValid)
        {
            var endereco = Extentions.MapearEndereco(enderecoVM);
            EnderecoRepositorio.Cadastrar(endereco);
            EnderecoRepositorio.Commit();
        }
        var dados = new SuperViewModel();//crio outro objeto para a view soh com as minhas dropdownlist e os dados da minha grid
        dados.UFList = Extentions.ObterUF();
        dados.Enderecos = EnderecoRepositorio.ObterEnderecoPorPessoa(enderecoVM.CodigoPessoa);
        return PartialView("_EnderecoFields", dados);
    }

Answer 1

You can use the following line to reset the form automatically after return from Ajax:

$('#id_do_form').each (function(){
    this.reset();
});

Your code would look like this:

$.ajax({
    type: "POST",
    url: "/Master/CadastrarEndereco",
    data: {
        CodigoPessoa: codigoPessoa,
        Cep: cep,
        DescricaoEndereco: endereco,
        Numero: numero,
        Complemento: complemento,
        Bairro: bairro,
        Cidade: cidade,
        //UF: uf, Nessa linha não é necessário a utilização da ","
        UF: uf
    },
    success: function (data) {
        $("#endereco").html(data);
        $('#id_do_form').each (function(){
            this.reset();
        });
    },
});

Example:

function iniciar(){
  document.getElementById("CodigoPessoa").value = "teste";
  document.getElementById("Cep").value = "teste";
  document.getElementById("Endereco").value = "teste";
  document.getElementById("Numero").value = "teste";
  document.getElementById("Complemento").value = "teste";
  document.getElementById("Bairro").value = "teste";
  document.getElementById("Cidade").value = "teste";
  document.getElementById("UF").value = "teste";
}

function limpar(){
  $('#teste').each (function(){
    this.reset();
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form id="teste" name="teste">
  <input type="text" id="CodigoPessoa"><br/>
  <input type="text" id="Cep"><br/>
  <input type="text" id="Endereco"><br/>
  <input type="text" id="Numero"><br/>
  <input type="text" id="Complemento"><br/>
  <input type="text" id="Bairro"><br/>
  <input type="text" id="Cidade"><br/>
  <select id="UF">
    <option value=""></option>
    <option value="teste">teste</option>
  </select><br/><br/>
  
  <input type="button" onclick="iniciar()" value="Preencher">
  <input type="button" onclick="limpar()" value="Limpar">
</form>

---

** EDIT **

---

I usually do this in PHP, particularly never messed with ASP so I can’t help much in this case.... but I’ll show you how I usually do in the PHP, who knows best how to proceed in the ASP

PHP

//Realizo as validações necessárias no lado do servidor antes de incluir ou excluir ou alterar....

function Incluir(){
    $con = new cmd_SQL(); //Abro conexão com o bd utilizando minhas conexões PHP

    setlocale(LC_CTYPE,"pt_BR"); //Seto a localização

    $db['tab']="tabela";
    $db['campos']="campos";
    $db['values']= $valores;

    if ($con->incluir($db)){ //Função criada em PDO para incluir
        echo "1"; //Se não houver nenhum erro na inclusão dos dados retorno 1
    }else{
        echo "0"; //Se houver erro na inclusão dos dados retorno 0
    }
}

function Excluir(){
    $con = new cmd_SQL();
    setlocale(LC_CTYPE,"pt_BR");

    $db['tab']="tabela";
    $db['cond']="campos=".$valores;

    if ($con->excluir($db)){ //Função criada em PDO para excluir
        echo "1"; //Se não houver nenhum erro na exclusão dos dados retorno 1
    }else{
        echo "0"; //Se houver erro na exclusão dos dados retorno 0
    }
}

On the client side I get the return on Ajax, and work with him as follows:

$.ajax({
    type: "POST",
    url: "/Master/CadastrarEndereco",
    data: {
        //dados
    },
    success: function (data) {
        $("#endereco").html(data);
        //data se refere ao meu retorno*, se foi incluído ou não com sucesso
        if (data == 1){
            //Foi incluido com sucesso, ou seja, devo usar a função Reset...
            $('#id_do_form').each (function(){
                this.reset();
            });
        }else{
            //Não foi incluido com sucesso, ou seja, não faço nada...
        }
    },
});

[OBS] * The Return can be used from n ways, I usually use only as 0 for failure or 1 for success in recording...