ViewModel object is null when using .ajax to post from View to Controller

Question

Getting Null Value of ViewModel obj in Post Action Parameter when using $.Ajax Post

View

        @using (Ajax.BeginForm("", "", Model, new AjaxOptions() { HttpMethod = "POST" }, new { enctype = "multipart/form-data", id="AreaForm" }))
        {      

            @Html.AntiForgeryToken()
            @Html.ValidationSummary(true)

            <fieldset>
                <legend>Areabalmodel</legend>

                <div class="editor-label">
                    @Html.LabelFor(model => model.project.project_ID)
                </div>
                <div class="editor-label">
                    @Html.DisplayFor(model => model.project.project_ID)
                    @Html.HiddenFor(model => model.project.project_ID)
                </div>
                <div class="editor-label">
                    @Html.LabelFor(model => model.areabal.AreaDesc)
                </div>
                <div class="editor-field">
                    @Html.EditorFor(model => model.areabal.AreaDesc)
                    @Html.ValidationMessageFor(model => model.areabal.AreaDesc)
                </div>

                <div class="editor-label">
                    @Html.LabelFor(model => model.areabal.Location)
                </div>



                <div class="editor-field">

                    @Html.TextBoxFor(model => model.files, new { Name = "files", type = "file", id = "files", onchange = "PreviewImage();" })

                </div>

                <p>
                    @*<input type="submit" value="Updated" />*@
                    <input type="button" id="UpdateArea" value="Update" />
                </p>

            </fieldset>        



        }
<script type="text/javascript">

$(document).ready(function () {

 $("#UpdateArea").click(function () {
            UpdateAreaFunction();


        });

        function UpdateAreaFunction() {

            if ($("#AreaDesc").val() == '') {
                alert('IF');

                //$("#CostFieldName_span").html("Name is required");

            }
            else {

                var dataToSend = {
                    areabal: {
                        Area_ID: 1,
                        Project_ID: 1,
                        AreaDesc : "dsdsds"
                    }

                };


                var formdata1 = $('#AreaForm').serialize();

                //alert(formdata1);
                console.log(formdata1);

                $.ajax({
                    url: '@Url.Action("UpdateArea_POST", "Builder")',
                    type: 'POST',
                    dataType: 'json',
                    //data: $.toDictionary(dataToSend),
                    data: JSON.stringify(dataToSend),
                    mimeType: "multipart/form-data",
                    contentType: false,
                    cache: false,
                    processData: false,
                    success: function (result) {
                        alert(result);




                    }
                });
            }

        }






    });
</script>

Controller's ActionMethod

[HttpPost]
        public string UpdateArea_POST(Createviewmodel Crv)
        {
            //Getting Null Values of all crv

            return "done";

        }

could help me to see the error ?

yes i have tried it...not working..Getting Null values... in fact i have tried dis jquery plugin given on dis link http://erraticdev.blogspot.in/2010/12/sending-complex-json-objects-to-aspnet.html //data: $.toDictionary(dataToSend), //data: JSON.stringify(dataToSend), data: $.param($.toDictionary(dataToSend)), — user3378215, Mar 12 '14 at 05:44
are there any errors in console for function in library u used — Nitin Varpe, Mar 12 '14 at 05:47
$('form').serialize() works only for Model object..but not working For ViewModel — user3378215, Mar 12 '14 at 05:54
i hav already tried that "data: JSON.stringify(dataToSend)" look at ma code..not working... — user3378215, Mar 12 '14 at 06:07
Change contenttype: contentType: 'application/json; charset=utf-8' — Andreas, Mar 12 '14 at 12:02

vbn · Accepted Answer · 2014-03-14T05:36:03.920

0

To upload files in an ajax like style, you can use the 'iFrame Post Form' plugin of jQuery.

$(document).ready(function () {
        $('form').iframePostForm();
});

Because, you have a complex model Createviewmodel in the controller, I suggest you not to post it manunaly in json. Instead, name the fields correctly. When the user hits submit, the data will be populated correctly in Crv.

<div class="editor-field">
    <input type="text" name="areabal.AreaDesc" />
    @Html.ValidationMessageFor(model => model.areabal.AreaDesc)
</div>

<div class="editor-label">
    @Html.LabelFor(model => model.areabal.Location)
</div>

<div class="editor-field">
    <input type="file" name="files" onchange = "PreviewImage();" />
</div>
<p>
    <input type="submit" value="Updated" />
</p>

The logic if ($("#AreaDesc").val() == '') can be done on the server side.

So don't use $.ajax in this scenario.

edited Mar 14 '14 at 05:36

answered Mar 13 '14 at 05:20

vbn

789
1
6
16

But FILE UPLOAD NOT WORKING – user3378215 Mar 13 '14 at 05:44
ajax does not support file uploading by default. However, you can upload files by posting to an `iframe`, http://www.ajaxf1.com/tutorial/ajax-file-upload-tutorial.html – vbn Mar 13 '14 at 05:51
Alternatively, there are a few other techiques mentioned here http://stackoverflow.com/questions/4006520/using-html5-file-uploads-with-ajax-and-jquery, but most of them don't work in IE < 10 – vbn Mar 13 '14 at 05:55
And here is a worth reading article this issue too http://stackoverflow.com/questions/2320069/jquery-ajax-file-upload – vbn Mar 13 '14 at 06:03
public class Createviewmodel { public Createviewmodel() { this.project = new ProjectMasterForConsultant(); this.areabal = new Areabalmodel(); } public ProjectMasterForConsultant project { get; set; } public Areabalmodel areabal { get; set; } [DisplayName("File Upload")] [Required(ErrorMessage = "Please select File to Upload")] public IEnumerable files { get; set; } } – user3378215 Mar 13 '14 at 06:12

ViewModel object is null when using .ajax to post from View to Controller

1 Answers1