下拉列表没有工作MVC C＃Razor

Question

I have a page that has 3 dropdowns, Clients, Projects and Facilities. I am able to load the values into the dropdowns from database when the page loads first time.

Changing the selected value in Clients should load new projects based on the selected clients, same way changing the selected project should load new facilities that belongs to selected project.

When I change the Client value, the projects and facilities are loading fine, even thought the selected client is not shown in the dropdown. But when I change the projects or facilities nothing seems to happen, all selected values return 0s. Here is the cshtml code

@using (Html.BeginForm("Index", "Home")) {
    @Html.DropDownListFor(x => x.SelectedClientId, new SelectList(Model.Clients, "PrimaryKey", "Name", Model.SelectedClientId), "--Select Client--", new { onchange = "this.form.submit();" });
}
@using (Html.BeginForm("Index", "Home")) {
    @Html.DropDownListFor(y => y.SelectedProjectId, new SelectList(Model.Projects, "PrimaryKey", "Name", Model.SelectedProjectId), "--Select Project--", new { onchange = "this.form.submit();" })
}
@using (Html.BeginForm("Index", "Home")) {
    @Html.DropDownListFor(z => z.SelectedFacilityId, new SelectList(Model.Facilities, "PrimaryKey", "Name", Model.SelectedFacilityId), "--Select Facility--", new { onchange = "this.form.submit();" })
}

Here is the IndexViewModel

public class IndexViewModel {
    public int SelectedClientId { get; set; }
    public BusinessEntityCollection<Client> Clients { get; set; }

    public int SelectedProjectId { get; set; }
    public BusinessEntityCollection<Project> Projects { get; set; }

    public int SelectedFacilityId { get; set; }
    public BusinessEntityCollection<Facility> Facilities { get; set; }
}

Here is the HomeController

public ActionResult Index(IndexViewModel model) {

BusinessEntityCollection<Client> clients = new BusinessEntityCollection<Client>();
BusinessEntityCollection<Project> projects = new BusinessEntityCollection<Project>();
BusinessEntityCollection<Facility> facilities = new BusinessEntityCollection<Facility>();

clients = ClientController.GetClients();

if (Request.HttpMethod == "POST") {
    Session["SelectedClientId"] = model.SelectedClientId;
    Session["SelectedProjectId"] = model.SelectedProjectId;
    Session["SelectedFacilityId"] = model.SelectedFacilityId;

    if (Session["SelectedClientId"] == null) {
        projects.Add(new Project() { Name = "None", PrimaryKey = 0 });
    }
    else {
        if (Convert.ToInt32(Session["SelectedClientId"]) == 0) {
            projects = ProjectController.GetUserProjects(clients[0].PrimaryKey);
            Session["SelectedClientId"] = clients[0].PrimaryKey;
        }
        else
            projects = ProjectController.GetUserProjects(Convert.ToInt32(Session["SelectedClientId"]));
    }

    if (Session["SelectedProjectId"] == null) {
        facilities.Add(new Facility() { Name = "None", PrimaryKey = 0 });
    }
    else {
        if (Convert.ToInt32(Session["SelectedProjectId"]) != 0) 
            facilities = FacilityController.GetFacilitiesByProject(Convert.ToInt32(Session["SelectedProjectId"]));
    }
}

model.Clients = clients; model.Projects = projects; model.Facilities = facilities;
return View(model);

}

I am trying to save the selected values into session variables and retrieving them, but it doesn't seem to work.

Answer 1

You need a single form for all three dropdowns. Not one form for each.

@using (Html.BeginForm("Index", "Home")) {
    @Html.DropDownListFor(x => x.SelectedClientId, new SelectList(Model.Clients, "PrimaryKey", "Name", Model.SelectedClientId), "--Select Client--", new { onchange = "this.form.submit();" });

    @Html.DropDownListFor(y => y.SelectedProjectId, new SelectList(Model.Projects, "PrimaryKey", "Name", Model.SelectedProjectId), "--Select Project--", new { onchange = "this.form.submit();" })

    @Html.DropDownListFor(z => z.SelectedFacilityId, new SelectList(Model.Facilities, "PrimaryKey", "Name", Model.SelectedFacilityId), "--Select Facility--", new { onchange = "this.form.submit();" })
}