ASP.Net MVC 中的视图中未显示级联下拉列表

Question

显示父级下拉列表，但不显示级联下拉列表。

我有一个父下拉列表和一个级联下拉列表。菜单选择会触发操作方法以填充父级下拉列表和 returns 视图。父级下拉列表显示正确。

在父下拉列表中进行选择时，将调用 jQuery 函数来触发操作方法，以根据父下拉列表中的选择值填充级联下拉列表.然后返回带有父级和级联下拉列表的视图。但是，显示的是父级下拉列表，而不是级联下拉列表。

这表明视图模型在返回视图之前填充了两个下拉列表。显示的是级联下拉列表，因此我可以看到它有数据。

这显示级联下拉列表未填充。

这是视图 - 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>

这是视图模型 - 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; }
    }
}

这是父级下拉列表的控制器操作方法：

    [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);
    }

级联下拉列表的控制器操作方法如下：

    [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);
    }

Answer 1

在基于 ajax 的通话中工作时。我需要 return 方法中的列表 - 而不是视图。我需要在 jQuery 中回写一个回调以获取该响应，然后通过 id 选择器填充 jQuery 中的下拉列表。

ASP.Net MVC 中的视图中未显示级联下拉列表

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

asp.net-mvc

dropdown