MVC AJAX发布发送更新的模型数据

Question

I'm trying to send a post request to the Action with the Model data after the value of some of it's properties is changed :

@{
  JsonSerializerSettings jss = new JsonSerializerSettings { 
  ReferenceLoopHandling = ReferenceLoopHandling.Ignore };
}

<div id="contents">

    <!--Lead Stage-->
    @if (Model.LeadStagesNav != null)
    {
        for (int i = 0; i < Model.LeadStagesNav.Count; i++)
        {

            @Html.HiddenFor(a => a.LeadStagesNav[i].PermissionId)

            <div class="form-group" style="margin-bottom:10px">
                @Html.Label("Lead Stage", new { @class = "col-md-2" })
                <div style="display:inline-block;position:relative">
                    @Html.DropDownListFor(model => model.LeadStagesNav[i].Name, null, new { @class = "form-control", @style = "width:200px", onchange = "ChangeValue()" })
                </div>

                @if (ViewData["LeadStagesNav[" + i + "].LeadStatus"] != null)
                {
                        <!--Lead Status-->
                    @Html.Label("Lead Status", new { @style = "margin-left:15px;margin-right:15px" })
                    <div style="display:inline-block;position:relative">
                        @Html.DropDownListFor(model => model.LeadStagesNav[i].LeadStatus, null, new { @class = "form-control", @style = "width:200px", onchange = "ChangeValue()" })
                    </div>

                    if (ViewData["LeadStagesNav[" + i + "].LeadSubStatus"] != null)
                    {
                        @Html.Label("Lead Sub Status", new { @style = "margin-left:15px;margin-right:15px" })
                        <div style="display:inline-block;position:relative">
                            <!--Lead Sub Status-->
                            @Html.DropDownListFor(model => model.LeadStagesNav[i].LeadSubStatus, null, new { @class = "form-control", @style = "width:200px" })
                        </div>
                    }
                }

            </div>

                <!--Delete Button-->
            <div class="form-group">
                <div class="col-md-offset-2 col-md-10">
                    <input type="submit" value="Delete Lead Stage"
                           onclick="document.getElementById('index').value = @i"
                           name="submit" class="btn btn-default" />
                    <input type="hidden" id="index" name="index" />
                </div>
            </div>
            }
        }

</div> 

<script type="text/javascript">

window.ChangeValue = function () {

    var model = @Html.Raw(JsonConvert.SerializeObject(Model, Formatting.Indented, jss));

    $.ajax({
        method: "POST",
        url: "/CmsPermissions/Edit",
        data: { permission: model },
        success: function (data) {
            $("#contents").html(data);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
};

the thing is the The problem is that I get the old model data posted to the Action instead of the new data after the dropdown selected value has changed, Anyone has any idea ?

Answer 1

that is because you are passing the old model as data

 var model = @Html.Raw(JsonConvert.SerializeObject(Model, Formatting.Indented, jss));

you need to serialize your form and pass it an example is

function SubmitForm() {
    var data = $("#YourFormID").serialize();
    var url = "/YourURL/ACtion"
    var form = $('#policyForm')[0]
    var formdata = false;
    if (window.FormData) {
        formdata = new FormData(form);
    }
  return  $.ajax({
        url: url,
        type: 'POST',
        dataType: 'json',
        data: formdata ? formdata : data,
        cache: false,
        contentType: false,
        enctype: 'multipart/form-data',
        processData: false, 
        error: function () {
            $('#imgLoadingForPortal').modal('hide');
            Lobibox.notify('error', {
                size: 'mini',
                rounded: true,
                delay: false,
                position: 'center top', //or 'center bottom'
                msg: 'Something went wrong..please try again later',
                sound: false,
                delay: 5000,
            });
        }

    })

}