In Update view, the dropdown selected value is not set if the selected field is nullable in viewmodel

Question

Say for example my viewmodel is as follows:

public class MyViewModel
{
    public int? SelectedCategoryId { get; set; }
    public IEnumerable<SelectListItem> Categories { get; set; } 
}

And the view is as follows:

 @model MyViewModel

    @Html.DropDownListFor(
        x => x.SelectedCategoryId,
        Model.Categories,
        "--Select--"
    )

In the update view, if the model has a value for the SelectedCategoryId it is not shown selected in the dropdownlist. The "--Select--" is always selected. The same logic works for other dropdownlist if their Id field are not nullable.

Any suggestions?

Answer 1

In the end I used jquery to select the dropdown if the Id has a value.

In the view, I create a hidden field (don't use the @Html.HiddenFor)

 @Html.Hidden("SelectedCategorySubId", Model.SelectedCategorySubId.GetValueOrDefault(), new { @id = "hdnSelectedCategorySubId" })

In JS file,in the call back method of ajax call (to load the drop down),after adding data to dropdown, get the hidden field value and then select that value in dropdown.

 $.ajax({
            type: 'POST',
            url: "GetSubCategory",
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            data: JSON.stringify(param),
            success: function (subCategoryList) {

                if (subCategoryList != null && subCategoryList != '') {

                    $("#SelectedCategorySubId").append('<option>--- Select ---</option>');
                    $.each(subCategoryList, function (i, subCategory) {

                        $("#SelectedCategorySubId").append($('<option/>', {
                            value: subCategory.Value,
                            text: subCategory.Text
                        }));
                    });

                 //Set selected value from hidden field
                    var selectedCategorySubId = $("#hdnSelectedCategorySubId").val();
                  // alert("Sub Cat" + selectedCategorySubId);
                    $("#SelectedCategorySubId").val(selectedCategorySubId);

                }//end if
                else {
                    //alert("empty subcategoryList " + subCategoryList);
                    $("#tdSubCategory").hide();

                }
            }

And update the hidden field if the dropdown changes

//Update hidden field, if cat changes
$("#SelectedCategorySubId").change(function () {
    $("#hdnSelectedCategorySubId").val($(this).val());
});

I hope this helps someone.

Answer 2

Suggesting you a simple approach.
If you are using IEnumerable <SelectListItem> then there is no need to user different variable for Maintaining Selected value.. Just mark your category selected when you are populating Categories SelectList.

SelectListItem category = new SelectListItem
            {
                Text = "CategoryId",
                Value = "CatagoryName",
                Selected = true
            };

Categories.Add(category);

public class MyViewModel
{
    public IEnumerable<SelectListItem> Categories { get; set; } 
}  

..............................................

@model MyViewModel

@Html.DropDownList("Name",
    Model.Categories,
    "--Select--"
)