title: Problems with updating modal after transfer to area
body: <p>I use modal to include new terms in dropdownlist. </p>
  
  <pre><code>&lt;div class="form-group"&gt;
  @Html.LabelFor(model =&gt; model.NatureKindID, "Kind of nature", htmlAttributes: new { @class = "control-label col-md-2" })
  &lt;div class="col-md-10"&gt;
      &lt;div id="divDropNatureKinds"&gt;
          @Html.Action("ReloadDropDownListNatureKinds", "Modals")
      &lt;/div&gt;
      @Ajax.ActionLink(" ", "CreateModalNatureKinds", "Modals", null, new AjaxOptions { UpdateTargetId = "modaldropbody", OnComplete = "openModal" }, new { @class = "glyphicon glyphicon-plus" })
      @Html.ValidationMessageFor(model =&gt; model.NatureKindID, "", new { @class = "text-danger" })
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>And Also in the main form has a div where modal is building:</p>
  
  <pre><code>&lt;div class="modal fade" id="modaldrop" role="dialog"&gt;
  &lt;div class="modal-dialog modal-sm"&gt;
      &lt;div class="modal-content"&gt;
          &lt;div id="modaldropbody" class="modal-body"&gt;
  
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And also an script:</p>
  
  <pre><code>@section scripts {
  &lt;script&gt;
      function openModal() {
          $("#modaldrop").modal()
      }
  &lt;/script&gt;
  </code></pre>
  
  <p>}</p>
  
  <p>When user hit the Action Link the "CreateModalNatureKinds" modal is open. It is a simple form and works well. </p>
  
  <p>New nature types are saved in the database and everything is fine at this point.</p>
  
  <p>So from this form I'll just show the script triggered by the close button that closes the modal and triggers reloading of the dropdownlist div from the main screen</p>
  
  <pre><code>&lt;script&gt;
      $("#btnClose").click(function () {
          $("#divDropNatureKinds").load("/Modals/ReloadDropDownListNatureKinds");
          $("#modal").close;
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>ReloadDropDownListNatureKinds have only: </p>
  
  <pre><code>@{
      Layout = null;
  }
  
  @Html.DropDownList("NatureKindID", null, "Select one", htmlAttributes: new { @class = "form-control" })
  </code></pre>
  
  <p>And Controller ActionResult is:</p>
  
  <pre><code>public ActionResult ReloadDropDownListNatureKinds(int? idNatureKind)
  {
      if (idNatureKind == null)
          ViewBag.NatureKindID = ListToDropDown();
      else
      {
          ViewBag.NatureKindID = ListaToDropDown(idNatureKind);
      }
      return PartialView();
  }
  public SelectList ListToDropDown()
  {
      return ListToDropDown(null);
  }
  public SelectList ListaToDropDown(int? idNatureKind)
  {
      var list = db.NatureKinds
      .Select(u =&gt; new
      {
          Text = u.NatureName,
          Value = u.ID
      }).ToList();
      SelectList ret = new SelectList(list.OrderBy(x =&gt; x.Text), "Value", "Text", idNatureKind);
      return ret;
  }
  </code></pre>
  
  <p>And the structure was:</p>
  
  <p><a href="https://i.stack.imgur.com/qT9Db.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/qT9Db.png" alt="enter image description here"></a></p>
  
  <p><strong>To be clear. ALL THIS WORKS PERFECTLY.</strong></p>
  
  <p>But, my project was getting very big. A mix of over 50 controllers and more than 250 views. So I decided to look for some way to organize and I found a post about Areas.</p>
  
  <p>I created 5 areas and moved models, controllers and views for each of them.</p>
  
  <p>And now the structure is:</p>
  
  <p><a href="https://i.stack.imgur.com/EsWWQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EsWWQ.png" alt="enter image description here"></a></p>
  
  <p>I put in the main View the references of the area where the modal is:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
      @Html.LabelFor(model =&gt; model.NatureKindID, "Kind of nature", htmlAttributes: new { @class = "control-label col-md-2" })
      &lt;div class="col-md-10"&gt;
          &lt;div id="divDropNatureKinds"&gt;
              @Html.Action("ReloadDropDownListNatureKinds", "Modals", new { area = "Admin" })
          &lt;/div&gt;
          @Ajax.ActionLink(" ", "CreateModalNatureKinds", "Modals", new { area = "Admin" }, new AjaxOptions { UpdateTargetId = "modaldropbody", OnComplete = "openModal" }, new { @class = "glyphicon glyphicon-plus" })
          @Html.ValidationMessageFor(model =&gt; model.NatureKindID, "", new { @class = "text-danger" })
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>With this new structure, most features are working well. When I click ActionLink, the modal opens. In the modal, when registering a new type of nature, it is registered in the database.</p>
  
  <p>When I click the modal close button, the ActionResult ReloadDropDownListNatureKinds is executed and the new list is loaded with the new Nature type that was created.</p>
  
  <p>All of this has been tested.</p>
  
  <p>But the list in the main View is not updated, it does not receive the new list.</p>
  
  <p>It is as if the ViewBag.NatureKindID that receives the new list is not the same as that used in the Main View, it continues with the old list.</p>
  
  <p>Any suggestion? Thanks in advance for any help.</p>