Search code examples
asp.net-mvcdropdown

Cascading drop down list not showing in the view in ASP.Net MVC

The parent drop down list is showing, but NOT the cascading drop down list.

I have a parent drop down list and a cascading drop down list. A menu selection fires off the action method to populate the parent drop down list and returns the view. The parent drop down list is shown properly.

enter image description here

When a selection is made in the parent drop down list, a jQuery function is called to fire off an action method to populate the cascading drop down list based upon the selection value from the parent drop down list. The view is then returned with both the parent and cascading drop down lists. However, the parent drop down list is showing, but NOT the cascading drop down list.

This shows that the view model has both drop down lists populated prior to returning to the view. What's showing is the cascading drop down list so I can see that it has data.

enter image description here

This shows the cascading drop down list NOT populated.

enter image description here enter image description here enter image description here

Here's the view - BlogPublishedSelectionCriteria:

@model GbngWebClient.Models.BlogPublishedSelectionCriteriaVM

<h2 class="page-header">Blog Selection Criteria</h2>

@{
    Layout = "~/Views/Shared/_LayoutUser.cshtml";
}


@if (ViewBag.errormessage != null)
{
    <p class="alert alert-danger" id="errorMessage">@ViewBag.errormessage</p>
}

@using (Html.BeginForm("GetBlog", "BlogPublishedController", FormMethod.Post, new { id = "formId" }))
{
    <div style="margin-top:10px;"></div>

    <div class="panel panel-default toppanel">
    <br />
    @Html.ValidationSummary(true, "Please fix the errors below.", new { @class = "alert alert-danger" })

    <div class="panel-body">
        <div class="row">
            @* Parent dropdown list. *@
            <div class="col-md-3">
                @Html.LabelFor(model => model.BlogCategoryId, new { @class = "manadatory" })
                @Html.DropDownListFor(m => m.BlogCategoryId, new SelectList(Model.BlogPublishedCategoryList, "BlogCategoryId", "BlogCategoryDescr", Model.BlogCategoryId), "--- Select ---", new { @class = "form-control", @id = "ddlBlogCategory" })
                @Html.ValidationMessageFor(m => m.BlogCategoryId, "", new { @class = "text-danger" })
            </div>
        </div>
        <br />

        @* Cascading Dropdown list. *@
        @* - Populated by a jQuery call to the controller once a selection from the parent dropdown list is made. *@
        <div class="row">
            <div class="col-md-3">
                @Html.LabelFor(model => model.BlogId, new { @class = "manadatory" })
                @Html.DropDownListFor(m => m.BlogId, new SelectList(Model.BlogPublishedByCategoryIdList, "BlogId", "BlogTitle", Model.BlogId), "--- Select ---", new { @class = "form-control", @id = "ddlBlog" })
                @Html.ValidationMessageFor(m => m.BlogId, "", new { @class = "text-danger" })
            </div>
        </div>
        <br />

        <div style="margin-top:10px;"></div>
    </div>
</div>

<div class="panel-body">
    <div class="row">
        <div class="form-group">
            <div class="col-md-3">
                @* Submit button. *@
                <input type="submit" value="Get the Selected Blog" class="btn btn-primary" />
            </div>
        </div>
    </div>
</div>

@Html.AntiForgeryToken()
}

@Scripts.Render("~/bundles/jqueryval")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@Styles.Render("~/Content/css") 

<script type="text/javascript">
$(document).ready(function () {
    // When a selection in the parent drop down list is made, it calls the controller's method and 
  loads the cascading dropdown list.
    $('#ddlBlogCategory').change(function () {
        $.ajax({
            type: "post",
            url: "/BlogPublished/LoadCascadingDropdownBlogsPublishedByCategoryId",
            data: { blogCategoryId: $('#ddlBlogCategory').val() }
        });
    });
});
</script>

Here's the view model - BlogPublishedSelectionCriteriaVM:

using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;

namespace GbngWebClient.Models
{
    public class BlogPublishedSelectionCriteriaVM
    {
        public BlogPublishedSelectionCriteriaVM()
        {
            this.BlogPublishedCategoryList = new List<BlogPublishedCategory>();
            this.BlogPublishedByCategoryIdList = new List<BlogPublishedByCategoryId>();
        }

        // Id for the main drop down list.
        [Required]
        [Display(Name = "Categories of Published Blogs")]
        public int BlogCategoryId { get; set; }

        // Id for the cascading drop down list.
        [Required]
        [Display(Name = "Published Blogs for the Selected Category")]
        public int BlogId { get; set; }

        // For the drop down lists.
        public List<BlogPublishedCategory> BlogPublishedCategoryList { get; set; }
        public List<BlogPublishedByCategoryId> BlogPublishedByCategoryIdList { get; set; }
    }
}

Here's the controller action method for the parent drop down list:

    [HttpGet]
    public async Task<ActionResult> LoadDropdownBlogCategorysInBlogsPublished()
    {
        BlogPublishedSelectionCriteriaVM blogPublishedSelectionCriteriaVM = new BlogPublishedSelectionCriteriaVM();
        ArgsToPassToApi argsToPassToApi = new ArgsToPassToApi();

        try
        {
            List<BlogPublishedCategory> blogPublishedCategoryList = new List<BlogPublishedCategory>();

            // Get all the drop down data into a list.
            blogPublishedCategoryList = await GetBlogCategorysInBlogsPublished(Session["UserName"].ToString());

            if (blogPublishedCategoryList.Count != 0)
            {
                // For the list session variable.
                BlogPublishedCategoryInfo blogPublishedCategoryInfo = new BlogPublishedCategoryInfo();
                blogPublishedCategoryInfo.BlogPublishedCategoryInfoList = new List<BlogPublishedCategoryInfo>();

                // Load the drop down list in the view model.
                foreach (var hold in blogPublishedCategoryList)
                {
                    BlogPublishedCategory blogPublishedCategory = new BlogPublishedCategory
                    {
                        BlogCategoryId = hold.BlogCategoryId,
                        BlogCategoryDescr = hold.BlogCategoryDescr,
                    };

                    blogPublishedSelectionCriteriaVM.BlogPublishedCategoryList.Add(blogPublishedCategory);

                    // Used to populate the list session variable - add to BlogPublishedCategoryInfoList.
                    blogPublishedCategoryInfo.BlogPublishedCategoryInfoList.Add(new BlogPublishedCategoryInfo { BlogCategoryId = blogPublishedCategory.BlogCategoryId, BlogCategoryDescription = blogPublishedCategory.BlogCategoryDescr });
                }
                
                // Populate the list session variable.
                Session["BlogPublishedCategoryList"] = blogPublishedCategoryInfo;
            }
        }
        catch (Exception ex1)
        {
            exceptionMessage = "Server error on getting the blog categorys in blogs published list. Please contact the administrator.";

            try
            {
               Error handling....
            }
            catch (Exception ex2)
            {
                ViewBag.errormessage = "Failure in ProcessClientError. Exception error: " + ex2.Message + ". Original error: " + exceptionMessage;
            }
        }

        return View("BlogPublishedSelectionCriteria", blogPublishedSelectionCriteriaVM);
    }

Here's the controller action method for the cascading drop down list:

    [HttpPost]
    public async Task<ActionResult> LoadCascadingDropdownBlogsPublishedByCategoryId(int blogCategoryId)
    {
        BlogPublishedSelectionCriteriaVM blogPublishedSelectionCriteriaVM = new BlogPublishedSelectionCriteriaVM();

        // 1st: reload the parent dropdown list, get the previously populated list session variable.
        // Cast.
        BlogPublishedCategoryInfo blogPublishedCategoryList = (BlogPublishedCategoryInfo)Session["BlogPublishedCategoryList"];
        
        // Load the drop down list in the view model.
        foreach (var hold in blogPublishedCategoryList.BlogPublishedCategoryInfoList)
        {
            // Instantiate a new BlogPublishedCategory.
            BlogPublishedCategory blogPublishedCategory = new BlogPublishedCategory
            {
                BlogCategoryId = hold.BlogCategoryId,
                BlogCategoryDescr = hold.BlogCategoryDescription,
            };

            // Add to the view model's list.
            blogPublishedSelectionCriteriaVM.BlogPublishedCategoryList.Add(blogPublishedCategory);
        }

        blogPublishedSelectionCriteriaVM.BlogCategoryId = blogCategoryId;
        ArgsToPassToApi argsToPassToApi = new ArgsToPassToApi();

        try
        {
            // 2nd: Get the cascading drop down data by 'category id' for the BlogPublishedByCategoryId List.

            List<BlogPublishedByCategoryId> blogPublishedByCategoryIdList = new List<BlogPublishedByCategoryId>();

            // Get all the cascading drop down data into a list. Passing in the selected 'category id'.
            blogPublishedByCategoryIdList = await GetBlogsPublishedsByCategoryId(blogCategoryId, Session["UserName"].ToString());

            if (blogPublishedByCategoryIdList.Count != 0)
            {
                // Load the cascading drop down list in the view model.
                foreach (var hold in blogPublishedByCategoryIdList)
                {
                    BlogPublishedByCategoryId blogPublishedByCategoryId = new BlogPublishedByCategoryId
                    {
                        BlogId = hold.BlogId,
                        BlogTitle = hold.BlogTitle,
                    };

                    blogPublishedSelectionCriteriaVM.BlogPublishedByCategoryIdList.Add(blogPublishedByCategoryId);
                }
            }
        }
        catch (Exception ex1)
        {
            exceptionMessage = "Server error on getting the blogs publisheds by category id list. Please contact the administrator.";

            try
            {
               Error handling....
            }
            catch (Exception ex2)
            {
                ViewBag.errormessage = "Failure in ProcessClientError. Exception error: " + ex2.Message + ". Original error: " + exceptionMessage;
            }
        }

        // Return the Views\BlogPublished\BlogPublishedSelectionCriteria.cshtml - with the model class.
        return View("BlogPublishedSelectionCriteria", blogPublishedSelectionCriteriaVM);
    }
Solution

  • While working in an ajax based call. I need to return the list from the method - not the view. I need to write a call back in jQuery to get that response and then by the id selector I populate the dropdown in jQuery.