Apply change function on one dropdown to fill another dropdown box

SZhang · November 23rd, 2010, 05:12 AM

I am coding a small project using MVC 2 after read chapter 1 of "Professional ASP.NET MVC 2". On one of my views, there are two Select boxes, box1 is for selecting Fields, box2 for values. When the selected item of box1 changes, the values set in box2 will be changed accordingly.

Have some basic understanding from the book, I read "http://stackoverflow.com/questions/2500949/is-it-possible-to-bind-data-asynchronously-between-two-dropdownlists-in-a-view", then create the funciton as below:

In the controller, the method is:

Code:

 public ActionResult getValByFld(string thefld)
        {
            List<string> thevals = new List<string>();
            string sql = "  ";
            if (thefld == "prio")
            {
                sql = "select acode from pas. patcodes where acode <> ' ' and tcode ='TP' and ptcoactv ='A' order by acode";
            }
            else if (thefld == "purch")
            {
                sql = "select acode from pas. patcodes where acode <> ' ' and tcode ='HP' and ptcoactv ='A' order by acode";
            }
            else if (thefld == "serv")
            {
                sql = "select distinct wprhat from pas.watproaf where wprhat <> ' ' order by wprhat ";
            }

            database = DatabaseFactory.CreateDatabase("HEALTH-SOURCE");
            reader = database.ExecuteReader(CommandType.Text, sql);
            while (reader.Read())
            {
                thevals.Add(reader.GetString(0));
            }
            return Json(thevals);
        }

the view template is:

Code:

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<ESPItry.Models.ESPIAddLev1ViewModel>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
	AddLev1Exclu

    <script src="/Scripts/MicrosoftAjax.js" type="text/javascript"></script>
    <script src="/Scripts/MicrosoftMvcAjax.js" type="text/javascript"></script>
    <script src="/Scripts/jQuery-1.4.1.js" type="text/javascript"></script>

    <script type="text/javascript">
    $(function() { 
    $('select#fldExclu').change(function() { 
        var fldId = $(this).val();
        $.post('/ESPITrys/getValByFld', { thefld: fldId }, function(thevals) { 
            var valSelect = $('select#valExclu');
            // loop through thevals and fill the dropdown 
            $(thevals).each(function(item) { 
                valSelect.append( 
                    '<option value="' + item + '">'
                    +   '</option>'); 
            }); 
        }); 
    }); 
}); 
</script>

</asp:Content>


<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

    <h2>Add New Level 1 Exclusion</h2>

    <% using (Html.BeginForm()) {%>
        <%: Html.ValidationSummary(true) %>

        <fieldset>
            <legend>Fields</legend>
            
            <div class="editor-label">
                <%: Html.LabelFor(model => model.objLev1Exclu.fldExclu)%>
            </div>
            <div class="editor-field">
                 <%: Html.DropDownListFor(m => m.objLev1Exclu.fldExclu, Model.flds) %>
            </div>
           
            
            <div class="editor-label">
                <%: Html.LabelFor(model => model.objLev1Exclu.valExclu)%>
            </div>
             <div class="editor-field">
                 <%: Html.DropDownListFor(m => m.objLev1Exclu.valExclu, Model.vals) %>
            </div>
          
            <p>
                <input type="submit" value="Create" />
            </p>
        </fieldset>

    <% } %>

    <div>
        <%: Html.ActionLink("Back to List", "Index") %>
    </div>

</asp:Content>

When run, the view can be opened with box2 being empty. But when change box1's value, box2 can't be filled and no error is showed. Please let me know what goes wrong in my code.

Thank you very much
Susan