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)

u can add an onChange event in the dropdown and call ajax from it foreach(var item in Model) { Html.DropDownListFor(m => m.Value, Model.Options, new { onchange="AjaxUpdateFunction()" }) } — Exor
– Exor, Commented Jun 17, 2013 at 13:29

Samich · Accepted Answer · 2013-06-17 13:31:12Z

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();
    });
});

answered Jun 17, 2013 at 13:31

Samich

30.4k6 gold badges70 silver badges80 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Arne H. Bitubekk Over a year ago

Thanks for the reply! How would I go about making this a ajax call so it will post the form without the whole site to refresh?

Samich Over a year ago

To handle it with AJAX please refer to this thread: stackoverflow.com/questions/7243042/mvc3-razor-ajax-form-submit. The only difference in this will be clicking on submit button instead of submitting whole form.

Rob Lyndon · Accepted Answer · 2013-06-17 13:37:39Z

1

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>

edited Jun 17, 2013 at 13:37

answered Jun 17, 2013 at 13:31

Rob Lyndon

12.7k5 gold badges56 silver badges79 bronze badges

2 Comments

Arne H. Bitubekk Over a year ago

Thanks for the reply Rob! How would I go about making this a ajax call so it will post the form without the whole site to refresh?

Rob Lyndon Over a year ago

You can replace @Html.BeginForm() with a call to @Ajax.BeginForm(), specifying the element of the page that needs to be updated when the form submission is complete.

Arne H. Bitubekk · Accepted Answer · 2013-06-26 06:43:11Z

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.

answered Jun 26, 2013 at 6:43

Arne H. Bitubekk

3,0531 gold badge30 silver badges34 bronze badges

1 Comment

BLoB Over a year ago

Use url: '@Url.Action("ACTIONNAMEHERE", "CONTROLLERNAMEHERE")'

Collectives™ on Stack Overflow

MVC Post values using ajax when value selected in dropdownlist

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related