I want to change the category list depending on the department selected. The code below does that fine on the create page, my issue is that on my edit page it does not show the correct values from the database. I know how to correct this using ViewBags from
the controller, but I don't know to dynamically change the selection of the category depending on the value of the department using viewbags. Does that make sense?
my issue is that on my edit page it does not show the correct values from the database. I know how to correct this using ViewBags from the controller, but I don't know to dynamically change the selection of the category depending on the value of the department
using viewbags. Does that make sense?
It is not clear why the design works in one page but not another.
The create page does not have any database values yet so there is no data. I am choosing new values. The edit page already has database values but they are not populating in the droplist. It is populating the first selection of the list.
The create page does not have any database values yet so there is no data. I am choosing new values. The edit page already has database values but they are not populating in the droplist. It is populating the first selection of the list.
Is your question how to populate the selected option stored in a table somewhere? Keep in mind we cannot see your tables, models, code, or anything related to populating the edit page.
I have 2 selections on my edit view. Let's say I am editing a database record and the database stored values are Department = "Sales" and Category = "RVs"
When the edit view opens the Department Selection list shows "IT" and the Category Selection list shows "N/A", the first selection: <option id="IT" value="N/A">N/A</option>.
How do I do 2 things:
How can I display the correct database values on the edit view. In this example the selection values for Department would be "Sales" and the value selected for Category would be "RVs"
When editing when I select the drop list for Category how can I get only the categories for the selected Department to show.
Maybe I can't do it this way. I am not sure.
Here is the code from the edit page for 2 selections.
Dude, your code makes little sense. You are sharing hard coded selects, Department and Category, and an Action that queries a Documents table. how is the community supposed to figure out the intention?
Baze72
How can I display the correct database values on the edit view. In this example the selection values for Department would be "Sales" and the value selected for Category would be "RVs"
I don't understand the problem. If you are editing a record then you already have the Department ID and the Category ID.
Baze72
When editing when I select the drop list for Category how can I get only the categories for the selected Department to show.
I have no idea. You still ave not provided enough information to figure out how Department is related to Category. but you should have both IDs so you should be able to execute a query to get Department -> Categories.
public class Person
{
[Key]
public int id { get; set; }
public string name { get; set; }
public string number { get; set; }
public string Department { get; set; }
public string Category { get; set; }
}
Controller
public ActionResult Edit(int? id)
{
if (id == null)
{
return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
}
var departmentlst = new List<string>();
var departQry = from p in db.People orderby p.Department select p.Department;
departmentlst.AddRange(departQry.Distinct());
ViewBag.department = departmentlst;
Person person = db.People.Find(id);
if (person == null)
{
return HttpNotFound();
}
return View(person);
}
View
<div class="form-group">
@Html.LabelFor(model => model.Department, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<select name="Department" id="Department" onchange="getcategory(this.value)">
@foreach (var item in ViewBag.department)
{
if (item != Model.Department)
{
<option id="@item" value="@item">@item</option>
}
else
{
<option value="@Model.Department" selected="selected">@Model.Department</option>
}
}
</select>
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Category, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
<select name="Category" id="Category">
<option value="@Model.Category">@Model.Category</option>
</select>
</div>
</div>
<script>
var data = new Array();
data["IT"] = ["N/A"];
data["Sales"] = ["N/A", "Boats", "RVs"];
function getcategory(index) {
var obj = document.getElementById("Category");
var cate;
obj.options.length = 0;
cate = data[index];
for (var i = 0; i < cate.length; i++) {
obj.options[i] = new Option(cate[i], cate[i]);
}
}
</script>
Member
26 Points
120 Posts
Fill drop down list on selection of another drop down list
Jul 23, 2020 02:40 PM|Baze72|LINK
I want to change the category list depending on the department selected. The code below does that fine on the create page, my issue is that on my edit page it does not show the correct values from the database. I know how to correct this using ViewBags from the controller, but I don't know to dynamically change the selection of the category depending on the value of the department using viewbags. Does that make sense?
Thanks!
<div class="form-group"> @Html.LabelFor(model => model.Department, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> <select name="Department" id="Department"> <option value="IT">IT</option> <option value="Sales">Sales</option> </select> </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Catagory, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> <select name="Catagory" id="Catagory"> <option id="IT" value="N/A">N/A</option> <option id="Sales" value="N/A">N/A</option> <option id="Sales" value="Boats">Boats</option> <option id="Sales" value="RVs">RVs</option> <option> </select> </div> </div>All-Star
49111 Points
21731 Posts
Re: Fill drop down list on selection of another drop down list
Jul 23, 2020 03:18 PM|mgebhard|LINK
It is not clear why the design works in one page but not another.
Member
26 Points
120 Posts
Re: Fill drop down list on selection of another drop down list
Jul 23, 2020 03:42 PM|Baze72|LINK
The create page does not have any database values yet so there is no data. I am choosing new values. The edit page already has database values but they are not populating in the droplist. It is populating the first selection of the list.
All-Star
49111 Points
21731 Posts
Re: Fill drop down list on selection of another drop down list
Jul 23, 2020 03:49 PM|mgebhard|LINK
Is your question how to populate the selected option stored in a table somewhere? Keep in mind we cannot see your tables, models, code, or anything related to populating the edit page.
Member
26 Points
120 Posts
Re: Fill drop down list on selection of another drop down list
Jul 23, 2020 04:10 PM|Baze72|LINK
I have 2 selections on my edit view. Let's say I am editing a database record and the database stored values are Department = "Sales" and Category = "RVs"
When the edit view opens the Department Selection list shows "IT" and the Category Selection list shows "N/A", the first selection: <option id="IT" value="N/A">N/A</option>.
How do I do 2 things:
Maybe I can't do it this way. I am not sure.
Here is the code from the edit page for 2 selections.
<div class="form-group"> @Html.LabelFor(model => model.Department, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> <select name="Department" id="Department"> <option value="IT">IT</option> <option value="Sales">Sales</option> </select> </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Catagory, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> <select name="Catagory" id="Catagory"> <option id="IT" value="N/A">N/A</option> <option id="Sales" value="N/A">N/A</option> <option id="Sales" value="Boats">Boats</option> <option id="Sales" value="RVs">RVs</option> <option> </select> </div> </div>Here is the controller:
public ActionResult EditDocument(int id) { var document = db.Documents.Find(id); if (document == null) { return HttpNotFound(); } return View(document); }All-Star
49111 Points
21731 Posts
Re: Fill drop down list on selection of another drop down list
Jul 23, 2020 04:52 PM|mgebhard|LINK
Dude, your code makes little sense. You are sharing hard coded selects, Department and Category, and an Action that queries a Documents table. how is the community supposed to figure out the intention?
I don't understand the problem. If you are editing a record then you already have the Department ID and the Category ID.
I have no idea. You still ave not provided enough information to figure out how Department is related to Category. but you should have both IDs so you should be able to execute a query to get Department -> Categories.
Participant
910 Points
321 Posts
Re: Fill drop down list on selection of another drop down list
Jul 24, 2020 09:30 AM|YihuiSun|LINK
Hi Baze72,
Model
public class Person { [Key] public int id { get; set; } public string name { get; set; } public string number { get; set; } public string Department { get; set; } public string Category { get; set; } }Controller
public ActionResult Edit(int? id) { if (id == null) { return new HttpStatusCodeResult(HttpStatusCode.BadRequest); } var departmentlst = new List<string>(); var departQry = from p in db.People orderby p.Department select p.Department; departmentlst.AddRange(departQry.Distinct()); ViewBag.department = departmentlst; Person person = db.People.Find(id); if (person == null) { return HttpNotFound(); } return View(person); }View
<div class="form-group"> @Html.LabelFor(model => model.Department, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> <select name="Department" id="Department" onchange="getcategory(this.value)"> @foreach (var item in ViewBag.department) { if (item != Model.Department) { <option id="@item" value="@item">@item</option> } else { <option value="@Model.Department" selected="selected">@Model.Department</option> } } </select> </div> </div> <div class="form-group"> @Html.LabelFor(model => model.Category, htmlAttributes: new { @class = "control-label col-md-2" }) <div class="col-md-10"> <select name="Category" id="Category"> <option value="@Model.Category">@Model.Category</option> </select> </div> </div> <script> var data = new Array(); data["IT"] = ["N/A"]; data["Sales"] = ["N/A", "Boats", "RVs"]; function getcategory(index) { var obj = document.getElementById("Category"); var cate; obj.options.length = 0; cate = data[index]; for (var i = 0; i < cate.length; i++) { obj.options[i] = new Option(cate[i], cate[i]); } } </script>Here is the result.
Best regards,
Yihui Sun