Select dropdown value after post

Question

I was hoping for some guidance on an issue I am having with preserving the value in a dropdownlist after post (razor)

I have a simple page:

    @model testContingency.Models.ListByWardDD

@{
    ViewBag.Title = "TestDropDowns";
}

<h2>TestDropDowns</h2>

<div>

    @Html.DropDownList("HospModel", Model.Hospital,  new { @onchange = "ChangeHospital(this.value)" }) 
    @Html.DropDownList("WardModel", Model.Wards)

    <script type="text/javascript">

        function ChangeHospital(val) {
            window.location.href = "/PatientListByWardDD/TestDropDowns?hospID=" + val;
        }



    </script>

</div>

here's the controller

public ActionResult TestDropDowns(int? hospID)
    {
        PASInpatientRepository pasRepo = new PASInpatientRepository();
        var returnModel = new ListByWardDD();     
        var HospitalData = pasRepo.GetPatientHospitalsEnum();
        returnModel.Hospital = pasRepo.GetHopspitalListItems(HospitalData);
        var WardData = pasRepo .GetPatientWardsEnum(hospID);
        returnModel.Wards = pasRepo.GetWardListItems(WardData);
        ViewBag.HospSearch = hospID;
        return View(returnModel);
    }

In the controller PASInpatientRepository() communicates with a cache database. It passes back public IEnumerable < SelectListItem > GetHopspitalListItems. It calls stored procedures written within a cache database (same as sql stored procedures in essence). This is all working fine in its own crude way.

The issue I am having is that when I select the dropdownlist @Html.DropDownList("HospModel", Model.Hospital, new { @onchange = "ChangeHospital(this.value)" }) and the controller is called to refresh the Wards dropdown, I want to preserve the value I have selected in the hospital dropdown. I have tried a few different ways, but I admit, I'm a bit stuck. Most examples I found are for strongly typed.

As I mentioned, I'm new to MVC, but any advice on how to solve this issue, or suggestions on improving my code are greatly appreciated.

Answer 1

So I'm not sure what the Hospital property looks like but I'll make the assumption that each one has a unique ID. Furthermore to bind the posted data to the view model you'll need to use forms in your view. To create the drop down list use the DropDownListFor-Helper. This way the data will be bound back to your Model after submitting the form.

So your view could look something like this

@model testContingency.Models.ListByWardDD

@{
    ViewBag.Title = "TestDropDowns";
}

<h2>TestDropDowns</h2>

<div>
    @using (Html.BeginForm("TestDropDowns", "YourController", FormMethod.Post))
    {
        @Html.DropDownListFor(x => x.HospitalID, Model.Hospital)
        @Html.DropDownListFor(x => x.WardID, Model.Wards)
        <input type="submit" value="send" />
}    
</div>

Your ViewModel testContigency.Models.ListByWardDD must have at least the following properties

public class ListByWardDD {
    public int HostpitalID { get;set; }
    // the value of the SelectListItem-objects should be the hospital ID
    public IEnumerable<SelectListItem> Hospital { get;set; }

    public int WardID { get;set; }
    // the value of the SelectListItem-objects should be the ward ID
    public IEnumerable<SelectListItem> Wards { get;set; }
}

Once you post the form (for simplicity I added a button to send the form and left the javascript part out) the method TestDropDowns of your controller (which you need to fill in the BeginForm-Helper) will be called. That method expects expects an object of type ListByWardDD as a parameter and the framework will automatically populate the values for you.

[HttpPost]
public ActionResult TestDropDowns(ListByWardDD viewModel) {
    // your code here, viewModel.HospitalID should contain the selected value
}

Note: After submitting the form the properties Hospital and Wards will be empty. If you need to display the form again, you need to repopulate those properties. Otherwise your dropdown lists are empty.

I tried my best to post valid code but I did not compile or test it.