locked
Two Select Boxes with Ajax RRS feed

  • Question

  • User2129316869 posted

    Please I have two select boxes. One retrieves Faculties from database and the other Department.

    I have a one to many relationship of faculty (one part) and department (many part).

    What I want to do is when a faculty is selected all department having the faculty's primary key as their foreign key is retrieved. Thanks

    Friday, April 11, 2014 9:01 AM

Answers

  • User1208776063 posted

    The Links used ASP and Vb while am using ASP.Net web pages with Razor C#.

    You could have mentioned the programming language and the framework you are using. You should be able to find plenty of examples for "cascading dropdownlists".

    http://www.mikesdotnetting.com/Article/196/WebMatrix-jQuery-Cascading-Dropdown-Lists

    http://blogs.msdn.com/b/rickandy/archive/2012/01/09/cascasding-dropdownlist-in-asp-net-mvc.aspx

    You should probably follow those examples and try implementing the functionality in your application

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 11, 2014 10:35 AM
  • User-417640953 posted

    The Links used ASP and Vb while am using ASP.Net web pages with Razor C#.

    Hi Chris17,

    Thanks you post the issue to asp.net forum.

    For using the cascade dropdownlist in the asp.net mvc razor view, please check below demo made for you.

    View:

    <script type="text/javascript">
       
    $(function(){
            $("#Parent").change(function(){ 
                var selec = $(this).val();   
                var url = "@Url.Action("GetBZ")"; 
                $("#Sub").find("option").remove();  
                $.getJSON(url, { 'parentId': selec }, function (data) {  
                    $.each(data, function (i, item) {
                        $("<option></option>").val(item["ID"]).text(item["Name"]).appendTo($("#Sub"));
                    }); 
                });   
            });
        });
    </script>
    <div>
    @Html.DropDownList("Parent","Select")
    @Html.DropDownList("Sub", "Select")
    </div>
    

    Control action:

    public class HomeController : Controller
        {
            List<ParentItem> _parentList = new List<ParentItem>();
            List<SubItem> _subList = new List<SubItem>();
    
            //
            // GET: /Home/
    
            public HomeController()
            {
               //test data............
                _parentList.Add(new ParentItem() { ID = 1, Name = "P1" });
                _parentList.Add(new ParentItem() { ID = 2, Name = "P2" });
                _parentList.Add(new ParentItem() { ID = 3, Name = "P3" });
                _subList.Add(new SubItem() { ID = 1, ParentID = 1, Name = "P1-S1" });
                _subList.Add(new SubItem() { ID = 2, ParentID = 1, Name = "P1-S2" });
                _subList.Add(new SubItem() { ID = 3, ParentID = 2, Name = "P2-S1" });
                _subList.Add(new SubItem() { ID = 4, ParentID = 2, Name = "P2-S2" });
                _subList.Add(new SubItem() { ID = 5, ParentID = 3, Name = "P3-S1" });
                _subList.Add(new SubItem() { ID = 6, ParentID = 3, Name = "P3-S2" });
            }
            public ActionResult Index()
            {
    
                TestViewModel model = new TestViewModel() { Parent = this._parentList, Sub = this._subList };
                ViewData["Parent"] = new SelectList(_parentList, "ID", "Name", 3);
                ViewData["Sub"] = new SelectList(_subList, "ID", "Name", 3);
                return View(model);
            }
         
            public JsonResult GetBZ(int parentId) 
            {
                var d = this._subList.FindAll(s => s.ParentID == parentId);
    
                return Json(d, JsonRequestBehavior.AllowGet);
    
            }

    Model:

    public class ParentItem
        {
            public int ID { get; set; }
            public string Name { get; set; }
        }
        public class SubItem
        {
            public int ParentID { get; set; }
            public int ID { get; set; }
            public string Name { get; set; }
        }
        public class TestViewModel
        {
            public List<ParentItem> Parent { get; set; }
            public List<SubItem> Sub { get; set; }
        }

    Hope that helps, thanks.

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 14, 2014 1:57 AM

All replies

  • User1208776063 posted

    Chris17

    I have a one to many relationship of faculty (one part) and department (many part).

    You can implement this cascading dropdownlist functionality in several ways. If you want easy and straightforward approach, you can refer to this link posted below

    Alternatively, you can also CascadingDropDownList extender in AJAXControlToolkit.

    Friday, April 11, 2014 9:46 AM
  • User2129316869 posted

    Chris17

    I have a one to many relationship of faculty (one part) and department (many part).

    You can implement this cascading dropdownlist functionality in several ways. If you want easy and straightforward approach, you can refer to this link posted below

    Alternatively, you can also CascadingDropDownList extender in AJAXControlToolkit.

    The first link was using asp instead of asp.net web pages

    The second was bouncing back to my topic

    the third used VB and am using C#

    Thanks again

    Friday, April 11, 2014 10:06 AM
  • User2129316869 posted

    The Links used ASP and Vb while am using ASP.Net web pages with Razor C#.

    Friday, April 11, 2014 10:14 AM
  • User1208776063 posted

    The Links used ASP and Vb while am using ASP.Net web pages with Razor C#.

    You could have mentioned the programming language and the framework you are using. You should be able to find plenty of examples for "cascading dropdownlists".

    http://www.mikesdotnetting.com/Article/196/WebMatrix-jQuery-Cascading-Dropdown-Lists

    http://blogs.msdn.com/b/rickandy/archive/2012/01/09/cascasding-dropdownlist-in-asp-net-mvc.aspx

    You should probably follow those examples and try implementing the functionality in your application

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, April 11, 2014 10:35 AM
  • User-417640953 posted

    The Links used ASP and Vb while am using ASP.Net web pages with Razor C#.

    Hi Chris17,

    Thanks you post the issue to asp.net forum.

    For using the cascade dropdownlist in the asp.net mvc razor view, please check below demo made for you.

    View:

    <script type="text/javascript">
       
    $(function(){
            $("#Parent").change(function(){ 
                var selec = $(this).val();   
                var url = "@Url.Action("GetBZ")"; 
                $("#Sub").find("option").remove();  
                $.getJSON(url, { 'parentId': selec }, function (data) {  
                    $.each(data, function (i, item) {
                        $("<option></option>").val(item["ID"]).text(item["Name"]).appendTo($("#Sub"));
                    }); 
                });   
            });
        });
    </script>
    <div>
    @Html.DropDownList("Parent","Select")
    @Html.DropDownList("Sub", "Select")
    </div>
    

    Control action:

    public class HomeController : Controller
        {
            List<ParentItem> _parentList = new List<ParentItem>();
            List<SubItem> _subList = new List<SubItem>();
    
            //
            // GET: /Home/
    
            public HomeController()
            {
               //test data............
                _parentList.Add(new ParentItem() { ID = 1, Name = "P1" });
                _parentList.Add(new ParentItem() { ID = 2, Name = "P2" });
                _parentList.Add(new ParentItem() { ID = 3, Name = "P3" });
                _subList.Add(new SubItem() { ID = 1, ParentID = 1, Name = "P1-S1" });
                _subList.Add(new SubItem() { ID = 2, ParentID = 1, Name = "P1-S2" });
                _subList.Add(new SubItem() { ID = 3, ParentID = 2, Name = "P2-S1" });
                _subList.Add(new SubItem() { ID = 4, ParentID = 2, Name = "P2-S2" });
                _subList.Add(new SubItem() { ID = 5, ParentID = 3, Name = "P3-S1" });
                _subList.Add(new SubItem() { ID = 6, ParentID = 3, Name = "P3-S2" });
            }
            public ActionResult Index()
            {
    
                TestViewModel model = new TestViewModel() { Parent = this._parentList, Sub = this._subList };
                ViewData["Parent"] = new SelectList(_parentList, "ID", "Name", 3);
                ViewData["Sub"] = new SelectList(_subList, "ID", "Name", 3);
                return View(model);
            }
         
            public JsonResult GetBZ(int parentId) 
            {
                var d = this._subList.FindAll(s => s.ParentID == parentId);
    
                return Json(d, JsonRequestBehavior.AllowGet);
    
            }

    Model:

    public class ParentItem
        {
            public int ID { get; set; }
            public string Name { get; set; }
        }
        public class SubItem
        {
            public int ParentID { get; set; }
            public int ID { get; set; }
            public string Name { get; set; }
        }
        public class TestViewModel
        {
            public List<ParentItem> Parent { get; set; }
            public List<SubItem> Sub { get; set; }
        }

    Hope that helps, thanks.

    Best Regards!

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Monday, April 14, 2014 1:57 AM