How to update a view part on change of a select tag

Question

Hi,

Using ASP.Net MVC 1.0 I have a form with some input control on it. One of them is a dropdown (select). When this dropdown gets changed by the user I like to update a DIV-tag using RenderPartial() or something like this.

My view currently look like this:

<% using (var form = Html.BeginForm())
   { %>
       <label for="FieldIdentifier">Identifier:</label>
       <%=Html.TextBox("FieldIdentifier", Model.FieldIdentifier)%>
       ...

       <label for="DataType">DataType:</label>
       <%=Html.DropDownList("DataType", Model.AvailableDataTypes)%>

       <div id="DataTypeOptions">
          <% Html.RenderPartial("FieldDataTypeOptions", Model); %>
       </div>
       ...

In Webforms the functionality I am looking for could be done with an UpdatePanel around the dropdown and the DIV. Can Ajax.BeginForm() help here or is JScript on the "OnChange" client event needed? If so, how does one update the DIV-part of the view using JScript?

Any help would be great!

Cheers, Marc

Answer 1

If you want to update the DIV based on the change in the dropdown, then you'll need an action on the controller that can return just the correct partial view based on the dropdown value. I would suggest using jQuery to add an change handler for the dropdown and call the action to get the partial via jQuery load.

$(function() {
    $("#DataType").change( function() {
        $("#DataTypeOptions").load( '<%= Url.Action( "GetDataTypeOptions" ) %>?dataType=' + $(this).val() );
    });
});

(note change in div name -- I think you have a typo)

where you have an action on the same controller as

public ActionResult GetDataTypeOptions( string dataType )
{
    var model = ... uses dataType to get model ...

    return Partial( "FieldDataTypeOptions", model );
}

If your "Get" method needs more inputs, simply add parameters to the method and construct the parameters in the load call from the values of the additional input elements.