TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
First Last
NA
648
71.5k
Cascading drop down list not showing in the view in ASP.Net MVC
Aug 6 2020 4:36 PM
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.
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.
This shows the cascading drop down list NOT populated.
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's 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's 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);
}
Reply
Answers (
2
)
I can not able to update one column
What is your opinion about ASP.NET Core right now?