How to pass the Model to the controller via Jquery

Question

It is possible to pass the filled Model to the controller via jquery, without having to create a variable and populate it with all fields?

Example:

I have a modal popup that opens a partialview with several fields. in this view I have the model:

@model Contato

fields fill the model:

@Html.EditorFor(model => model.Nome)
@Html.EditorFor(model => model.Email)
@Html.EditorFor(model => model.Telefone)
@Html.EditorFor(model => model.Endereco)
@Html.EditorFor(model => model.Documento)

Click on the button to close the model

<div class="modal-footer">
        <button type="button" class="btn btn-default"
                data-dismiss="modal" id="btnSaveContato">
            Close
        </button>
    </div>

Then I want to move the whole model to the controller when I close the popup

<script>
    $('#btnSaveContato').on('click', function () {
        var model = @model???
    });
</script>

without having to do it

var model = {
 Nome = campo.val(),
 Email = campo.val(),
 Telefone = campo.val(),
 Endereco = campo.val(),
 Documento = campo.val(),
}

It is possible?

Answer 1

Hello, William I don’t know if this can help you, but I do it this way:

PS: I’m not sure if it’s the right way, but it suits me well.

I created a javascript function:

function ChamarAjax(Pagina, Data = null, DivRecebedor = null) {
    // verifico se foi passado algum valor para o json
    if (typeof (Data) == "undefined" && Data == null) {

        // se for vazio gero um valor aleatorio qualquer
        Data = { nome: "nome" }

    }
    // função pace tracker que mostra um loading no topo da pagina
    Pace.track(function () {

        // chamo o ajax
        $.ajax({
            type: 'POST',
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            url: Pagina,
            /// transformo os valores do form no formato json e envio via post

            data: JSON.stringify(Data),

            // caso tenha algum sucesso ele pega o retorno do controller
            success: function (data) {

                // verifico se esse campo vai atualizar algum div ou pagina completa.
                if (typeof (DivRecebedor) !== "undefined" && DivRecebedor !== null) {
                    $("#" + DivRecebedor).html(data);
                } else {

                    // redireciono para o controller de resposta do controller json
                    window.location.replace(data);
                }

            },

           // se retornar algum erro mostra na tela 
            error: function (a, jqXHR, exception) {
                jAlert(Data, "ERRO");
            }
        });
    });
}

This script will execute a json post for my controller. Calling this function by the jquery click:

 $(document).on('click', '#botaoLogarEstoque', function () {
    var campo1 = $("#campo01").val();
    var campo2 = $("#campo02").val();
    var campo3 = $("#campo03").val();
    var campo4 = $("#campo04").val();
    var campo5 = $("#campo05").val();

         // pego os valores para virar um json dentro da função chamarajax
        data = {
              "campo01" = campo01,
              "campo02" = campo02,
              "campo03" = campo03,
              "campo04" = campo04,
              "campo05" = campo05
        }
        console.log(data);

       // aqui eu chamo meu controller
       ChamarAjax("/Login/AcessoSistema", data, null);

    });

In the controller I do that way:

  [HttpPost]
        public ActionResult AcessoSistema(int campo01,
                                          int campo02,
                                          int campo03,
                                          int campo04,
                                          int campo05)
        {
            System.Threading.Thread.Sleep(2000);

            // trato os dados recebidos via ajax-json
            // campo01....campo05.

            // aqui e o retorno do json para o controller que vai mostrar a view.
            return Json("/Home/Index");
        }