using ajax with dropdownlist mvc3

Question

Is there any way to refresh some part of page (e.g div/span) on selection of dropdownlist option ... ?? Please note I'm using razor syntax.

If yes, then please give some sample code.

Answer 1

Yes, you can subscribe to the onchange event.

@Html.DropDownListFor(m => m.ItemId, Model.ItemList, "Select an item...", new { onchange = "somefunction();" })

Maybe like this (real example):

   @using (Ajax.BeginForm("Action", new AjaxOptions { HttpMethod = "Post", UpdateTargetId = "divtoupdate", InsertionMode = InsertionMode.Replace }))
    {
        @Html.DropDownListFor(m => m.ItemId, Model.ItemList, "Select an item...", new { onchange = "doSubmit($(this).parents('form'));" })
    }

And then have this javascript function (or similar)

<script>
function doSubmit(form){
  // event.preventDefault(); doesn't work in IE8 so do the following instead
  (event.preventDefault) ? event.preventDefault() : event.returnValue = false;
  form.submit();
}
</script>

EDIT: This example assumes you are using unobtrusive validation (and therefore jQuery) and want to submit a form, but you could obviously call any javascript function for the onchange event and do whatever you want...

Answer 2

just add some javascript/jquery to your code. somthinglike this.

$("#button").click(function(){

$("#div").load("www.wateveryourdatapageis.com");

});