Question

I have two fields on an MVC3 form that must represent the same value. If one is updated it should update the other and display the correct value (Gotta love requirements). For what may be obvious reasons, the field (with the second one on the page) does not update properly. Is there a way to achieve what I need?

For example:

First Example

 <li class="identifier-controls"            @Model.IdentifierConfigurator.GenerateDataAttributes("ssn")>
        @Html.TextFieldFor("Social Security Number", m => m.SocialSecurityNumber).SSN()
    </li>

may appear twice on that form (In two different spots). (At this point, both of the controls have the same ID and name)

OR:

Second Example

    <li class="identifier-controls"            @Model.IdentifierConfigurator.GenerateDataAttributes("ssn")>
       @Html.TextFieldFor("Social Security Number", m => m.SocialSecurityNumber).SSN()
    </li>

and

    <li class="identifier-controls"            @Model.IdentifierConfigurator.GenerateDataAttributes("ssn")>
       @Html.TextFieldFor("Social Security Number", m => m.Person.Description.SSN).SSN()
    </li>

will appear on the form. At this point the IDs are different for the input but it will only update on of them.

Here is the HTML that is generated:

<ol class="field-list display">

  <li id="party-name"><span class="label">Name</span><span id="FormalDisplayName" class="value" style="width:140px">Guy, Bad</span></li>

  <li><span class="label">Aliases</span><span id="AliasNames" class="notentered" style="width:140px">Not entered</span></li>

  <li><span class="label">Status</span><span id="PartyStatusName" class="notentered" style="width:140px">Not entered</span></li>

  <li><span class="label">Gender</span><span id="Description_Gender" class="notentered" style="width:140px">Not entered</span></li>

  <li><span class="label">Juvenile</span><span id="Description_IsJuvenile" class="value" style="width:140px">No</span></li>

  <li><span class="label">Ethnicity</span><span id="Description_Ethnicity" class="notentered" style="width:140px">Not entered</span></li>

  <li><span class="label">Residential Status</span><span id="Description_ResidentialStatus" class="notentered" style="width:140px">Not entered</span></li>

  <li><span class="label">Marital Status</span><span id="Description_MaritalStatus" class="notentered" style="width:140px">Not entered</span></li>

  <li><span class="label">Religion</span><span id="Description_Religion" class="notentered" style="width:140px">Not entered</span></li>

  <li><span class="label">Citizenship</span><span id="Description_Citizenship" class="notentered" style="width:140px">Not entered</span></li>

  <li><span class="label">Birth City</span><span id="Description_BirthCity" class="notentered" style="width:140px">Not entered</span></li>

  <li><span class="label">Date of Birth</span><span id="Description_BirthDate" class="notentered" style="width:140px">Not entered</span></li>

  <li><span class="label">Date of Death</span><span id="Description_DeathDate" class="notentered" style="width:140px">Not entered</span></li>

  <li><span class="label">Est. Age at Incident</span><span id="Description_EstimatedAgeAtIncident" class="notentered" style="width:140px">Not entered</span></li>

  <li><span class="label">Adoption Date</span><span id="Description_AdoptionDate" class="notentered" style="width:140px">Not entered</span></li>

  <li><span class="label">Multiple Birth</span><span id="Description_MultipleBirthName" class="notentered" style="width:140px">Not entered</span></li>

  <li><span class="label">Email</span><span id="Description_Email" class="notentered" style="width:140px">Not entered</span></li>



    <li><span class="label">Identifiers</span><span id="SuspectIdentifiersDisplay" class="value" style="width:400px">Prof<span class='value-display'>&nbsp;123</span><span class='separator'>&nbsp;|&nbsp;</span>FBI<span class='value-display'>&nbsp;123</span><span class='separator'>&nbsp;|&nbsp;</span>SSN<span class='value-display'>&nbsp;222-22-2222</span><span class='separator'>&nbsp;|&nbsp;</span>ITN<span class='value-display'>&nbsp;123</span><span class='separator'>&nbsp;|&nbsp;</span>BCI<span class='value-display'>&nbsp;13</span><span class='separator'>&nbsp;|&nbsp;</span>ID<span class='value-display'>&nbsp;123</span><span class='separator'>&nbsp;|&nbsp;</span>DL<span class='value-display'>&nbsp;123</span><span class='separator'>&nbsp;|&nbsp;</span></span></li>

</ol>

The only difference between this HTML (this is the html from example two) and the HTML that is generated in the first example is that the two controls have the same ID and name. Here is what happens in the controller method that is called by the BeginRouteForm html helper when submit is called:

public ActionResult Update(int partyId, FormCollection data)
{
var party = Party.Find(partyId).OrNotFound();
var vm = new PartyEditViewModel(party.Case, party);

  try
  {
    UpdateModel(vm, data);

    return JsView("Update.js", party);
  }
  catch (UpdateModelException)
  {
    return JsView("Edit.js", vm);
  }
}

Answer 1

ok it looks like what is causing the issue is that your calls to Html.TextFieldFor may be creating two controls with the same name and Id that bound to to seperate model properties. If this is the case you will need to correctly prefix the id and name of the controls so that when model binding kicks in, it will bind the values correctly against the model’s properties.