Sending Ajax request to controller implicitly in Asp.Net

Question

I have form with a lot of inputs:

<input type="text" id="SomeName1" name="SomeName1" />
<input type="text" id="SomeName2" name="SomeName2" />
etc...

All these inputs are part of my viewmodel:

public class MyViewModel
{
    public string SomeName1 { get; set; }
    public string SomeName2 { get; set; }
    //etc...
}

I need to refresh all those inputs without refreshing whole page, so I need to use Ajax request. However the problem is that we need explicitly define viewmodel in Javascript and send it via jquery.ajax, like this:

var viewModel = 
{
    SomeName1: $("#SomeName1").val(),
    //etc...
}
var request = $.ajax({
    url: '@Url.Action("UpdateAction", "SomeController")',
    type: "POST",
    cache: false,
    data: viewModel,
    datatype: "json"
})
request.done(function (data) {
    $("#SomeName1").val(data.SomeName1);
    //etc...                                   
})

So, there is a lot of copy-paste code, which is hard to edit and support.

I don't want explicitly send data, like in example, from all inputs and then explicitly set new data to all that inputs.

What should I do with this?

Your question is not clear at all. Can you explain what it is you're trying to achieve — Rory McCrossan, Sep 07 '16 at 15:05
while sending use $("your form selector").serialize() in ajax data it gets input values with their names. — mr., Sep 07 '16 at 15:15
@mayk this solves problem with sending, but what should we do with refreshing after answer? — Yurii N., Sep 07 '16 at 15:17
Look at this http://stackoverflow.com/questions/680241/resetting-a-multi-stage-form-with-jquery — mr., Sep 08 '16 at 06:00

score 0 · Accepted Answer · answered Sep 08 '16 at 12:18

Based on mayk's answer, which give me idea how can I solve it, I've written simple solution:

var viewModel = $("#myFormId").serializeObject();
var request = $.ajax({
    url: '@Url.Action("UpdateAction", "SomeController")',
    type: "POST",
    cache: false,
    data: viewModel,
    datatype: "json"
})
request.done(function (data) {
       $.each(data, function (key, value) {
           $("#myFormId) input[name=" + key + "]").val(value);
       });                               
})

Where:

$.fn.serializeObject = function () {
    var o = {};
    var a = this.serializeArray();
    $.each(a, function () {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

serialize your form to

var viewModel = 
{
    SomeName1: $("#SomeName1").val(),
    //etc...
}

Javascript object, then send viewmodel to your controller, which returns this viewmodel again. Returned viewmodel simply applies to each input in form with corresponding names.

Sending Ajax request to controller implicitly in Asp.Net

1 Answers1