MVC Post values using ajax when value selected in dropdownlist

Question

I have several dropdownlists in a form. Each time the user selects a value in one of these dropdownlist do I want the value to be saved to the backend (database). I don't want to page to reload so I guess the best way to achive this is with ajax, and this is what I need help with.

How would I go about to get it to automaticly post the value to the server side when I select a value in a dropdownlist. Should I make 1 form for each of the drop down lists so I can update them individually? How do I get it to post the value as a ajax call, and not with a page reload? I'm using JQuery and JQuery mobile ontop of ASP MVC.

For demonstration purpose let me make show some code as it would be now: ViewModel:

public class ColorViewModel
{
    public ColorViewModel()
    {
        Options = new List<string>(){ "red", "blue", "green" };
    }

    public string Value { get; set; }

    public List<string> Options { get; set; }
}

View:

@model IEnumerable<ColorViewModel>

@using (Html.BeginForm())
{
    foreach(var item in Model)
    {
        Html.DropDownListFor(m => m.Value, Model.Options)
    }
    <input type="submit" value="Save">
}

I want to remove the submit button from the form and do all of the submiting of the form when the user selects a value (I guess this can be achived by using javascript)

Solution 1

I ended up not posting the form but posting each of the select inputs when they change. I had to attach all the values I needed using "data-" attribute on the element posted. For example if you want a ID attached to it:

@Html.DropDownListFor(m => m.Value, Model.Options, new { @data_Id = Model.Id, })

Using jQuery then you're able to do it this way:

$(function() {
    $('.dropdown').change(function() {
        $.ajax(
            {
                type: "POST",
                url: "Controller/Action",
                data: {
                    Value: $(this).val(),
                    Id: $(this).attr('data-Id'),
                }
            });
    });
});

It will now be posted to the url spesified. If you have a object with the same property name as the one you're posting in the data will it automaticly fill the correct values into these.

Another small note. If you want to go for the other approach with posting the whole form (as I did first) must you hide the submit button then trigger its click event with javascript for it to use ajax. Just submiting the form normally with javascript will the form be submitted normally and not using ajax.

Solution 2

By default MVC should render id="Value" for this field (you can override it in HTML params of helper method).

Then using jquery (if you are using MVC project template you already should have it in the project) you can post your form:

$(function() {
    $('#Value').change(function() {
        this.form.submit();
    });
});

Solution 3

Javascript is your best bet. Something like this:

@using (Html.BeginForm("", "", FormMethod.Post, new { id = "myForm" }))
{
    foreach(var item in Model)
    {
        Html.DropDownListFor(m => m.Value, Model.Options, new { id = "myList" })
    }
}

<script type="text/javascript">
    $(document).ready(function() {
        $("#myList").change(function() {
            $("#myForm").submit();
        });
    });
</script>