asp.net mvc 2 - MVC 2.0 Ajax: auto-submit on dropdown list causes normal postback -

i trying add ajax functionality mvc application. want form post asynchronously. here's form code:

using (ajax.beginform("setinterviewee", "date", routevalues, new ajaxoptions { updatetargetid = "divinterviewee" })) 

and want automatically post when dropdown list selected value changes:

<%= html.dropdownlist("interviewees", model.interviewees.intervieweelists.intervieweeslist, "-- select employee --", new { @class = "ddltext", style = "width: 200px", onchange = "this.form.submit();" })%> 

however, when try out, program posts normally, not partial postback expecting. here's think problem is: onchange = "this.form.submit();" in dropdown list.

i think somehow causes normal postback instead of asynchronous postback.

here's mvc generates html form tag:

<form action="/setinterviewee/2011-1-26/2011-1/visit" method="post" onclick="sys.mvc.asyncform.handleclick(this, new sys.ui.domevent(event));" onsubmit="sys.mvc.asyncform.handlesubmit(this, new sys.ui.domevent(event), { insertionmode: sys.mvc.insertionmode.replace, updatetargetid: &#39;divinterviewee&#39; });"> 

i think "this.form.submit()" "onsubmit" event handler not being called. thing is, don't understand why. wouldn't "onsubmit" catch event submits form?

update: went jquery, thusly:

        $(function () {         $('#interviewees').change(function () {             var form = $('#intervieweeform');             $.ajax({                 url: form.attr('action'),                 type: form.attr('method'),                 data: form.serialize(),                 success: function (result) {                     $('#selectedinterviewee').val(result);                 }             });         });     }); 

this causing many problems, among them:

-- still not seem asyncrhonous postback. in controller action method, have following code: "if (request.isajaxrequest())" returns false.

-- can't seem model binding more. route looks :

http://localhost:1986/interviews/2011-2-25/2011-2/visit

but route apparently ends being sent

http://localhost:1986/setinterviewee/2011-2-25/2011-2? count=5&keys=system.collections.generic.dictionary`2+keycollection [system.string,system.object] &values=system.collections.generic.dictionary`2+valuecollection [system.string,system.object] 

causing model binding not work -- "visit" supposed "mode" parameter, it's not there "mode" defaults "phone", upsets whole applecart.

it serialize command causing this? don't understand why append querystring when method post.

there other things -- among them, fact action must return viewresult, how can possibly return string, need using ajax ... defer concern until routing/binding thing straightened out!

update: "setinterviewee" indeed correct route post to, routevalues parameter should copy route values current view -- think. here's code form:

routevaluedictionary routevalues = viewcontext.routedata.values; using (html.beginform("setinterviewee", "date", routevalues, formmethod.post, new { id = "intervieweeform" })) 

i recommend use jquery , rid of ajax.* helpers , msajax scripts.

so:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>  <% using (html.beginform("setinterviewee", "date", routevalues, formmethod.post, new { id = "myform" })) { %>     ... <% } %>  <%= html.dropdownlist(     "interviewees",      model.interviewees.intervieweelists.intervieweeslist,      "-- select employee --",      new { id = "interviewees", @class = "ddltext", style = "width: 200px" } )%> 

and in separate javascript file:

$(function() {     $('#interviewees').change(function() {         var form = $('#myform');         $.ajax({             url: form.attr('action'),             type: form.attr('method'),             data: form.serialize(),             success: function(result) {                  $('#divinterviewee').html(result);             }         });     }); }); 

now have separated html markup javascript. unobtrusive javascript.