Dropdownlist change event handling?

Reply

Jerrolds

Member

52 Points

122 Posts

Dropdownlist change event handling?

May 11, 2010 05:32 PM|Jerrolds|LINK

Say I'm going to have 3 drop downs

Department
Section
Sub-Section

In order to select a sub-section, the user has to select a section -> in order to select a section, the user has to select a Department. Ideally i'd like Section and Sub-Section to be disabled until Department is selected. Once selected id like to grab the appropriate list (depending on the previous selection)

Right now i'm able to grab a list from my db using Linq to SQL, create a SelectList and bind it to a DropDown using Html.DropDownFor(). I just need to figure out how to handle change events for drop downdowns so i can activate additional drop down lists

I hope this makes sense - what is the best way to do something like this?

Reply

ignatandrei

All-Star

119952 Points

27912 Posts

Moderator

MVP

Re: Dropdownlist change event handling?

May 11, 2010 06:48 PM|ignatandrei|LINK

cascading dropdown

http://www.mikesdotnetting.com/Article/97/Cascading-DropDownLists-with-jQuery-and-ASP.NET

.NET Teacher | .NET Videos 5 minutes

Reply

Jerrolds

Member

52 Points

122 Posts

Re: Dropdownlist change event handling?

May 12, 2010 03:32 PM|Jerrolds|LINK

i *think* i'm halfway there.

What i'm doing is using jQuery to call a Controller Action that Returns a JsonResult back, and then hopefully take the result and populate the "child" dropdown

1) Parent Dropdown is always populated - and stuffed into the ViewData[] collection - here is the Controller for the "Edit" action. There is an action the retrieves the Branches from my service and stuffs it into a SelectList and wraps it all up in a JsonResult object (This is kinda gross - i dont know if the controller should be responsible for this)

public ActionResult Edit(int id)
        {
            try
            {
                var employee = _employeeService.GetEmployee(id);
                ViewData["Departments"] =                    _organizationService.GetOrganizationsSelectListByTypeId(OrganizationTypeModel.Department);


                return View("Edit", employee);
            }
            catch
            {
                return RedirectToAction("Index");
                //return View();
            }
        }


public JsonResult Branches(int id)
        {
            var organizations = _organizationService.GetOrganizationsByParentId(id);


            if (HttpContext.Request.IsAjaxRequest())
                return Json(new SelectList(
                                organizations.ToArray(),
                                "Id",
                                "Name")
                            );
            return null;
        }

<script type="text/javascript">
        $(document).ready(function() {
            $("#OrganizationId").change(function() {
                var strOrganizationIDs = "";
                $("#OrganizationId option:selected").each(function() {
                    strOrganizationIDs += $(this)[0].value;
                });

                var url = "/Employee/Branches/" + strOrganizationIDs;
                $.getJSON(url, null, function(data) {
                    $("#Branches").empty();
                    $.each(data, function(index, optionData) {
                        $("#Branches").append("<option value='"
                            + optionData.Id
                            + "'>" + optionData.Name
                            + "</option>");
                    });
                });
            });
        });
    </script>

<fieldset>
            <legend>Location</legend>
            <table border="0">
                <tr>
                    <td><%= Html.Label("Department:") %> </td>                 
                    <td><%= Html.DropDownListFor(model=>model.OrganizationId, ViewData["Departments"] as IEnumerable<SelectListItem>) %></td>              
                </tr>
        
                <tr>
                    <td><%= Html.Label("Branch:") %> </td>
                    <td><select id="Branches" name="Branches"></select></td>
                </tr>
            </table>
        </fieldset>

OK this all works - it goes into the Controller, and gets the correct child organizations...the problem is that the "Branches" dropdown box is never populated :(

So i think my problem now is that im either returning the wrong thing back to the jQuery function to populate the child "Branches" dropdown, or i'm trying to populate it incorrectl - or both.

Any help would be appreciated

Note** I might be completely wrong in this approach - sooo..ya let me know if im down in the wrong rabbit hole

Reply

imran_ku07

All-Star

33963 Points

8479 Posts

MVP

Re: Dropdownlist change event handling?

May 13, 2010 12:36 AM|imran_ku07|LINK

return Json(new SelectList(
                                 organizations.ToArray(),
                                 "Id",
                                 "Name"),JsonRequestBehavior.AllowGet
                             );

"And whoever is removed away from the Fire and admitted to Paradise, he indeed is successful." (The Holy Quran)
Excellent Windows VPS Hosting
Imran Baloch MVP, MVB, MCP, MCTS, MCPD

Reply

Jerrolds

Member

52 Points

122 Posts

Re: Dropdownlist change event handling?

May 13, 2010 11:04 AM|Jerrolds|LINK

imran_ku07

return Json(new SelectList(
                                 organizations.ToArray(),
                                 "Id",
                                 "Name"),JsonRequestBehavior.AllowGet
                             );

Thanks! That did it - here is the Linq to SQL query that returns the correct structure

<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> var db = new ProjectYDataContext();</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> var organization = (from c in db.Organizations</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> where (c.ParentId == id)</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> select new { Id = c.Id, Name = c.Name });</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> var json = this.Json(organization, JsonRequestBehavior.AllowGet);</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> return json;</div>

public JsonResult Branches(int id)
{           var db = new _dataContext();


            var organization = (from c in db.Organizations
                                where (c.ParentId == id)
                                select new { Id = c.Id, Name = c.Name });


            var json = this.Json(organization, JsonRequestBehavior.AllowGet);


            return json;}

Reply

mprashant_bi...

Member

11 Points

56 Posts

Re: Dropdownlist change event handling?

Aug 03, 2010 02:38 AM|mprashant_bingo|LINK

i am trying the same code but 'JsonRequestBehavior' this is not recognize in my environment...

var json = this.Json(organization, JsonRequestBehavior.AllowGet); //this bold object giving me an error 'The name JsonRequestBehavior does not exist in current context'

i am using vs 2008 with asp.net mvc2...

am i missing some reference/s?

Prashant
--------------------------------------------------
[Optional] If this reply is answer to your question then mark this reply as Answer
--------------------------------------------------

Reply

imran_ku07

All-Star

33963 Points

8479 Posts

MVP

Re: Dropdownlist change event handling?

Aug 03, 2010 03:00 AM|imran_ku07|LINK

mprashant_bingo
asp.net mvc2.

add name space System.Web.Mvc

"And whoever is removed away from the Fire and admitted to Paradise, he indeed is successful." (The Holy Quran)
Excellent Windows VPS Hosting
Imran Baloch MVP, MVB, MCP, MCTS, MCPD

Reply

mprashant_bi...

Member

11 Points

56 Posts

Re: Dropdownlist change event handling?

Aug 03, 2010 03:05 AM|mprashant_bingo|LINK

Hello Imran,

Thanks for you reply...

yes i added already...

<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">using System;</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">using System.Collections.Generic;</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">using System.Linq;</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">using System.Web;</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">using System.Web.Mvc;</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste">using MvcApplication2.Models;</div>

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.Mvc;

using MvcApplication2.Models;

Still i am facing this issue...

Prashant
--------------------------------------------------
[Optional] If this reply is answer to your question then mark this reply as Answer
--------------------------------------------------

Reply

imran_ku07

All-Star

33963 Points

8479 Posts

MVP

Re: Dropdownlist change event handling?

Aug 03, 2010 05:23 AM|imran_ku07|LINK

Make sure you are using MVC 2 RTM not RTC

"And whoever is removed away from the Fire and admitted to Paradise, he indeed is successful." (The Holy Quran)
Excellent Windows VPS Hosting
Imran Baloch MVP, MVB, MCP, MCTS, MCPD

Reply

mprashant_bi...

Member

11 Points

56 Posts

Re: Dropdownlist change event handling?

Aug 03, 2010 05:58 AM|mprashant_bingo|LINK

you are right...

i am using System.Web.MVC version 1.0

let me update to 2.0 and check...

Thanks Imran for your kind attention.

Prashant

Prashant
--------------------------------------------------
[Optional] If this reply is answer to your question then mark this reply as Answer
--------------------------------------------------

Reply

imran_ku07

All-Star

33963 Points

8479 Posts

MVP

Re: Dropdownlist change event handling?

Aug 03, 2010 06:05 AM|imran_ku07|LINK

mprashant_bingo
i am using System.Web.MVC version 1.0

There is no need of JsonRequestBehavior.AllowGet. You Json action works as expected

"And whoever is removed away from the Fire and admitted to Paradise, he indeed is successful." (The Holy Quran)
Excellent Windows VPS Hosting
Imran Baloch MVP, MVB, MCP, MCTS, MCPD

Reply

mprashant_bi...

Member

11 Points

56 Posts

Re: Dropdownlist change event handling?

Aug 04, 2010 12:09 AM|mprashant_bingo|LINK

i am trying this code

<div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> $("input[name*='SlectAdd']").click(function() {</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> //alert($(this).val());</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> var addid = $(this).val();</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> var url = 'GetAddress/' + addid;</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> $.ajax({</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> contentType: "application/json; charset=utf-8",</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> url: url,</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> data: "{}",</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> dataType: "json",</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> type: "POST",</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> success: function(data) {</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> alert(data);</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> },</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> failure: function(data) {</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> alert("failed");</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> }</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"></div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> });</div> <div style="position: absolute; left: -10000px; top: 0px; width: 1px; height: 1px; overflow-x: hidden; overflow-y: hidden;" id="_mcePaste"> });</div>

$("input[name*='SlectAdd']").click(function() {

//alert($(this).val());

var addid = $(this).val();

var url = 'GetAddress/' + addid;

$.ajax({

contentType: "application/json; charset=utf-8",

url: url,

data: "{}",

dataType: "json",

type: "POST",

success: function(data) {

alert(data);

},

failure: function(data) {

alert("failed");

}

});

Control function gets called also it populated data but .. no data alert shown...

could please look into above code and let me know any thing worng i am doing?

Prashant
--------------------------------------------------
[Optional] If this reply is answer to your question then mark this reply as Answer
--------------------------------------------------

Reply

imran_ku07

All-Star

33963 Points

8479 Posts

MVP

Re: Dropdownlist change event handling?

Aug 04, 2010 12:42 AM|imran_ku07|LINK

firstly make sure that your GetAddress method is calling,

For default Route use(if you are not using IIS),

var url = '/Controller/GetAddress/' + addid;

"And whoever is removed away from the Fire and admitted to Paradise, he indeed is successful." (The Holy Quran)
Excellent Windows VPS Hosting
Imran Baloch MVP, MVB, MCP, MCTS, MCPD

Dropdownlist change event handling? [Answered]RSS

12 replies

Shortcuts

Related Links

Dropdownlist change event handling?

Re: Dropdownlist change event handling?

Re: Dropdownlist change event handling?

Re: Dropdownlist change event handling?

Re: Dropdownlist change event handling?

imran_ku07

Re: Dropdownlist change event handling?

Re: Dropdownlist change event handling?

mprashant_bingo

Re: Dropdownlist change event handling?

Re: Dropdownlist change event handling?

Re: Dropdownlist change event handling?

Re: Dropdownlist change event handling?

mprashant_bingo

Re: Dropdownlist change event handling?

Re: Dropdownlist change event handling?