How do I change value of a model using JQuery?

Question

I'm using Asp.Net MVC and I have a model where has an attribute status and in theform has 2 input type =" submit " to submit the form, they are:save and post and save. I want to when I click on button save and post changestatus attribute to value 1, and when user click on button save changestatus to value 0.

To do this I'm trying use JQuery getting the id of input and change the status attribute, but still can't do it.

How could I do this ?

html

<input type="submit" class="btn btn-success" value="Save Post" id="savePost"/>
<input type="submit" class="btn btn-success" value="Save" id="save" />

jquery

$(document).ready(function () {
    $('#addPropriedade').submit(function () {        
        var dados = new FormData($('#addPropriedade').get(0));

        $('#savePost').click(function () {
            dados.status = 1;
            console.log(dados.status);
        });
        $('#save').click(function () {
            dados.status = 0;
            console.log(dados.status);
        });


        $("#errorMessage").hide();

        var loading = $("#div_loading");
        $(document).ajaxStart(function () {
            loading.show();
        });
        $(document).ajaxStop(function () {
            loading.hide();
        });

        $.ajax({
            accepts: { json: 'application/json' },
            dataType: 'json',
            type: "POST",
            url: "/Propriedade/addAjax",
            data: dados,
            processData: false,
            contentType: false,
            success: function (data) {
                var status = data["status"];
                var msg = data["msg"];
                if (status === "1") {
                    $('#addPropriedade').trigger("reset");
                    $("#errorMessage").html(msg);
                    $("#errorMessage").prop("class", "alert-success");
                    //window.location.replace("/Empresa/view");                    
                } else {
                    $("#errorMessage").html(msg);
                    $("#errorMessage").prop("class", "alert-danger");
                }
                $("#errorMessage").show()
            },
            error: function (xhr, status) {
                $("#errorMessage").html("Erro tentando cadastrar");
                $("#errorMessage").prop("class", "alert-danger");
                $("#errorMessage").show()
            }
        });

        return false;
    });
});

Answer 1

Hi The simple solution i think is , if you are using the jquery in the same cshtml file where the model is strongly typed.

Then you can directly access the model object using the @ character.

Example:

var status = '@model.status'

And then you can assign whatever value you want.

Detailed example with all other types has explained very well in the below link:

https://stackoverflow.com/a/41312348/3397630

Hope it was helpful, kindly let me know your thoughts or feedbacks

Thanks

Karthik

Answer 2

   $(document).ready(function () {
$('#addPropriedade').submit(function () {        


    $('#savePost').click(function () {
    var dados = new FormData($('#addPropriedade').get(0));
        dados.status = 1;
        console.log(dados.status);
    });
    $('#save').click(function () {
    var dados = new FormData($('#addPropriedade').get(0));
        dados.status = 0;
        console.log(dados.status);
    });


    $("#errorMessage").hide();

    var loading = $("#div_loading");
    $(document).ajaxStart(function () {
        loading.show();
    });
    $(document).ajaxStop(function () {
        loading.hide();
    });

    $.ajax({
        accepts: { json: 'application/json' },
        dataType: 'json',
        type: "POST",
        url: "/Propriedade/addAjax",
        data: dados,
        processData: false,
        contentType: false,
        success: function (data) {
            var status = data["status"];
            var msg = data["msg"];
            if (status === "1") {
                $('#addPropriedade').trigger("reset");
                $("#errorMessage").html(msg);
                $("#errorMessage").prop("class", "alert-success");
                //window.location.replace("/Empresa/view");                    
            } else {
                $("#errorMessage").html(msg);
                $("#errorMessage").prop("class", "alert-danger");
            }
            $("#errorMessage").show()
        },
        error: function (xhr, status) {
            $("#errorMessage").html("Erro tentando cadastrar");
            $("#errorMessage").prop("class", "alert-danger");
            $("#errorMessage").show()
        }
    });

    return false;
});

});