how to create cascading ddl's using entity framework model first using MVC3?

Question

I'm new to MVC-entity framework, my model is an entity framework model and I have a commerces table which has a relation with a Province Table which has a relation with Country table.

so, when I'm about to create a Commerce, I should be able to select first the countries and then the provinces that belongs to that country.

so far i've managed to display the countries and all the provinces, but I have no clue about how to change the provinces once a country is selected...

I have seen posts where there's an explanation of how to do something like this using razor(I'm using .net) an creating a model(code first or something like that)

I would really appreciate if you can help me on this.

with a little bit of research you will find various identical answers here on SO, here is a great answer http://stackoverflow.com/questions/4458970/cascading-drop-downs-in-mvc-3-razor-view — Rafay, Nov 26 '11 at 22:41

score 0 · Answer 1 · answered Nov 26 '11 at 22:51

0

The short answer is you're going to post back and filter the provinces, or use jQuery and do it on the fly.

Myself, I would post back...but that's just me.

answered Nov 26 '11 at 22:51

rfmodulator

3,638
3
18
22

1

Posting back is useless transfer and extra binding loading of two data sets that arent required. – Adam Tuliper Nov 26 '11 at 22:56
@Adam Tuliper Thank you, I appreciate your concern. – rfmodulator Nov 26 '11 at 23:02

score 0 · Answer 2 · answered Nov 28 '11 at 11:01

Using Jquery would be the best solution for such situation.even if you are not using it yet. saving a postback would be worth it. Here is one example with State(parent) and County(child) relationship.

    <asp:DropDownList ID="ddlState" runat="server">
</asp:DropDownList>
<br />
<asp:DropDownList ID="ddlCounty" runat="server">
</asp:DropDownList>

Here is the jquery code to implement cascaded dropdown list.

        $(document).ready(function () {

        $("#<%= ddlState.ClientID %>").change(function () {

            var sourceddl = "<%= ddlState.ClientID %>";

            var stateid = $("#<%= ddlState.ClientID %> option:selected").val();
            var Stateid = { Stateid: stateid };

            $.ajax({
                type: 'POST',
                url: 'CacheSample.aspx/GetCounties',
                data: JSON.stringify(Stateid),
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (result) {

                    if (data.d) {                     

                    var options = [];                     
                                        if (result.d) {
                                            for (var i = 0; i < result.d.length; i++) {
                                                options.push('<option value="',
                                              result.d[i].countyID, '">',
                                              result.d[i].countyName, '</option>');
                                            }

                                            $("#<%= ddlCounty.ClientID %>").html(options.join(''));
                                        }                        
                     }
                },
                error: function () {
                    alert("Error! Try again...");
                }
            });

        });

    });

I am using a webmethod to retireive the Counties for a selected state.

[WebMethod]
public static County[] GetCounties(int Stateid)
{
    County[] countiesArr = StatesCountyModel.GetCountyForState(Stateid).ToArray();
    return countiesArr;     
}

I guess it should help you. If you are new to Jquery please let me know. You just need to include few javascript files into your project and you can use this code.

Praveen

thanks! I'm totally new to jquery and again thanks for the help you already! — Gary, Nov 30 '11 at 17:27
Praveen, I added the last jquery file to my project and I'm referencing it to my page, I can't see if its working because I can't declare the [WebMethod] because it doesn't seems to be recognized, do I have to do something else? — Gary, Jan 12 '12 at 04:35
Praveen, thanks again for your help. Look, I added the last jquery file to my project(jquery-1.7.1.js) and then I'm referencing it from my page, but I can't try the solution because my project doesn't seems to recongize the [WebMethod]... What else should I use? — Gary, Jan 12 '12 at 04:38
Gary! Sorry to reply late. You should have System.Web.Services namespace included. If you don't find it in your project then go to References and Add a new reference ( listed under .Net tab) System.Web.Services. — PraveenLearnsEveryday, Jan 18 '12 at 12:06

how to create cascading ddl's using entity framework model first using MVC3?

2 Answers2