c# mvc4 Html.DropDownListFor calling the controller

Question

I have browsed through several posts and several codes and none of them seems to work.

I need to reload a WebGrid based on a DropDown selected key on same page, partial views. I am now building the dropdown element and using this code in the view:

@Html.DropDownListFor(model => model.Users, Model.Users, 
                                         new { autopostback = "true" })

Along with the following javascript code:

<script type="text/javascript">
    $(document).ready(function () {
        $('select:[autopostback=true],input[type=checkbox]:[autopostback=true],input[type=radio]:[autopostback=true]')
      .live('change',function () {
            $(this).closest('form').submit();
        });
    });
</script>

Javascript Console at browser says:

Uncaught Error:Syntax error, unrecognized expression:select:[autopostback=true],
         input[type=checkbox]:[autopostback=true],
         input[type=radio]:[autopostback=true] 

No calls are being done at Controller. What am I doing wrong?

Thanks.

[EDIT]

As this is now working, here goes what IS working so far:

<script type="text/javascript">
    $(function () {
        $("#UserList").change(function (e) {
            var _this = $(this);

            $.post("@Url.Action("List","MainController", Model)", _this.closest("form").serialize(),
                                                             function (response) {
                                                                 // do something with response.
                                                             });
  });

And the View:

                <td class="tdatadata">@Html.DropDownList("UserList", Model.Users, new { autopostback = "true" })</td>

And the ViewModel:

public class ModelViewModel
{
    public int idSelected { get; set; }

    [Display(Name = "Usuários Cadastrados")]
    public IEnumerable<SelectListItem> Users { get; set; }
}

But I still have a problem: How to pass the selected field to the controller action ? I tried using DropDownListFor, but in that case I loose the object name and them the Jscript does not work.

Answer 1

Try this:

$(document).ready(function () {
    $('select[autopostback=true],input[type=checkbox][autopostback=true],input[type=radio][autopostback=true]').live('change',function () {
        $(this).closest('form').submit();
    });
});

Remove column ":" from the selector which is a meta character and makes the selector invalid, also you don't need them.

EIther try to use id or to get all the input fields of the form use jquery :input selector $('form :input') to select all the input fields of the form.

ie

$('form').find(':input').live('change',function () {
     $(this).closest('form').submit(); 
});

Also note that live has been deprecated and if you are using jquery version >=1.7 use on() instead of live

Answer 2

Try removing : and change .live by .on .

$(document).ready(function () {
    $('select[autopostback=true],input[type=checkbox][autopostback=true],input[type=radio][autopostback=true]').on('change',function () {
        $(this).closest('form').submit();
    });
});