If you need to make a drop down list populate based on the selection of another drop down list, here’s one way.

· You’ll want to use a jquery ajax call so it does proper error handling (using the default error delegate we built in a previous email).

· Make sure the datatype of your ajax call is json and that your controller action returns a JsonResult.

· Use jquery show/hide to hide the child drop down list on page load and show it when the user makes a selection from the parent drop down list.

· In the ajax success function, you will:

o Add options to your select control (a.k.a. drop down list) using jquery’s each statement. Note: the “option” object in the each function delegate is not strongly typed, so you will just need to know your CV properties and type them in manually (sorry, no intellisense for that). For example, if you return a List of DDLDispValueCVs in your BLL method, your option object’s properties will be “Disp” and “Value”.

o Then bind a change event handler to your select control that calls the load function for your second select control.

o Wrap the functions with jquery block/unblockUI calls so the user sees a soothing “In Progress…” popup while the ajax calls are filling the drop down lists.

Here’s an example of the view page:

<script type="text/javascript">
    $(document).ready
    (
        function()
        {
            $('#divTransferTo').hide();
            $.ajax
            (
                {
                    url: '<%= Url.Content("~/MyController/GetList") %>',
                    success: function(data) {
                        // fill the ddl with the data from the json call
                        var ddl = $('#ddlTransferFrom');
                        optionArray = [];
                        $.each(data, function(i, option) {
                            optionArray[i] = "<option value='" + option.Value + "'>" + option.Display + "</option>";
                        });
                        ddl.append(optionArray.join(''));
                        // bind an "on selected change" event to the ddl
                        ddl.change
                        (
                            function() {
                                $.blockUI({ message: $('#information'), css: { width: '275px'} });
                                LoadTransferToDDL($(this).val());
                                $.unblockUI();
                            }
                        );
                    },
                    dataType: 'json'
                }
           );
        }
    );
     function LoadTransferToDDL(id)
    {
        $('#divTransferTo').show();
        var transferToUrl = '<%= Url.Content("~/MyController/GetOtherList") %>';
        $.ajax
        (
            {
                url: transferToUrl + '/' + id,
                success: function(data)
                {
                    $('#ddlTransferTo').vis
                                       // fill the ddl with the data from the json call
                    var ddl = $('#ddlTransferTo');
                    optionArray = [];
                    $.each(data, function(i, option)
                    {
                        optionArray[i] = "<option value='" + option.Value + "'>" + option.Display + "</option>";
                    });
                    ddl.append(optionArray.join(''));
                     // bind an "on selected change" event to the ddl
                    ddl.change
                    (
                        function()
                        {
                            $.blockUI({ message: $('#message'), css: { width: '275px'} });
                            alert('You selected this value: ' + $(this).val());
                            $.unblockUI();
                        }
                    );
                },
                dataType: 'json'
            }
       );
    }</script>
<form id="mvcForm" method="post" action="">
    <h2>Reassign Something</h2>
Transfer From:
    <div id="divTransferFrom"><select id="ddlTransferFrom"></select></div>
Transfer To:
    <div id="divTransferTo"><select id="ddlTransferTo"></select></div>
</form>

Here’s an example of the controller actions used by the ajax calls. Notice that the Json method built into MVC.Controller automagically converts your list of cvs into json:

[AcceptVerbs(HttpVerbs.Get)]
public JsonResult GetList()
{
 try 
{
  return Json(myBLL.GetList());
 }
 catch (Exception ex)
 {
  return HandleError(ex, null);
 }
}

[AcceptVerbs(HttpVerbs.Get)]
public JsonResult GetOtherList(object id)
{
 try 
{
  return Json(myBLL.GetOtherList(Convert.ToInt64(id)
 }
 catch (Exception ex)
 {
  return HandleError(ex, null); 
}
}

« »