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?
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;
}
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
"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
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;}
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
--------------------------------------------------
"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
Prashant
--------------------------------------------------
[Optional] If this reply is answer to your question then mark this reply as Answer
--------------------------------------------------
"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
Prashant
--------------------------------------------------
[Optional] If this reply is answer to your question then mark this reply as Answer
--------------------------------------------------
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
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
--------------------------------------------------
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
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
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?
MVC dropdown
All-Star
120166 Points
27994 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
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)
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
All-Star
33963 Points
8478 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
);
Excellent Windows VPS Hosting
Imran Baloch MVP, MVB, MCP, MCTS, MCPD
Member
52 Points
122 Posts
Re: Dropdownlist change event handling?
May 13, 2010 11:04 AM|Jerrolds|LINK
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>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?
--------------------------------------------------
[Optional] If this reply is answer to your question then mark this reply as Answer
--------------------------------------------------
All-Star
33963 Points
8478 Posts
MVP
Re: Dropdownlist change event handling?
Aug 03, 2010 03:00 AM|imran_ku07|LINK
add name space System.Web.Mvc
Excellent Windows VPS Hosting
Imran Baloch MVP, MVB, MCP, MCTS, MCPD
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...
--------------------------------------------------
[Optional] If this reply is answer to your question then mark this reply as Answer
--------------------------------------------------
All-Star
33963 Points
8478 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
Excellent Windows VPS Hosting
Imran Baloch MVP, MVB, MCP, MCTS, MCPD
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
--------------------------------------------------
[Optional] If this reply is answer to your question then mark this reply as Answer
--------------------------------------------------
All-Star
33963 Points
8478 Posts
MVP
Re: Dropdownlist change event handling?
Aug 03, 2010 06:05 AM|imran_ku07|LINK
There is no need of JsonRequestBehavior.AllowGet. You Json action works as expected
Excellent Windows VPS Hosting
Imran Baloch MVP, MVB, MCP, MCTS, MCPD
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?
--------------------------------------------------
[Optional] If this reply is answer to your question then mark this reply as Answer
--------------------------------------------------
All-Star
33963 Points
8478 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;
Excellent Windows VPS Hosting
Imran Baloch MVP, MVB, MCP, MCTS, MCPD