MVC 4 dropdownlist in edit form doesnt give the correct value after edit command from grid

Question

This is very weird and i know that this worked in the past. I must have broken it with something else but I really don't know what.

I'm a .NET programmer with very little MVC knowledge and it seems that I'm missing some key things here , that mvc does in the background.

Let met explain it as best as I can.

I have a view, which contains this :

<tbody>
        @foreach (var experienceViewModel in this.ViewData.Model)
        {
            var id = "GetExperienceDetail" + experienceViewModel.Id; 

            <tr>
                <td>@experienceViewModel.Assessment</td>
                <td>@experienceViewModel.CompanyName</td>
                <td>@experienceViewModel.Description</td>
                <td>@experienceViewModel.StartDate</td>
                <td>@experienceViewModel.EndDate</td>
                <td width="20"><a href="#" id="@id" onclick="openDetail('@id')" data-          controller="Person" data-action="ExperienceDetail" data-key="@experienceViewModel.Id" data-person="@experienceViewModel.PersonId" data-form="ExperienceDetail" title="Wijzig" class="btn btn-xs"><i class="glyphicon glyphicon-pencil"></i></a></td>
                <td width="20"><a id="@Html.Raw(id + "delete")" class="confirm-delete" data-keyname="experienceId" data-textfield="@string.Concat(experienceViewModel.Assessment, " | ", experienceViewModel.Description)" data-link="@Html.Raw(id + "delete")" data-key="@experienceViewModel.Id" data-controller="Experience" data-action="ExperienceDelete" href="#" title="Verwijder"><i class="glyphicon glyphicon-remove"></i></a></td>

            </tr>                    
        }

Its not the last tr but the one before that. The one with openDetail. This function will be called from the js web.js which I'm gonna paste below:

function openDetail(link) {
var $link = $('#' + link);

debugger;

var controller = $link.attr('data-controller');
var action = $link.attr('data-action');
var id = $link.attr('data-key');
var form = $link.attr('data-form');
var modelName = $link.attr('data-model');

//default person
if (modelName == null)
    modelName = "person";

modelName = modelName.toLowerCase();

var valueModel = $link.attr('data-' + modelName);




var json = "{\"id\" : " + id + ", \"" + modelName + "\"" + " : " + valueModel + "}";
var url = '/' + controller + '/' + action;

$.ajax({
    url: '/' + controller + '/' + action,
    type: 'POST', // not sending json over url
    data: json,
    contentType: "application/json; charset=utf-8", 
    success: function (data) {

        $('#partialoveview').html(data);

        if (typeof form !== 'undefined' && form !== false) {
            $.validator.unobtrusive.parse($('#' + form));
            $("span.field-validation-valid").hide();
            $('.label-error').hide();
        }

        loadForm();


    },
    error: function (data) {

    }
});

This function does the job, the only thing that is going wrong is that dropdownlist, and specifically THAT one cause there is another one, below it , and this has the correct behavior of selecting the value that it has ...

This will go to the Person controller with the action ExperienceDetail(int id, int person)

        [HttpPost, OutputCacheAttribute(VaryByParam = "*", Duration = 0, NoStore = true)]
    public PartialViewResult ExperienceDetail(int id, int person)
    {
        var experienceViewModel = new ExperienceViewModel { AssessmentList = this.AssessmentList(), CompanyList = this.CompanyList(), PersonId = person };


        if (id > 0)
        {
            Data.Model.Experience experience = this._experienceRepository.GetExperienceDetail(id);
            experienceViewModel = new ExperienceViewModel(experience) { AssessmentList = this.AssessmentList(), CompanyList = this.CompanyList()};
        }

        return this.PartialView("_ExperienceDetailPartial", experienceViewModel);
    }

this.CompanyList gets a select list from the basecontroller When this view is returned , i cant see that this select list has a selectedvalue. But then again, the ddl which is working has also a null at the selectedvalue so this isn't responsable for setting the correct value after edit I guess?

Then the detail screen , which is put into a div from the js: I only put in the beginning with first the company drop down ( NOT WORKING ) and then the assessment ddl ( WORKING )

@model Emenka.HumanResources.Application.Models.ExperienceViewModel

@using (Html.BeginForm("UpdateExperienceDetail", "Person", FormMethod.Post, new { @id =    "ExperienceDetail", @role = "form", data_action = "ExperienceOverview", data_controller =    "Person" }))
{
 @Html.HiddenFor(m => m.Id)
 @Html.HiddenFor(m => m.PersonId)

 <fieldset>

<legend>Ervaring</legend>

<div class="row">

  <div class="col-md-5">

    <div class="form-group">
      @Html.LabelFor(m => m.CompanyId, new { @class = "control-label" })
      <div class="input-group col-xs-9">
        @Html.DropDownListFor(m => m.CompanyId, ViewData.Model.CompanyList,   string.Empty, new { @class = "no-focus form-control" })
        @*&nbsp;@Html.ValidationMessageFor(m => m.CompanyId, " ")*@
        <a href="#modalAdd" role="button" class="input-group-addon btnModal" data-  toggle="modal" data-target="#modalAdd" data-controller="Person" data-action="CreateCompany"   data-controlid="CompanyId" data-modaltype="Company">...</a>
      </div>
    </div>

    <div class="form-group">
      @Html.LabelFor(m => m.AssessmentId, new { @class = "control-label" })
      @Html.DropDownListFor(m => m.AssessmentId, ViewData.Model.AssessmentList,   string.Empty, new { @class = "no-focus control-sm-7 form-control" })
      @*&nbsp;@Html.ValidationMessageFor(m => m.AssessmentId, " ")*@
    </div>

    <div class="form-group">
      @Html.LabelFor(x => x.StartDate, new { @class = "control-label" })
      <div class="input-group col-xs-7">
        @Html.TextBoxFor(x => x.StartDate, new { @class = "form-control date-picker",   @readonly = "readonly" })
        <label for="StartDate" class="input-group-addon glyphicon glyphicon-calendar   add-on" />
      </div>
    </div>

I've searched and searched and i just have no clue what to search for . Can you guys give me tips plz ?

PS : dont mind the spaces at the data attrib, i was trying to get rid of the error when submitting this form at stackoverflow ( code 4 spaces ) .

i know the third parameter from the drop down is to select the default value, but this is string.Empty with the dropdownlist of assessment and this gets the correct value when clicking edit, and so not an empty string like the company dropdown... so logically this cannot be the problem

Answer 1

i found the problem !

Setting the viewdata property of the corresponding companyId which was linked to the dropdown, solved all my problems. I dont know why this worked at the other pages, maybe i just missed it .